:root {
  --black: #030d0f;
  --deep: #06171b;
  --cyan: #00d7df;
  --cyan-soft: #75eced;
  --orange: #f0782c;
  --white: #f7fcfd;
}
*, *::before, *::after {box-sizing:border-box}
html,body {margin:0; min-height:100%; background:var(--deep); color:var(--white)}
body {font-family:'Abel','Arial Narrow',sans-serif; overflow:hidden}
.landing {position:relative; width:100%; height:100vh; height:100dvh; min-height:500px; overflow:hidden; background:radial-gradient(ellipse at 50% 46%, #07484c 0%, #082327 36%, #030a0c 92%)}
.scene,.poster,.vignette,.film-grain {position:absolute; inset:0; width:100%; height:100%}
.scene {visibility:hidden; opacity:1; display:block; z-index:1; pointer-events:none}
.poster {z-index:0; background: url('./assets/approved-design.png') center center / cover no-repeat}
.vignette {z-index:2; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 42%,transparent 16%,rgba(0,4,5,.05) 43%,rgba(0,4,5,.64) 100%); transition:opacity .65s ease}
.film-grain {z-index:3; pointer-events:none; opacity:0; background-image:url('./assets/noise.svg');background-size:192px 192px; mix-blend-mode:normal}
.copy {position:absolute; z-index:5; left:50%; top:70.25%; transform:translateX(-50%); width:max-content; max-width:95vw; text-align:center; opacity:0; transition:opacity .4s ease .35s; pointer-events:none}
.copy h1 {padding:0;margin:0; font-family:'Archivo Narrow','Arial Narrow',sans-serif; font-weight:700; font-size:clamp(21px,2.12vw,36px); letter-spacing:.275em; line-height:1.2; white-space:nowrap; text-transform:uppercase; text-indent:.275em; text-shadow:0 2px 18px rgba(0,0,0,.36)}
.copy p {font-family:'Abel','Arial Narrow',sans-serif;font-size:clamp(15px,1.2vw,20px);font-weight:400; letter-spacing:.34em; text-indent:.34em; margin:12px 0 0; color:#e5f8f9; text-shadow:0 1px 10px rgba(0,0,0,.55)}
.explore {pointer-events:auto;display:inline-flex; align-items:center; justify-content:center; gap:19px; margin-top:36px; min-height:42px; min-width:244px; padding:9px 18px 9px 23px; border:1.5px solid #00e0e7; border-radius:999px; text-decoration:none; font-family:'Archivo Narrow','Arial Narrow',sans-serif; font-size:14px; font-weight:700; letter-spacing:.25em; color:var(--white); background:rgba(0,15,18,.52); box-shadow:inset 0 0 12px rgba(0,234,238,.12),0 0 0 1px rgba(0,225,233,.14),0 0 19px rgba(0,215,224,.37),0 2px 14px rgba(0,0,0,.22); transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease; white-space:nowrap; cursor:pointer}
.explore svg {flex:none;transition:transform .25s ease,filter .25s ease}
.explore:hover,.explore:focus-visible {
  background:var(--orange); border-color:#ffb778; color:#fff;
  transform:translateY(-3px) scale(1.035);
  box-shadow:
    inset 0 0 7px 2px rgba(255,242,216,.50),
    inset 0 0 18px 7px rgba(255,185,114,.43),
    inset 0 2px 3px rgba(255,255,255,.25),
    0 0 0 1px rgba(250,168,82,.48),
    0 0 28px rgba(244,122,40,.58),
    0 10px 34px rgba(0,0,0,.30);
}
/* The text itself glows as if the now-amber fixtures are illuminating it. */
.explore span {
  text-shadow:none;
  transition:text-shadow .28s ease;
}
.explore:hover span,.explore:focus-visible span {
  text-shadow:0 0 4px rgba(255,255,255,.92),
              0 0 11px rgba(255,244,218,.72),
              0 0 22px rgba(255,174,88,.56);
}
.explore:hover svg,.explore:focus-visible svg {
  transform:translateX(5px);
  filter:drop-shadow(0 0 5px rgba(255,248,222,.84));
}
.explore:focus-visible {outline:3px solid #fff;outline-offset:5px}
.scroll-mark {display:block; width:1px; height:39px; margin:36px auto 0; background:#00e1ed; box-shadow:0 0 9px rgba(0,237,239,.65)}
.poster-click-target {position:absolute; z-index:4; display:block; width:clamp(200px,17vw,275px);height:56px; left:50%;top:81%;transform:translateX(-50%);border-radius:28px;}
.poster-click-target:focus-visible {outline:3px solid white;outline-offset:4px}
.webgl-ready .scene {visibility:visible}
.webgl-ready .poster {visibility:hidden}
.webgl-ready .vignette {opacity:1}
.webgl-ready .film-grain {opacity:.035}
.webgl-ready .copy {opacity:1}
.webgl-ready .poster-click-target {display:none}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:680px) {
  .landing {min-height:420px}
  .copy {top:70%; width:100%; max-width:100%; padding:0 10px}
  .copy h1 {font-size:clamp(17px,4.6vw,25px);letter-spacing:.13em;text-indent:.13em}
  .copy p {font-size:clamp(13px,3.2vw,17px);letter-spacing:.15em;text-indent:.15em;margin-top:9px}
  .explore {margin-top:25px; min-height:43px; min-width:212px;font-size:12px;padding:10px 16px;gap:14px}
  .scroll-mark {margin-top:24px;height:25px}
  .poster {background-position:center;background-size:auto 100%}
  .poster-click-target {top:82%}
}
@media (max-height:620px) and (min-width:680px) {
  .copy {top:69%}
  .copy h1 {font-size:clamp(21px,2vw,30px)}
  .copy p {margin-top:5px}
  .explore {margin-top:18px}
  .scroll-mark {margin-top:18px}
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* v9: centered branded preloader; the full-width 10px track sits behind
   the untouched original logo, rotated only in CSS. */
.preloader {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #08282a 0%, #04191c 52%, #020c0e 100%);
  display: grid; place-items: center;
  opacity: 1; visibility: visible; pointer-events: all;
  transition: opacity .55s ease, visibility .55s ease;
}
.preloader.is-finished {opacity:0; visibility:hidden; pointer-events:none}
.preloader-center {
  position:relative; z-index:2;
  width:min(90vw, 380px); height:230px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.preloader-logo {
  position:relative; z-index:3; display:block;
  width:clamp(106px, 10.8vw, 154px); height:auto;
  transform:rotate(-90deg); transform-origin:center center;
  filter:drop-shadow(0 0 14px rgba(67,196,197,.24));
  user-select:none; -webkit-user-drag:none;
}
.preloader-track {
  position:absolute; z-index:1;
  left:0; right:0; top:50%; transform:translateY(-50%);
  width:100%; height:10px;
  background:#07565a;overflow:hidden;
}
.preloader-fill {display:block;width:0%;height:100%;background:var(--orange);transition:width .22s ease-out;transform:translateZ(0)}
@media (max-width:680px) {
  .preloader-center {height:200px}
  .preloader-logo {width:110px}
}
@media (prefers-reduced-motion: reduce) { .preloader {transition:none} .preloader-fill {transition:none} }