*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#090611}body{color:#eeeafa;font-family:"Helvetica Neue",Arial,sans-serif;overflow:hidden}button{font:inherit}
.scene{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;perspective:1200px;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#211135 0%,#1d102f 12%,#180e28 25%,#140c22 38%,#110a1c 50%,#0d0817 63%,#090611 80%)}
.aura{position:absolute;width:min(78vw,1000px);height:min(55vw,650px);border-radius:50%;background:radial-gradient(ellipse,#9562d726,transparent 64%);opacity:0;animation:aura 6s ease-out forwards}
.horizon{position:absolute;left:8%;right:8%;top:76%;height:1px;background:linear-gradient(90deg,transparent,#ad82e322,transparent);opacity:0;animation:fade 3s 3s forwards}
.horizon:after{content:"";position:absolute;inset:-30px 18%;background:#9a6ee90b;filter:blur(23px)}
.brand{text-align:center;width:min(84vw,680px);padding-bottom:25px;transform-style:preserve-3d;position:relative}
.arrival{opacity:0;transform:translateZ(-2600px) scale(.32);filter:blur(22px);animation:arrive 4.2s .25s cubic-bezier(.18,.7,.2,1) forwards;will-change:transform,opacity,filter}
.symbol{display:block;width:clamp(130px,19vw,224px);margin:0 auto 32px;filter:drop-shadow(0 0 24px #aa80e733)}
.wordmark{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 30px #b99dff18)}
.development{margin:28px 0 0;padding-left:.62em;font-size:clamp(12px,1.8vw,17px);letter-spacing:.62em;font-weight:300;color:#c6b8dc;opacity:0;animation:subtitle 1.7s 3.4s cubic-bezier(.16,1,.3,1) forwards}
.coming{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:52px;color:#a695b9;letter-spacing:.28em;font-size:11px;text-transform:uppercase;font-weight:400;opacity:0;animation:subtitle 1.8s 4.8s cubic-bezier(.16,1,.3,1) forwards}
.coming:before,.coming:after{content:"";width:37px;height:1px;background:linear-gradient(90deg,transparent,#8f74af66)}.coming:after{transform:rotate(180deg)}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#d5bbff;box-shadow:0 0 9px #b090ee;opacity:0;animation:star 5s var(--delay) ease-in-out infinite alternate;pointer-events:none}
.replay{position:fixed;bottom:28px;right:32px;display:flex;align-items:center;gap:9px;background:transparent;border:1px solid #bba3df22;color:#a695b9;padding:11px 15px;border-radius:24px;font-size:11px;letter-spacing:.02em;cursor:pointer;opacity:0;animation:fade 1s 6.2s forwards;transition:background .2s,border-color .2s,color .2s}.replay:hover{background:#b090ee0c;border-color:#bba3df66;color:#eeeafa}.replay:focus-visible{outline:2px solid #b3a2f6;outline-offset:4px}.replay svg{width:13px;height:13px}
@keyframes arrive{0%{opacity:0;transform:translateZ(-2600px) scale(.32);filter:blur(22px)}25%{opacity:.3}60%{opacity:.95;filter:blur(3px)}100%{opacity:1;transform:translateZ(0) scale(1);filter:none}}
@keyframes subtitle{from{opacity:0;transform:translateY(15px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes aura{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}@keyframes fade{to{opacity:1}}@keyframes star{from{opacity:.08}to{opacity:.4}}
@media(max-width:600px){.brand{width:87vw;padding-bottom:45px}.symbol{margin-bottom:28px}.development{margin-top:22px;letter-spacing:.46em;padding-left:.46em}.coming{margin-top:40px;font-size:10px}.replay{bottom:22px;right:22px}.scene{background:radial-gradient(ellipse at 50% 43%,#211135 0%,#1d102f 14%,#180e28 28%,#140c22 42%,#110a1c 56%,#0d0817 70%,#090611 88%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.arrival,.development,.coming,.aura,.horizon,.replay{opacity:1;transform:none;filter:none}.star{opacity:.2}}

.depth-spacer{aspect-ratio:240 / 122}
/* Sculpted edges use the original brand contours in a real CSS 3D stack. */
.arrival{transform-style:preserve-3d;animation-duration:5s}
.sculpture{position:relative;transform-style:preserve-3d;transform:none}
.face{position:relative;transform:translateZ(14px);transform-style:preserve-3d;backface-visibility:hidden}
.face .symbol{filter:drop-shadow(0 0 17px #bf96ff42)}
.face .wordmark{filter:drop-shadow(0 1px 1px #fff8) drop-shadow(0 0 25px #b99dff18)}
.depth-stack{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.depth-layer{position:absolute;inset:0;transform:translate3d(calc(var(--depth) * .55px),calc(var(--depth) * .65px),14px);filter:brightness(calc(.38 - var(--depth) * .012)) saturate(1.4);backface-visibility:hidden}
.depth-layer .symbol,.depth-layer .wordmark{filter:none}
.development{animation-delay:4.3s;text-shadow:1px 1px #5e457a,2px 2px #33223f,0 6px 15px #0008}
.coming{animation-delay:5.6s}.replay{animation-delay:7s}
.orbital-floor{position:absolute;width:min(90vw,1000px);height:min(90vw,1000px);top:65%;left:50%;transform:translateX(-50%) rotateX(78deg);transform-origin:50% 0;opacity:0;animation:fade 3s 3s forwards;pointer-events:none}
 .orbital-floor div{position:absolute;inset:0;border:1px solid #b58de54a;border-radius:50%;opacity:0;transform:scale(.2);transform-origin:50% 50%;animation:outward-wave 12s 3s linear infinite;will-change:transform,opacity}
.orbital-floor div:nth-child(2){animation-delay:7s}.orbital-floor div:nth-child(3){animation-delay:11s}
@keyframes outward-wave{0%{transform:scale(.2);opacity:0}18%{opacity:.6}65%{opacity:.35}100%{transform:scale(1.55);opacity:0}}
.horizon{display:none}.aura{background:radial-gradient(ellipse,#9562d733,transparent 64%)}
@media(max-width:600px){.sculpture{transform:none}.brand{width:82vw}.orbital-floor{top:68%}}
@media(prefers-reduced-motion:reduce){.sculpture{transition:none}.orbital-floor{display:none}}