/* intro.css — cinematic splash + glitch wordmark + animated hero canvas. */

/* ── Animated hero canvas (always-on waveform behind the wordmark) ───────── */
.hero-live { min-height: 360px; }
#nw-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  opacity: .55; pointer-events: none;
}

/* ── Glitch wordmark ─────────────────────────────────────────────────────── */
.glitch { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
    background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
    clip-path: inset(0 0 0 0);
  }
  .glitch::before { transform: translate(-2px, 0); text-shadow: 2px 0 #00ccff; animation: gl-a 2.6s infinite steps(2); mix-blend-mode: screen; }
  .glitch::after  { transform: translate(2px, 0);  text-shadow: -2px 0 #ff0066; animation: gl-b 3.1s infinite steps(2); mix-blend-mode: screen; }
  @keyframes gl-a { 0%,92%,100% { clip-path: inset(0 0 100% 0); } 93% { clip-path: inset(10% 0 60% 0); } 96% { clip-path: inset(40% 0 30% 0); } }
  @keyframes gl-b { 0%,90%,100% { clip-path: inset(100% 0 0 0); } 91% { clip-path: inset(55% 0 20% 0); } 95% { clip-path: inset(20% 0 55% 0); } }
}

/* ── Splash overlay ──────────────────────────────────────────────────────── */
#nw-intro {
  position: fixed; inset: 0; z-index: 10001; background: #05040a;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#nw-intro.done { opacity: 0; pointer-events: none; transition: opacity .8s ease; }
#nw-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
#nw-intro .vig { position: absolute; inset: 0; box-shadow: inset 0 0 240px 60px #000; pointer-events: none; }
#nw-intro .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); pointer-events: none; opacity: .5; }
.nwi-center { position: relative; z-index: 3; text-align: center; padding: 0 20px; }

.nwi-studio {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .42em;
  font-size: clamp(1.3rem, 5vw, 2.8rem); color: #dff; opacity: 0;
  text-shadow: 0 0 30px rgba(0,204,255,.5);
}
.nwi-studio small { display:block; letter-spacing:.5em; font-size:.32em; color: var(--text-mute); margin-top:14px; }
.nwi-studio.show { animation: nwi-fade 1.4s ease forwards; }
@keyframes nwi-fade { 0% { opacity:0; filter: blur(8px); } 30%,75% { opacity:1; filter:none; } 100% { opacity:.0; filter: blur(4px);} }

.nwi-mark {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 11vw, 8rem); letter-spacing: .02em; opacity: 0;
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 50%, var(--accent-3) 62%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px var(--accent-glow));
}
.nwi-mark.slam { animation: nwi-slam .5s cubic-bezier(.2,1.4,.3,1) forwards; }
@keyframes nwi-slam { 0% { opacity:0; transform: scale(1.5); filter: blur(14px) brightness(3); } 60% { opacity:1; } 100% { opacity:1; transform: scale(1); filter: drop-shadow(0 0 40px var(--accent-glow)); } }
.nwi-tag { margin-top: 18px; font-family: var(--font-mono); letter-spacing:.18em; color: var(--accent-2); text-transform: uppercase; font-size: clamp(.7rem,2.2vw,1rem); opacity:0; }
.nwi-tag.show { animation: nwi-in .6s ease .15s forwards; }
.nwi-enter { margin-top: 30px; font-family: var(--font-mono); letter-spacing:.24em; color: var(--text-dim); font-size:.82rem; opacity:0; cursor:pointer; }
.nwi-enter.show { animation: nwi-blink 1.4s ease .2s infinite; }
@keyframes nwi-in { to { opacity:1; } }
@keyframes nwi-blink { 0%,100% { opacity:.35 } 50% { opacity:1 } }

.nwi-skip { position: absolute; bottom: 24px; right: 28px; z-index: 4; color: var(--text-mute);
  font-family: var(--font-mono); font-size:.74rem; letter-spacing:.18em; cursor:pointer; border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.nwi-skip:hover { color: var(--text); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { #nw-intro { display:none; } }