:root { --ink:#03070a; --ice:#eaf7ff; --line:rgba(207,235,250,.38); --muted:rgba(234,247,255,.66); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; overflow:hidden; background:var(--ink); }
body { color:var(--ice); font-family:Arial,Helvetica,sans-serif; }
.site-shell { position:relative; min-height:100svh; isolation:isolate; overflow:hidden; background:#020507; }
.artwork,.atmosphere,.frame { position:absolute; inset:0; }
.artwork { z-index:-3; background:#020507; }
.artwork img { position:absolute; inset:0; width:100%; height:100%; object-position:center; animation:slow-breath 15s ease-in-out infinite alternate; }
.artwork__blur { object-fit:cover; opacity:.34; filter:blur(26px) brightness(.48) saturate(.72); }
.artwork__main { object-fit:cover; filter:brightness(.82) contrast(1.08); }
.atmosphere { z-index:-2; pointer-events:none; background:linear-gradient(180deg,rgba(1,5,8,.82) 0%,transparent 22%,transparent 68%,rgba(1,5,8,.95) 100%),radial-gradient(circle at center,transparent 25%,rgba(0,4,7,.2) 65%,rgba(0,3,6,.75) 100%); }
.atmosphere::after { content:''; position:absolute; inset:0; opacity:.11; background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(196,230,250,.22) 3px); mix-blend-mode:screen; }
.aurora { position:absolute; width:62vw; height:70vh; border-radius:50%; opacity:.18; filter:blur(70px); mix-blend-mode:screen; }
.aurora--left { top:-22%; left:-26%; background:radial-gradient(ellipse,rgba(118,205,255,.68),rgba(41,94,130,.18) 42%,transparent 70%); animation:aurora-left 12s ease-in-out infinite alternate; }
.aurora--right { right:-28%; bottom:-26%; background:radial-gradient(ellipse,rgba(180,229,255,.52),rgba(45,111,150,.14) 44%,transparent 72%); animation:aurora-right 15s ease-in-out infinite alternate; }
.atmosphere__halo { position:absolute; top:49%; left:50%; width:min(76vw,1040px); aspect-ratio:1; translate:-50% -50%; border:1px solid rgba(210,240,255,.08); border-radius:50%; box-shadow:0 0 90px rgba(155,220,255,.08),inset 0 0 80px rgba(155,220,255,.05); animation:halo-pulse 6s ease-in-out infinite; }
.energy-rings { position:absolute; top:49%; left:50%; width:min(71vw,970px); aspect-ratio:1; translate:-50% -50%; opacity:.5; filter:drop-shadow(0 0 14px rgba(187,229,250,.2)); }
.energy-rings span { position:absolute; inset:0; border-radius:50%; border:1px solid transparent; border-top-color:rgba(222,244,255,.35); border-right-color:rgba(146,206,238,.1); animation:orbit 24s linear infinite; }
.energy-rings span:nth-child(2) { inset:8%; border-top-color:transparent; border-right-color:rgba(224,246,255,.28); border-bottom-color:rgba(125,198,236,.12); animation-duration:18s; animation-direction:reverse; }
.energy-rings span:nth-child(3) { inset:18%; border-left-color:rgba(215,241,255,.23); border-bottom-color:rgba(145,209,241,.11); animation-duration:14s; }
.lightning { position:absolute; width:46vw; height:1px; opacity:0; background:linear-gradient(90deg,transparent,rgba(222,246,255,.7),transparent); box-shadow:0 0 12px rgba(174,225,252,.8); transform-origin:center; mix-blend-mode:screen; }
.lightning--one { top:28%; left:-8%; rotate:-19deg; animation:flash 8s ease-in-out infinite 1.5s; }
.lightning--two { right:-12%; bottom:31%; rotate:-22deg; animation:flash 11s ease-in-out infinite 5s; }
.atmosphere__scan { position:absolute; inset-inline:0; height:18vh; background:linear-gradient(180deg,transparent,rgba(215,242,255,.045),transparent); animation:scan 9s linear infinite; }
.particles span { position:absolute; left:var(--x); bottom:-6vh; width:var(--size); aspect-ratio:1; border-radius:50%; background:rgba(224,246,255,.76); box-shadow:0 0 8px rgba(192,234,255,.7); opacity:0; animation:float-up calc(8s + var(--i) * .3s) linear infinite; animation-delay:calc(var(--i) * -.74s); }
.frame { z-index:2; margin:clamp(16px,2.5vw,38px); pointer-events:none; border:1px solid rgba(210,238,251,.08); }
.frame__corner { position:absolute; width:34px; height:34px; border-color:var(--line); }
.frame__corner--tl { top:-1px; left:-1px; border-top:1px solid; border-left:1px solid; }.frame__corner--tr { top:-1px; right:-1px; border-top:1px solid; border-right:1px solid; }
.frame__corner--bl { bottom:-1px; left:-1px; border-bottom:1px solid; border-left:1px solid; }.frame__corner--br { right:-1px; bottom:-1px; border-right:1px solid; border-bottom:1px solid; }
.topbar,.footer { position:absolute; z-index:3; left:clamp(32px,4.7vw,78px); right:clamp(32px,4.7vw,78px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-family:"Courier New",monospace; font-size:10px; font-weight:500; line-height:1; letter-spacing:.22em; text-transform:uppercase; }
.topbar { top:clamp(31px,5vw,65px); }.topbar__brand { font-size:12px; font-weight:700; letter-spacing:.34em; }.topbar__status { display:flex; align-items:center; gap:10px; color:var(--muted); }.topbar__catalog { justify-self:end; color:var(--muted); }
.status-dot { width:5px; height:5px; border-radius:50%; background:#dff5ff; box-shadow:0 0 0 4px rgba(196,235,255,.08),0 0 16px rgba(196,235,255,.8); animation:status 2.2s ease-in-out infinite; }
.brand-stage { position:absolute; z-index:3; top:50%; left:50%; display:flex; width:min(1120px,calc(100vw - 96px)); translate:-50% -46%; flex-direction:column; align-items:center; text-align:center; filter:drop-shadow(0 12px 35px rgba(0,0,0,.72)); }
.brand-stage__signal,.brand-stage__soon { margin:0; font-family:"Courier New",monospace; font-size:9px; letter-spacing:.28em; text-transform:uppercase; }
.brand-stage__signal { display:flex; margin-bottom:clamp(18px,2.7vh,30px); align-items:center; gap:12px; color:rgba(234,247,255,.58); }
.brand-stage__signal span { width:5px; height:5px; border-radius:50%; background:#e6f7ff; box-shadow:0 0 0 4px rgba(196,235,255,.08),0 0 18px rgba(196,235,255,.85); animation:status 2.2s ease-in-out infinite; }
.brand-stage__logo { position:relative; width:min(76vw,1080px); aspect-ratio:1148/390; margin:0; animation:logo-breathe 7s ease-in-out infinite; }
.brand-stage__logo img,.brand-stage__subline img { width:100%; height:100%; object-fit:contain; }
.brand-stage__subline { position:relative; width:min(48vw,700px); aspect-ratio:758/63; margin-top:clamp(56px,5vw,82px); opacity:.9; }
.brand-stage__soon { position:relative; margin-top:clamp(25px,4vh,46px); padding-top:15px; color:rgba(234,247,255,.56); }
.brand-stage__soon::before { content:''; position:absolute; top:0; left:50%; width:56px; height:1px; translate:-50% 0; background:linear-gradient(90deg,transparent,rgba(225,246,255,.8),transparent); animation:signal-glow 3.4s ease-in-out infinite; }
.footer { bottom:clamp(31px,5vw,65px); display:flex; justify-content:space-between; color:rgba(234,247,255,.45); }.footer__soon { color:rgba(234,247,255,.86); }
@keyframes slow-breath { from{transform:scale(1)} to{transform:scale(1.025)} } @keyframes halo-pulse { 0%,100%{opacity:.35;transform:scale(.96)} 50%{opacity:.72;transform:scale(1.03)} }
@keyframes aurora-left { from{transform:translate3d(-4%,-2%,0) rotate(-8deg) scale(.9)} to{transform:translate3d(14%,9%,0) rotate(9deg) scale(1.13)} } @keyframes aurora-right { from{transform:translate3d(6%,5%,0) rotate(5deg) scale(.94)} to{transform:translate3d(-14%,-11%,0) rotate(-10deg) scale(1.16)} }
@keyframes orbit { to{transform:rotate(360deg)} } @keyframes flash { 0%,7%,9%,12%,100%{opacity:0;transform:scaleX(.35)} 8%,10%{opacity:.38;transform:scaleX(1)} 11%{opacity:.14;transform:scaleX(.72)} }
@keyframes scan { from{transform:translateY(-20vh)} to{transform:translateY(120vh)} } @keyframes float-up { 0%{transform:translateY(0) scale(.7);opacity:0} 14%{opacity:.55} 80%{opacity:.16} 100%{transform:translateY(-112vh) translateX(24px) scale(1.4);opacity:0} }
@keyframes status { 50%{opacity:.4;transform:scale(.7)} } @keyframes logo-breathe { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(199,235,255,.05))} 50%{transform:scale(1.012);filter:drop-shadow(0 0 22px rgba(199,235,255,.16))} } @keyframes signal-glow { 0%,100%{opacity:.25;transform:scaleX(.6)} 50%{opacity:1;transform:scaleX(1.35)} }
@media (max-width:700px) { .topbar,.footer{grid-template-columns:1fr auto}.topbar__status{display:none}.brand-stage{width:calc(100vw - 42px);translate:-50% -48%}.brand-stage__signal{margin-bottom:18px;font-size:8px;letter-spacing:.18em}.brand-stage__logo{width:min(91vw,700px)}.brand-stage__subline{width:min(72vw,520px);margin-top:42px}.brand-stage__soon{margin-top:30px;font-size:8px;letter-spacing:.2em}.energy-rings{width:145vw;opacity:.35}.atmosphere__halo{width:150vw}.footer p:first-child{display:none}.footer{justify-content:flex-end} }
@media (max-height:700px) and (min-width:701px) { .brand-stage{width:min(920px,calc(100vw - 120px))}.brand-stage__logo{width:min(64vw,850px)}.brand-stage__soon{margin-top:20px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important} }