/* =====================================================
   INTRO SCREEN
===================================================== */

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-navy-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: introCurtainOut 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards 3.0s;
}

@keyframes introCurtainOut {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Subtle vignette edges */
.intro-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(10,12,20,0.5) 100%);
  pointer-events: none;
}

/* ---- Name ---- */
.intro-names {
  font-family: var(--font-script);
  font-size: clamp(56px, 14vw, 110px);
  color: var(--color-cream);
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(18px);
  animation: introFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.15s;
  position: relative;
  z-index: 1;
}

/* ---- Divider line ---- */
.intro-divider {
  height: 1px;
  background: rgba(239,232,214,0.35);
  width: 0;
  margin: 20px 0 18px;
  animation: introDivider 0.6s ease forwards 1.0s;
  position: relative;
  z-index: 1;
}

@keyframes introDivider {
  to { width: 60px; }
}

/* ---- Date ---- */
.intro-date {
  font-size: 10px;
  color: var(--color-cream);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0;
  transform: translateY(8px);
  animation: introFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.3s;
  position: relative;
  z-index: 1;
}

@keyframes introFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Hero entrance (after curtain lifts) ---- */
.hero-content {
  opacity: 0;
  animation: heroIn 0.9s ease forwards 3.6s;
}

@keyframes heroIn {
  to { opacity: 1; }
}