#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0d0605;
  overflow: hidden;
  transition: opacity 1s ease;
}
#intro-overlay.intro-hidden {
  opacity: 0;
  pointer-events: none;
}
#intro-overlay.intro-gone {
  display: none;
}

#intro-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.04);
  transition: transform 6.5s cubic-bezier(0.2, 0, 0.2, 1);
}
#intro-overlay.intro-play #intro-image {
  transform: scale(1.18);
}

/* Portrait vs landscape is decided in JS (intro.js) via actual window.innerWidth/innerHeight,
   not a CSS aspect-ratio media query — those proved unreliable across real mobile browsers
   (confirmed cropped on 3 different phone browsers + incognito despite testing fine in this
   session's own headless-Chrome checks), so don't reintroduce a media-query-based approach here. */
#intro-overlay.intro-landscape #intro-image {
  background-size: cover;
  background-position: 62% 42%;
}
#intro-overlay.intro-landscape.intro-play #intro-image {
  transform: scale(1.35);
}

#intro-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(13,6,5,0.75) 100%),
    linear-gradient(180deg, rgba(13,6,5,0.55) 0%, transparent 30%, transparent 65%, rgba(13,6,5,0.75) 100%);
}

#intro-caption {
  position: absolute;
  left: 0; right: 0;
  top: 8%;
  text-align: center;
  z-index: 2;
  font-family: 'EB Garamond', serif;
  color: #fdeec2;
  padding: 0 1rem;
}
.intro-line {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
  margin: 0.3rem 0;
}
#intro-line-1 { font-style: italic; font-size: 1.3rem; letter-spacing: 0.04em; }
#intro-line-2 { font-family: 'Tangerine', cursive; font-size: 3.6rem; }
#intro-overlay.intro-play .intro-line { opacity: 1; transform: translateY(0); }
#intro-overlay.intro-play #intro-line-1 { transition-delay: 0.6s; }
#intro-overlay.intro-play #intro-line-2 { transition-delay: 1.1s; }

.intro-credit {
  position: absolute;
  bottom: 0.6rem;
  right: 0.8rem;
  z-index: 2;
  font-family: 'Mukta', sans-serif;
  font-size: 0.65rem;
  color: rgba(253,238,194,0.55);
  margin: 0;
}

#intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 62% 42%, #fff8e6 0%, #ffd977 35%, transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
#intro-overlay.intro-flash-on #intro-flash { opacity: 0.85; }

#intro-skip {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 3;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,222,150,0.4);
  color: #fdeec2;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}
#intro-skip:hover { background: rgba(255,255,255,0.18); }

@media (max-width: 640px) {
  #intro-line-2 { font-size: 2.6rem; }
  #intro-image { background-position: 68% 40%; }
}