/* Intro — Figma INTRO (25:65) → INTRO 2 (25:113) */
@import url('fonts.css');

body.intro-body,
html.intro-body,
html.intro-body body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--vcr-menu-bg, #062bc4);
  font-family: var(--font-mono);
}

.intro-body::after {
  display: none;
}

.intro {
  position: fixed;
  inset: 0;
  background: var(--vcr-menu-bg, #062bc4);
  color: var(--vcr-fg, #fff);
  z-index: 1;
}

.intro.off {
  opacity: 0;
  transition: opacity 0.45s ease-in;
  pointer-events: none;
}

.intro__grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: soft-light;
  animation: intro-grain 0.1s steps(4) infinite;
}

@keyframes intro-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.intro__vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: var(--vcr-vignette, inset 88px 0 250px 11px rgba(255, 220, 67, 0.25));
}

.intro__phase {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: var(--vcr-pad, clamp(16px, 2.78vw, 40px));
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.55s ease;
}

.intro__phase.is-out {
  opacity: 0;
  pointer-events: none;
}

.intro__phase--title {
  opacity: 0;
  padding: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.intro__phase--title.is-active {
  opacity: 1;
}

.intro__phase--osd {
  justify-content: flex-start;
}

.intro__brand-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.intro__brand {
  margin: 0;
  text-align: center;
  font-size: var(--vcr-size-xl, clamp(28px, 4.44vw, 64px));
  letter-spacing: var(--vcr-tracking-xl, -0.04em);
  line-height: normal;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12vh) scaleY(1.1) scaleX(1.04);
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.intro__tracking-bar {
  position: fixed;
  left: -2%;
  right: -2%;
  height: clamp(28px, 7vh, 72px);
  top: 38%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.42) 35%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.35) 65%,
    transparent
  );
  mix-blend-mode: screen;
  animation: intro-tracking-tear 0.42s steps(5) forwards;
}

@keyframes intro-tracking-tear {
  0% { transform: translateY(-120%) skewX(-2deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(140vh) skewX(1deg); opacity: 0; }
}

.intro__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--vcr-pad-inner, clamp(12px, 1.67vw, 24px));
  box-sizing: border-box;
  font-size: var(--vcr-size-xl, clamp(28px, 4.44vw, 64px));
  letter-spacing: var(--vcr-tracking-xl, -0.04em);
  line-height: normal;
  text-transform: uppercase;
}

.intro__play {
  flex: 1 1 0;
  min-width: 0;
}

.intro__play.blink {
  animation: intro-play-blink 1s step-end infinite;
}

@keyframes intro-play-blink {
  50% { opacity: 0.2; }
}

.intro__clock {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.intro__brand.is-rising {
  animation:
    intro-brand-rise 1.5s steps(10, end) forwards,
    intro-brand-ghost 1.5s steps(10, end) forwards,
    intro-brand-flicker 0.12s steps(2) 1.05s 6;
}

@keyframes intro-brand-rise {
  0% {
    opacity: 0;
    transform: translateY(12vh) scaleY(1.1) scaleX(1.04);
    filter: blur(6px);
  }
  12% {
    opacity: 0.25;
    transform: translateY(8vh) scaleY(1.08) scaleX(1.03);
    filter: blur(4px);
  }
  28% {
    opacity: 0.55;
    transform: translateY(4vh) scaleY(1.05);
    filter: blur(2.5px);
  }
  44% {
    opacity: 0.72;
    transform: translateY(1.5vh) scaleY(1.02) translateX(-4px);
    filter: blur(1.5px);
  }
  58% {
    opacity: 0.88;
    transform: translateY(0.4vh) translateX(5px);
    filter: blur(0.8px);
  }
  72% {
    opacity: 0.95;
    transform: translateY(0.1vh) translateX(-3px);
    filter: blur(0.3px);
  }
  86% {
    opacity: 1;
    transform: translateY(0) translateX(2px);
    filter: none;
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
    filter: none;
  }
}

@keyframes intro-brand-ghost {
  0%, 100% {
    text-shadow:
      0 0 0 transparent,
      0 0 0 transparent;
  }
  20%, 50% {
    text-shadow:
      3px 0 0 rgba(255, 80, 80, 0.45),
      -3px 0 0 rgba(80, 180, 255, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  70% {
    text-shadow:
      1px 0 0 rgba(255, 100, 100, 0.25),
      -1px 0 0 rgba(100, 200, 255, 0.2);
  }
}

@keyframes intro-brand-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

.intro-body .nt-vhs-noise {
  mix-blend-mode: screen;
}

.intro-body::after {
  display: block;
  opacity: 0.55;
  z-index: 502;
}

.intro-body.is-exiting .nt-vhs-patina,
.intro-body.is-exiting .nt-vhs-noise {
  opacity: 0 !important;
  transition: opacity 0.45s ease-in;
}