@font-face{font-family:Tajawal;src:url("../vendor/cinematic/fonts/tajawal-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url("../vendor/cinematic/fonts/tajawal-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"El Messiri";src:url("../vendor/cinematic/fonts/el-messiri-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"El Messiri";src:url("../vendor/cinematic/fonts/el-messiri-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--black:#080808;--white:#fff;--muted:#9a9a9a;--intelligence:#4A2535;--talent:#D4860B;--agenda:#1A3D7C}
*{box-sizing:border-box}
html{background:var(--black);scrollbar-width:thin;scrollbar-color:#555 #080808}
body{margin:0;background:transparent;color:var(--white);font-family:Tajawal,Arial,sans-serif;direction:rtl;overflow-x:hidden}
body,button{font-synthesis:none}
.ambient,.vignette,.grain{position:fixed;inset:0;pointer-events:none}
.ambient{z-index:-3;background:#080808;will-change:background-color}
.vignette{z-index:20;background:radial-gradient(circle at 50% 45%,transparent 35%,rgba(0,0,0,.55) 120%)}
.grain{z-index:21;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.progress{position:fixed;z-index:50;top:0;right:0;left:0;height:2px;background:rgba(255,255,255,.08)}
.progress span{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:right center;will-change:transform}
.cinematic-header{position:fixed;z-index:40;top:0;right:0;left:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,76px);border-bottom:1px solid transparent;transform:translateY(-110%);transition:transform .55s cubic-bezier(.22,1,.36,1),background .4s,border-color .4s;pointer-events:none}
.cinematic-header.is-visible{transform:translateY(0)}
.cinematic-header.is-hidden{transform:translateY(-110%)}
.cinematic-header.is-solid{background:rgba(8,8,8,.72);border-color:rgba(255,255,255,.09);backdrop-filter:blur(18px)}
.cinematic-header img{width:122px;height:48px;object-fit:contain}
.cinematic-header span{font-size:12px;letter-spacing:.12em;color:#bcbcbc}
.beat{position:relative;min-height:100svh}
.hero{display:grid;place-items:center;overflow:hidden;isolation:isolate}
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.65}
.hero-content{position:relative;z-index:3;display:flex;align-items:center;flex-direction:column;width:min(90vw,1000px);text-align:center;perspective:1000px}
.hero-kicker{margin:0 0 3vh;font-size:clamp(10px,1vw,13px);letter-spacing:.52em;color:#a5a5a5;direction:ltr}
.hero-mark-wrap{position:relative;width:min(45vw,390px);aspect-ratio:1;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}
.hero-mark{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 45px rgba(0,0,0,.5));will-change:transform,opacity}
.hero-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.035) 43%,transparent 68%);filter:blur(8px);animation:breathe 5s ease-in-out infinite}
.hero-sheen{position:absolute;z-index:3;inset:12%;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.25) 48%,transparent 62%);transform:translateX(-140%) rotate(-8deg);mix-blend-mode:screen;animation:sheen 6.5s 2s ease-in-out infinite;pointer-events:none}
.hero h1{font-family:"El Messiri",serif;font-size:clamp(33px,6vw,78px);font-weight:400;line-height:1.1;margin:-7vh 0 1.8vh;letter-spacing:-.035em}
.hero-tagline{font-size:clamp(14px,1.65vw,21px);font-weight:400;letter-spacing:.02em;color:#b8b8b8;margin:0}
.hero-orbit{position:absolute;z-index:1;right:50%;top:50%;border:1px solid rgba(255,255,255,.1);border-radius:50%;transform:translate(50%,-50%);pointer-events:none}
.orbit-a{width:min(76vw,900px);aspect-ratio:1}
.orbit-b{width:min(58vw,680px);aspect-ratio:1;border-color:rgba(255,255,255,.06)}
.scroll-cue{position:absolute;z-index:3;bottom:3.8vh;right:50%;transform:translateX(50%);display:flex;align-items:center;flex-direction:column;gap:10px;color:#898989;font-size:11px}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(#aaa,transparent);animation:cue 2s ease-in-out infinite}
.edition{min-height:150svh}
.edition-stage{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr);align-items:center;gap:7vw;padding:10vh clamp(26px,8vw,130px);overflow:hidden}
.edition-copy{position:relative;z-index:3;max-width:620px}
.edition-index{font-size:12px;letter-spacing:.1em;color:var(--muted);margin:0 0 5vh}
.edition h2{font-family:"El Messiri",serif;font-size:clamp(60px,10vw,150px);font-weight:400;line-height:.82;letter-spacing:-.06em;direction:ltr;text-align:right;margin:0 0 5vh;color:var(--accent);text-shadow:0 0 45px color-mix(in srgb,var(--accent) 30%,transparent)}
.edition h3{font-family:"El Messiri",serif;font-size:clamp(25px,3.1vw,44px);font-weight:400;line-height:1.45;margin:0 0 2vh}
.edition-copy>p:last-child{max-width:530px;font-size:clamp(15px,1.5vw,20px);line-height:1.9;color:#b9b9b9;margin:0}
.edition-visual{position:relative;width:min(36vw,500px);aspect-ratio:1;justify-self:center;display:grid;place-items:center;perspective:900px}
.edition-disc{width:54%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 85%,white),var(--accent) 42%,#060606 74%);box-shadow:0 0 100px color-mix(in srgb,var(--accent) 45%,transparent),inset -25px -30px 55px rgba(0,0,0,.55);will-change:transform}
.edition-line{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 75%,white);border-radius:50%;opacity:.34}
.line-one{inset:11%;transform:rotateX(67deg) rotateZ(14deg)}
.line-two{inset:0;transform:rotateY(67deg) rotateZ(-22deg)}
.edition-signal{position:absolute;left:0;bottom:8%;font-size:11px;letter-spacing:.25em;color:#a0a0a0}
.edition-intelligence{--accent:var(--intelligence)}
.edition-talent{--accent:var(--talent)}
.edition-agenda{--accent:var(--agenda)}
.finale{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:10vh 5vw}
.finale p{font-size:13px;letter-spacing:.12em;color:#999;margin:0 0 3vh}
.finale h2{position:relative;z-index:2;font-family:"El Messiri",serif;font-size:clamp(34px,6vw,84px);font-weight:400;max-width:940px;line-height:1.35;margin:0}
.finale img{position:relative;z-index:2;width:min(42vw,300px);margin-top:6vh}
.finale-rings{position:absolute;inset:0;display:grid;place-items:center}
.finale-rings i{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;width:35vw;aspect-ratio:1}
.finale-rings i:nth-child(2){width:58vw}
.finale-rings i:nth-child(3){width:82vw}
@keyframes breathe{50%{opacity:.55;transform:scale(1.12)}}
@keyframes sheen{0%,20%{transform:translateX(-140%) rotate(-8deg)}50%,100%{transform:translateX(140%) rotate(-8deg)}}
@keyframes cue{0%,100%{transform:scaleY(.5);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media(max-width:760px){
 .cinematic-header{height:68px}.cinematic-header img{width:95px;height:40px}
 .hero-mark-wrap{width:min(72vw,340px)}.hero h1{margin-top:-5vh}.hero-tagline{max-width:80vw}
 .edition{min-height:140svh}.edition-stage{grid-template-columns:1fr;grid-template-rows:.82fr 1.18fr;gap:0;padding:12vh 7vw 7vh}
 .edition-visual{width:min(67vw,360px);align-self:end}.edition-copy{align-self:center}
 .edition h2{font-size:clamp(56px,20vw,104px);margin-bottom:3.5vh}.edition-index{margin-bottom:3vh}
 .edition h3{font-size:clamp(25px,7.8vw,37px)}.edition-copy>p:last-child{font-size:16px}
 .finale img{width:min(65vw,260px)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.hero-halo,.hero-sheen,.scroll-cue i{animation:none!important}
 *,*::before,*::after{transition-duration:.01ms!important}
}
