.intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  transition: opacity 0.85s cubic-bezier(0.6, 0, 0.4, 1), transform 0.9s cubic-bezier(0.6, 0, 0.4, 1),
    filter 0.85s ease;
}

.intro.is-exiting {
  opacity: 0;
  transform: scale(1.14);
  filter: blur(26px);
}

body.intro-active {
  overflow: hidden;
}

/* Grain — kept just above the threshold of conscious perception. */
.intro__grain {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  transition: opacity 1.1s ease-out;
  animation: intro-grain-shift 1.1s steps(6) infinite;
}

.intro.is-active .intro__grain {
  opacity: 0.03;
}

@keyframes intro-grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2%, -1%); }
  40% { transform: translate(-1%, 2%); }
  60% { transform: translate(2%, 1%); }
  80% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Bloom — a slow, low breath of light behind the mark. */
.intro__bloom {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 46rem;
  height: 46rem;
  margin: -23rem 0 0 -23rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-gold) 22%, transparent), transparent 68%);
  filter: blur(70px);
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.2s ease-out;
  pointer-events: none;
}

.intro.is-active .intro__bloom {
  opacity: 0.85;
  animation: intro-bloom-breathe 2.6s ease-in-out 0.9s infinite;
}

@keyframes intro-bloom-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* Anamorphic sweep — one slow horizontal pass of stray light. */
.intro__sweep {
  position: absolute;
  inset-inline-start: -35%;
  inset-block-start: 41%;
  width: 55%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-gold) 60%, transparent) 45%,
    color-mix(in srgb, var(--color-glow-violet) 55%, transparent) 62%,
    transparent
  );
  filter: blur(20px);
  opacity: 0;
  transform: translateX(0) rotate(-3deg);
  pointer-events: none;
}

.intro.is-active .intro__sweep {
  animation: intro-sweep 2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}

@keyframes intro-sweep {
  0% { opacity: 0; transform: translateX(0) rotate(-3deg); }
  18% { opacity: 0.5; }
  55% { opacity: 0.26; }
  100% { opacity: 0; transform: translateX(180%) rotate(-3deg); }
}

.intro__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Focus marks — the viewfinder locking on, borrowed from the Hero's own
   frame language so the intro and the site share one visual grammar. */
.intro__focus-marks {
  position: absolute;
  inset: -1.75rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.25);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro__focus-marks.is-visible {
  opacity: 0.55;
  transform: scale(1);
}

.intro__focus-marks .corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-gold);
}

.intro__focus-marks .corner--tl {
  inset-inline-start: 0;
  inset-block-start: 0;
  border-inline-end: 0;
  border-block-end: 0;
}

.intro__focus-marks .corner--tr {
  inset-inline-end: 0;
  inset-block-start: 0;
  border-inline-start: 0;
  border-block-end: 0;
}

.intro__focus-marks .corner--bl {
  inset-inline-start: 0;
  inset-block-end: 0;
  border-inline-end: 0;
  border-block-start: 0;
}

.intro__focus-marks .corner--br {
  inset-inline-end: 0;
  inset-block-end: 0;
  border-inline-start: 0;
  border-block-start: 0;
}

/* Logo — resolves from an unfocused ember, then breathes, quietly, alive. */
.intro__logo {
  position: relative;
  width: 6.5rem;
  height: auto;
  opacity: 0;
  transform: scale(1.1);
  filter: blur(16px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro.is-active .intro__logo {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

.intro__logo.is-breathing {
  animation: intro-logo-breathe 2.4s ease-in-out infinite;
}

@keyframes intro-logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.014); }
}

.intro__timecode {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--container-pad);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.intro__timecode.is-visible {
  opacity: 1;
}

.intro__skip {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--container-pad);
  font-family: var(--font-body);
  font-size: var(--type-small);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: transparent;
  opacity: 0;
  transition: opacity 0.5s ease 0.35s, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.intro.is-active .intro__skip {
  opacity: 1;
}

.intro__skip:hover,
.intro__skip:focus-visible {
  color: var(--color-text);
  border-color: var(--color-gold-dim);
}

@media (max-width: 640px) {
  .intro__timecode {
    display: none;
  }

  .intro__logo {
    width: 5rem;
  }

  .intro__bloom {
    width: 32rem;
    height: 32rem;
    margin: -16rem 0 0 -16rem;
  }
}

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