/* First visit only: a two-second lyric video that opens into the homepage. index.html's head
   script adds html.intro-on before the first paint, so the homepage never flashes first. */
.intro { display: none; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 1000; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  /* Failsafe with no script: if intro.js never starts, the curtain gets out of the way. */
  animation: in-bail 0s 3.5s forwards;
}
@keyframes in-bail { to { visibility: hidden; pointer-events: none; } }
/* The headline waits behind the curtain, then lands as it opens. */
html.intro-on .kinetic .kw { animation-play-state: paused; }

.in-half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--in-bg, #0a0a0a); transition: background-color .12s linear; will-change: transform; }
.in-top { top: 0; }
.in-bot { bottom: 0; }
.intro.hit .in-half { transition: none; }

.in-stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

/* The Loudr meter, stretched into a sound wave along the seam. */
.in-wave { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: clamp(4px, .9vw, 10px); transform: translate(-50%, -50%); }
.in-wave i { display: block; width: clamp(4px, .7vw, 8px); height: clamp(18px, 4vh, 40px); border-radius: 99px; background: #cafc01; transform: scaleY(0); transform-origin: center; }

.in-word {
  position: relative; margin: 0; color: #fdfdff; text-transform: uppercase; white-space: nowrap;
  font: 400 clamp(72px, 19vw, 260px)/.86 "Archivo Black", "Archivo", system-ui, sans-serif; letter-spacing: -.045em;
  opacity: 0;
}
.in-word.lime { color: #cafc01; }

.in-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  color: #fdfdff; font: 600 13px/1 "Archivo", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 14px; border: 1px solid rgba(253, 253, 255, .55); border-radius: 99px; background: rgba(10, 10, 10, .35);
  opacity: 0; animation: in-skip .3s .5s ease-out forwards;
}
@keyframes in-skip { to { opacity: .9; } }
.in-skip-desk { display: none; }
@media (hover: hover) and (pointer: fine) { .in-skip-touch { display: none; } .in-skip-desk { display: inline; } }

@media (prefers-reduced-motion: reduce) { html.intro-on .intro { display: none; } }