@font-face { font-family:"Stopplas Rajdhani"; font-style:normal; font-weight:600; font-display:block;
  src:url(fonts/rajdhani-600-intro.woff2) format("woff2"); }

#intro, #stage { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on #intro { display: block; }
html.intro-on #stage { display: grid; }

html.intro-on [data-intro-slot] { opacity: 0; transition: opacity .2s; }
html.intro-on.intro-landed [data-intro-slot] { opacity: 1; }

#intro { --day:#fff;
  position:fixed; inset:0; z-index:100; background:#050506; overflow:hidden; --r:0vmax; }
#intro .vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(0,0,0,.85) 100%); pointer-events:none; }
#intro .bloom { position:absolute; left:50%; top:50%; width:min(1000px,150vw); height:420px; transform:translate(-50%,-50%); opacity:0; filter:blur(12px); mix-blend-mode:screen; pointer-events:none; }
#intro .bloom.amber { background:radial-gradient(ellipse at center,rgba(255,150,20,.38),transparent 62%); }
#intro .bloom.red { background:radial-gradient(ellipse at center,rgba(255,25,20,.75),rgba(255,0,0,.15) 45%,transparent 68%); }

#intro .flood { position:absolute; inset:0; background:var(--day); opacity:0;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 var(--r),transparent calc(var(--r) + 10vmax));
  mask-image:radial-gradient(circle at 50% 50%,#000 var(--r),transparent calc(var(--r) + 10vmax)); }
#intro .flood-rim { position:absolute; inset:0; background:#fff8ec; opacity:0;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--r) - 4vmax),#000 calc(var(--r) + 4vmax),transparent calc(var(--r) + 16vmax));
  mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--r) - 4vmax),#000 calc(var(--r) + 4vmax),transparent calc(var(--r) + 16vmax)); }

#stage { --mark-size:clamp(54px,13.5vw,176px);
  position:fixed; inset:0; z-index:110; place-items:center; pointer-events:none; }
#stage.done { display:none; }
#stage #mark { position:relative; font-family:"Stopplas Logo","Archivo Black",sans-serif; font-size:var(--mark-size); line-height:1; letter-spacing:-.045em;
  clip-path:inset(50% -15% 50% -15%); --p:-20%; --sx:150%; will-change:transform; }
#stage .mark-in { position:relative; transform:skewX(-12deg); }
#stage .ml { display:block; white-space:nowrap; padding:0 .08em; -webkit-background-clip:text; background-clip:text; color:transparent; }
#stage .ml sup { font-family:Inter,system-ui,sans-serif; font-weight:700; font-size:.17em; vertical-align:top; position:relative; top:.3em; margin-left:.06em; letter-spacing:0; }
#stage .m-night { background-image:linear-gradient(90deg,#f4f4f6 0%,#b9b9bf 38%,#ff3b30 72%,#e3141b 100%);
  filter:drop-shadow(0 0 18px rgba(255,40,30,.35));
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--p) - 6%),transparent calc(var(--p) + 6%));
  mask-image:linear-gradient(100deg,#000 calc(var(--p) - 6%),transparent calc(var(--p) + 6%)); }
#stage .m-day, #stage .m-sheen { position:absolute; inset:0; }
#stage .m-day { background-image:linear-gradient(90deg,#141414 0%,#2a2a2a 40%,#c3141a 75%,#e3141b 100%); opacity:0; }
#stage .m-sheen { background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%); background-size:250% 100%; background-repeat:no-repeat; background-position:var(--sx) 0; }
#stage .slits { position:absolute; left:50%; top:50%; width:min(1200px,96vw); height:0; transform:translate(-50%,-50%); }
#stage .slit { position:absolute; left:0; right:0; top:-1px; height:2px; opacity:0; transform:scaleX(0);
  background:linear-gradient(90deg,transparent,#ff3b30 20%,#fff 50%,#ff3b30 80%,transparent);
  box-shadow:0 0 14px 2px rgba(255,50,40,.8),0 0 40px 6px rgba(255,40,30,.4); }
#stage #slogan { position:absolute; left:0; right:0; top:calc(50% + var(--mark-size) * .62); text-align:center; color:#d9d9de;
  font:600 clamp(11px,1.6vw,15px) "Stopplas Rajdhani",Rajdhani,sans-serif; letter-spacing:.55em; padding-left:.55em; }
#stage #slogan span { display:inline-block; opacity:0; white-space:pre; }