/* NSC V2.1 · Cinematic HTML/CSS/Canvas intro
   Fully responsive. Never stretches video footage. */
.intro-gate {
  --intro-cyan: #24eeff;
  --intro-purple: #9d58ff;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #02050e;
  color: #edf9ff;
  opacity: 1;
  visibility: visible;
  transition: opacity .84s cubic-bezier(.22,.61,.36,1), visibility .84s;
}
.intro-gate:focus{outline:none}
.intro-gate.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.intro-gate::before {
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 40% 44% at 51% 48%,rgba(0,164,255,.09),transparent 85%),
    radial-gradient(ellipse 38% 47% at 18% 60%,rgba(106,32,190,.14),transparent 80%),
    radial-gradient(ellipse 41% 52% at 84% 30%,rgba(8,136,204,.12),transparent 80%),
    #02050e;
}
.intro-gate::after {
  content:"";
  position:absolute; inset:0;
  z-index:8;
  pointer-events:none;
  background:radial-gradient(ellipse 80% 88% at 50% 49%,transparent 33%,rgba(1,2,8,.67) 98%);
}
.intro-particles {
  position:absolute;
  width:100%; height:100%; inset:0;
  z-index:3;
  pointer-events:none;
}
.intro-ambient {
  position:absolute; z-index:1; inset:-25%;
  opacity:.78;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(46,239,255,.045) 45deg,transparent 80deg,rgba(146,65,252,.095) 150deg,transparent 195deg,rgba(52,218,255,.08) 270deg,transparent 325deg);
  filter:blur(72px);
  transform:rotate(0deg);
  animation:introAmbient 14s linear infinite;
}
.intro-grid {
  position:absolute; z-index:1;
  inset:45% -35% -64%;
  transform-origin:50% 0;
  transform:perspective(550px) rotateX(68deg) scale(1.65);
  background-image:linear-gradient(rgba(26,190,237,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(46,188,254,.13) 1px,transparent 1px);
  background-size:85px 85px;
  opacity:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 33%, transparent 88%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 33%, transparent 88%);
  animation:introGridIn 1.7s 0.18s ease-out forwards, introGridRun 10s linear infinite;
}
.intro-ambient-line {
  position:absolute;z-index:2;
  top:52%;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent 6%,rgba(0,222,255,.15) 32%,rgba(190,133,255,.25) 50%,rgba(0,222,255,.15) 68%,transparent 94%);
  transform:scaleX(0);
  box-shadow:0 0 30px rgba(0,213,255,.4);
  animation:introLine 1.4s .28s cubic-bezier(.2,.8,.2,1) forwards;
}
.intro-sweep {
  position:absolute;inset:0 auto 0 -24%;width:20%;z-index:2;
  transform:skewX(-15deg);
  background:linear-gradient(90deg,transparent,rgba(80,223,255,.02),rgba(116,206,255,.13),transparent);
  filter:blur(22px);
  animation:introSweep 2.5s 1.15s ease-out both;
  pointer-events:none;
}
.intro-topline,.intro-bottomline {
  position:absolute; z-index:10;
  left:clamp(22px,4vw,78px);right:clamp(22px,4vw,78px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  color:rgba(165,208,224,.55);
  font:600 10px/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.24em;
  opacity:0;
  animation:introFineprint .7s .9s forwards;
  pointer-events:none;
}
.intro-topline { top:clamp(24px,4vw,56px); }
.intro-bottomline { bottom:clamp(25px,4.2vw,56px); }
.intro-status-dot {display:inline-block;vertical-align:middle;width:5px;height:5px;margin-right:10px;border-radius:100%;background:#30e6f5;box-shadow:0 0 15px #17f8e1;animation:introBlink 2s infinite alternate;}
.intro-scene {
  position:absolute; z-index:5;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1000px,92vw);
  height:min(660px,83vh);
  min-height:380px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.intro-energy {
  position:absolute;
  left:50%;top:40%;width:clamp(290px,44vw,570px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.intro-aura {
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(1,185,255,.085),rgba(52,79,232,.08) 27%,rgba(119,44,220,.04) 53%,transparent 72%);
  filter:blur(22px);
  animation:introAura 3.4s 1.1s ease-in-out infinite alternate;
}
.intro-orbit {
  position:absolute;
  border-radius:50%;
  transform-origin:50% 50%;
  opacity:0;
  box-shadow:inset 0 0 18px rgba(37,218,245,.025),0 0 25px rgba(59,87,240,.04);
}
.intro-orbit-one {
  inset:17%;
  border:1px solid rgba(64,225,254,.26);
  border-left-color:transparent;border-bottom-color:rgba(165,69,255,.42);
  animation:introRingIn 1.2s .2s both,introRingSpin 17s 1.4s linear infinite;
}
.intro-orbit-two {
  inset:7%;
  border:1px dashed rgba(124,135,255,.34);
  animation:introRingIn 1.3s .45s both,introRingSpinReverse 27s 1.75s linear infinite;
}
.intro-orbit-three {
  inset:0;
  border:1px solid rgba(32,220,253,.15);
  border-right-color:rgba(137,68,251,.68);border-left-color:transparent;
  animation:introRingIn 1.5s .65s both,introRingSpin 30s 2.15s linear infinite;
}
.intro-orbit-two::before,.intro-orbit-three::after {
  content:"";
  position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;
  background:#5bf1ff;box-shadow:0 0 17px #20e3ff,0 0 39px rgba(50,222,255,.45);
}
.intro-orbit-three::after {background:#9c57ff;box-shadow:0 0 19px #a25fff;top:auto;bottom:-3px;}
.intro-crosshair {position:absolute;opacity:0;animation:introFineprint 1s 1s forwards;}
.intro-crosshair-h {left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(83,228,253,.25) 12%,transparent 23%,transparent 77%,rgba(83,228,253,.25) 88%,transparent);}
.intro-crosshair-v {top:0;bottom:0;left:50%;width:1px;background:linear-gradient(transparent,rgba(83,228,253,.17) 13%,transparent 29%,transparent 71%,rgba(83,228,253,.17) 86%,transparent);}
.intro-symbol {
  position:relative;z-index:3;
  width:clamp(145px,16vw,215px);
  aspect-ratio:468/533;
  display:flex;align-items:center;justify-content:center;
  margin-top:-54px;
  opacity:0;
  filter:blur(16px) brightness(1.8);
  transform:translateY(28px) scale(.66) rotate(-12deg);
  transform-origin:center;
  will-change:transform,opacity,filter;
  animation:introLogoArrive 1.55s .68s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-symbol::before {
  content:"";position:absolute;inset:-18%;z-index:-1;
  background:radial-gradient(ellipse,rgba(20,221,251,.25),rgba(139,70,255,.12) 42%,transparent 70%);
  filter:blur(23px);
  animation:introAura 2.3s 1.4s infinite alternate;
}
.intro-symbol img {
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 15px rgba(41,228,255,.32)) drop-shadow(0 0 29px rgba(157,68,253,.18));
}
.intro-wordmark {
  z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  margin-top:52px;
  opacity:0;
  transform:translateY(28px);
  animation:introWordmarkIn .93s 1.75s cubic-bezier(.16,1,.3,1) forwards;
  text-align:center;
}
.intro-wordmark-main {
  font:800 clamp(31px,5.2vw,73px)/1 Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:-.047em;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(100deg,#c9ebff 1%,#fff 46%,#b0dfff 76%,#a183ef 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 23px rgba(39,218,255,.2));
}
.intro-wordmark-rule {
  width:0;height:1px;
  background:linear-gradient(90deg,transparent,#16eaff 30%,#9c65ff 70%,transparent);
  box-shadow:0 0 18px rgba(21,240,255,.7);
  animation:introRule 1s 2.45s ease-out forwards;
}
.intro-wordmark-sub {
  font:600 clamp(8px,1.05vw,11px)/1.5 Inter,system-ui,sans-serif;
  color:rgba(192,215,234,.72);
  letter-spacing:clamp(.11em,.3vw,.3em);
}
.intro-wordmark-spark {display:inline-block;color:#6ceafa;margin:0 12px;}
.intro-progress-track {
  position:absolute;z-index:12;bottom:0;left:0;right:0;height:2px;background:rgba(44,171,216,.08);
}
.intro-progress-fill {
  display:block;width:0;height:100%;background:linear-gradient(90deg,#20e2ff,#aa5cff);
  box-shadow:0 0 19px rgba(38,233,255,.72);
}
.intro-gate.playing .intro-progress-fill {animation:introProgress var(--intro-length,5.7s) linear both;}
.intro-skip {
  position:absolute;z-index:15;right:clamp(18px,3.5vw,72px);bottom:clamp(56px,6.7vw,94px);
  padding:11px 15px;
  background:rgba(11,21,36,.52);
  border:1px solid rgba(137,193,216,.27);
  border-radius:999px;
  color:rgba(220,241,250,.85);
  cursor:pointer;
  letter-spacing:.08em;
  font:600 11px/1 Inter,system-ui,sans-serif;
  backdrop-filter:blur(10px);
  transition:color .25s, border-color .25s, background .25s;
}
.intro-skip:hover,.intro-skip:focus-visible {color:white;border-color:#46d9f8;background:rgba(7,46,66,.75);outline:none;}
.intro-skip span{font-size:16px;margin-left:9px;vertical-align:-1px;color:#71edff}
/* Logo becomes the logo in the website header, and the scene makes room for the page. */
.intro-gate.handoff .intro-energy,.intro-gate.handoff .intro-wordmark,.intro-gate.handoff .intro-grid,
.intro-gate.handoff .intro-topline,.intro-gate.handoff .intro-bottomline,
.intro-gate.handoff .intro-skip,.intro-gate.handoff .intro-ambient-line {opacity:0!important;transition:opacity .45s ease!important;animation-play-state:paused!important;}
.intro-gate.handoff .intro-symbol{animation:none!important;opacity:1;filter:none;transform:translateY(0) scale(1) rotate(0);}
.intro-gate.handoff .intro-symbol::before {opacity:0;transition:opacity .3s;}
.intro-gate.handoff .intro-particles {opacity:0;transition:opacity .5s;}
.intro-gate.handoff .intro-ambient {opacity:0;transition:opacity .7s;}
@keyframes introAmbient {to {transform:rotate(360deg)}}
@keyframes introGridIn {from{opacity:0}to{opacity:.39}}
@keyframes introGridRun {0%{background-position:0 0,0 0}100%{background-position:0 85px,85px 0}}
@keyframes introLine {0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}
@keyframes introSweep {from{left:-28%;opacity:0}45%{opacity:1}to{left:122%;opacity:0}}
@keyframes introFineprint {to{opacity:1}}
@keyframes introBlink {to{opacity:.35}}
@keyframes introAura {from{opacity:.38;transform:scale(.88)}to{opacity:.95;transform:scale(1.1)}}
@keyframes introRingIn {from{opacity:0;scale:.66;filter:blur(8px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes introRingSpin {from{rotate:0deg}to{rotate:360deg}}
@keyframes introRingSpinReverse {from{rotate:0deg}to{rotate:-360deg}}
@keyframes introLogoArrive {0%{opacity:0;filter:blur(16px) brightness(1.8);transform:translateY(28px) scale(.66) rotate(-12deg)}58%{opacity:1;filter:blur(0) brightness(1.4)}100%{opacity:1;filter:none;transform:translateY(0) scale(1) rotate(0)}}
@keyframes introWordmarkIn {to{opacity:1;transform:translateY(0)}}
@keyframes introRule {to{width:min(340px,63vw)}}
@keyframes introProgress {to{width:100%}}
@media (max-width: 680px) {
  .intro-grid{inset:48% -100% -50%;background-size:56px 56px;}
  .intro-scene{width:100vw;height:69vh;min-height:370px;}
  .intro-energy{top:38%;width:min(83vw,450px);}
  .intro-symbol{width:clamp(155px,34vw,185px);margin-top:-38px;}
  .intro-wordmark{margin-top:45px;gap:12px;}
  .intro-wordmark-main{font-size:clamp(27px,7.2vw,46px);letter-spacing:-.05em;}
  .intro-wordmark-sub{font-size:8px;letter-spacing:.1em;}
  .intro-wordmark-spark{margin:0 4px;}
  .intro-topline,.intro-bottomline{font-size:8px;letter-spacing:.12em;}
  .intro-topline-right,.intro-bottom-right{display:none;}
  .intro-skip{bottom:72px;right:22px;}
}
@media (max-width: 370px){.intro-wordmark-main{font-size:25px;}.intro-wordmark-sub{font-size:7px}.intro-energy{width:95vw}}
@media (prefers-reduced-motion: reduce){
  .intro-gate{display:none!important;}
}