:root{color-scheme:dark;--bg:#080805;--gold:#ffca20;--gold-soft:#ffdb75;--cream:#fff7e6;--muted:#a9a28d;--progress:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:Tahoma,"Noto Sans Arabic","Segoe UI",sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle at 50% 45%,transparent 0 29%,rgba(0,0,0,.23) 71%,rgba(0,0,0,.55) 100%)}
::selection{background:var(--gold);color:var(--bg)}
.grain{position:fixed;inset:-50%;z-index:15;pointer-events:none;opacity:.13;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.topbar{position:fixed;z-index:20;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,5vw,80px);font-size:13px;letter-spacing:.01em}
.topbar__brand{font-size:17px;font-weight:700;color:var(--cream)}
.topbar__dot{color:var(--gold);font-size:24px;line-height:0}
.topbar__status{display:flex;align-items:center;gap:10px;color:#d5ccb3}
.status-dot{height:7px;width:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(255,202,32,.12),0 0 18px rgba(255,202,32,.55);animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,202,32,.04),0 0 23px rgba(255,202,32,.8)}}
.scroll-scene{height:220vh;height:220svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 44%,#201805 0,#0e0c06 38%,#080805 76%)}
.stage__pattern{position:absolute;inset:-10%;opacity:.27;background-image:linear-gradient(30deg,transparent 42%,rgba(255,202,32,.12) 43%,rgba(255,202,32,.12) 44%,transparent 45%),linear-gradient(150deg,transparent 42%,rgba(255,202,32,.12) 43%,rgba(255,202,32,.12) 44%,transparent 45%),linear-gradient(90deg,transparent 47%,rgba(255,202,32,.08) 48%,rgba(255,202,32,.08) 49%,transparent 50%);background-size:100px 174px;mask-image:radial-gradient(ellipse at center,black,transparent 66%);transform:translateY(calc(var(--progress)*-90px))}
.stage__glow{position:absolute;left:50%;top:43%;width:min(80vw,750px);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(1 + var(--progress)*.4));border-radius:50%;background:radial-gradient(circle,rgba(255,169,0,.16),rgba(255,169,0,.06) 35%,transparent 70%);filter:blur(18px);pointer-events:none}
.orbit{position:absolute;left:50%;top:44%;width:min(66vw,640px);aspect-ratio:1;border:1px solid rgba(255,201,56,.1);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--progress)*22deg));pointer-events:none}
.orbit--one::before,.orbit--two::after{content:"";position:absolute;top:15%;left:14%;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px 4px rgba(255,202,32,.7)}
.orbit--two{width:min(92vw,900px);border-color:rgba(255,201,56,.055);transform:translate(-50%,-50%) rotate(calc(var(--progress)*-24deg))}
.orbit--two::after{top:76%;left:88%;width:3px;height:3px;opacity:.55}
.stage__content{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:90px 24px 92px}
.logo-space{position:relative;width:min(28vw,280px);min-width:180px;aspect-ratio:723/660;margin-top:0;perspective:900px;transform:translateY(calc(var(--progress)*-15px)) scale(calc(1 + var(--progress)*.35));will-change:transform}
.logo-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rotate-x,7deg)) rotateY(var(--rotate-y,-11deg)) rotateZ(var(--rotate-z,-2deg));filter:drop-shadow(0 26px 28px rgba(0,0,0,.75)) drop-shadow(0 0 32px rgba(255,164,0,.15));will-change:transform}
.logo-layer{position:absolute;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;user-select:none;pointer-events:none}
.logo-layer--depth{filter:brightness(.18) sepia(1) saturate(3) hue-rotate(350deg)}
.depth-7{transform:translate3d(16px,17px,-49px)}.depth-6{transform:translate3d(14px,15px,-42px)}.depth-5{transform:translate3d(12px,13px,-35px)}.depth-4{transform:translate3d(10px,11px,-28px)}.depth-3{transform:translate3d(8px,9px,-21px)}.depth-2{transform:translate3d(6px,7px,-14px)}.depth-1{transform:translate3d(3px,4px,-7px)}
.logo-layer--front{transform:translateZ(2px);filter:drop-shadow(0 2px 1px rgba(255,244,186,.36))}
.hero-copy{margin-top:-6px;text-align:center;transition:opacity .35s,transform .35s;opacity:calc(1 - var(--progress)*2.4);transform:translateY(calc(var(--progress)*-35px));pointer-events:none}
.hero-copy h1{margin:0;color:var(--cream);font-size:clamp(64px,9vw,134px);font-weight:700;letter-spacing:-.08em;line-height:1.2;text-shadow:0 8px 50px rgba(0,0,0,.35)}
.hero-copy__period{color:var(--gold);padding-right:.07em}
.hero-copy p{margin:3px 0 0;color:var(--gold-soft);font-size:clamp(14px,1.35vw,19px);letter-spacing:.02em}
.reveal-copy{position:absolute;top:calc(50% + min(21vw,218px));right:20px;left:20px;text-align:center;opacity:clamp(0,calc((var(--progress) - .49)*2.2),1);transform:translateY(calc((1 - var(--progress))*45px));pointer-events:none}
.reveal-copy__star{display:block;color:var(--gold);font-size:28px;margin-bottom:6px}
.reveal-copy p{color:var(--muted);font-size:clamp(14px,1.3vw,18px);margin:0 0 8px}
.reveal-copy strong{color:var(--cream);font-size:clamp(30px,3.8vw,55px);font-weight:700}
.scroll-cue{position:absolute;z-index:4;bottom:42px;left:50%;display:flex;align-items:center;gap:15px;color:rgba(255,247,230,.63);font-size:11px;white-space:nowrap;transform:translateX(-50%);opacity:calc(1 - var(--progress)*2.8)}
.scroll-cue__track{display:block;width:38px;height:23px;border:1px solid rgba(255,202,32,.4);border-radius:20px;transform:rotate(90deg)}
.scroll-cue__drop{position:absolute;top:9px;left:7px;width:5px;height:5px;border-radius:50%;background:var(--gold);animation:scrollHint 1.8s ease-in-out infinite}
@keyframes scrollHint{50%{left:23px;opacity:.5}}
.scene-counter{position:absolute;z-index:4;bottom:42px;right:clamp(24px,5vw,80px);display:flex;align-items:center;gap:10px;color:rgba(255,247,230,.42);font-size:11px;direction:ltr}
.scene-counter span:first-child{color:var(--gold)}
.scene-counter__line{width:38px;height:1px;background:rgba(255,202,32,.3)}
.footer{display:flex;justify-content:space-between;padding:24px clamp(24px,5vw,80px) 30px;border-top:1px solid rgba(255,202,32,.12);color:rgba(255,247,230,.48);font-size:12px;background:#080805}
@media(max-width:700px){.topbar{padding:23px 22px}.topbar__brand{font-size:15px}.stage{min-height:0}.stage__content{padding:96px 16px 110px}.logo-space{width:min(53vw,250px);min-width:0;margin-top:0}.hero-copy{margin-top:12px}.hero-copy h1{font-size:clamp(62px,17vw,96px)}.hero-copy p{font-size:14px}.reveal-copy{top:calc(50% + min(32vw,140px))}.scene-counter{right:22px;bottom:30px}.scroll-cue{bottom:31px}.footer{padding:23px 22px 28px}.orbit{width:86vw}.orbit--two{width:120vw}}
@media(max-height:700px){.logo-space{width:min(25vh,200px);min-width:150px;margin-top:0}.hero-copy h1{font-size:clamp(50px,9vh,82px)}.hero-copy p{font-size:13px}.reveal-copy{top:calc(50% + 108px)}.reveal-copy strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.status-dot,.scroll-cue__drop{animation:none}.logo-tilt,.logo-space,.hero-copy,.reveal-copy,.stage__pattern,.stage__glow,.orbit{transition:none!important}}