/* ==========================================================================
   THE FIRST DARSHAN — Dhoop: the door revealed through sacred smoke
   (first-darshan-intro.js). Nothing here is part of the seven-door journey,
   and all of it is removed from the page once the opening ends.
   ========================================================================== */

/* The page head decides whether the opening plays, before the HUD is first drawn,
   so the HUD never shows and then hides. If the intro script never arrives, the
   HUD comes back on its own. */
.tb-intro-pending .tirupati-hud {
  opacity: 0;
  animation: tb-intro-failsafe 0.6s ease 6s forwards;
}

@keyframes tb-intro-failsafe { to { opacity: 1; } }

/* Above the stage's vignette and diya particles, below the fixed HUD */
.tb-intro {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* The smoke is drawn at reduced resolution and scaled up: it is soft anyway */
.tb-intro__smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The names condense in the middle of the smoke */
.tb-intro__words {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: clamp(-90px, -9vh, -40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 16px);
  padding: 0 16px;
  text-align: center;
}

/* A little shadow behind the words, for when the door is revealed behind them */
.tb-intro__scrim {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(118vw, 1100px);
  height: 260%;
  margin: 0 0 0 max(-59vw, -550px);
  transform: translateY(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6, 4, 3, 0.62) 0%, rgba(6, 4, 3, 0.28) 48%, transparent 72%);
  opacity: 0;
}

.tb-intro__names,
.tb-intro__rule,
.tb-intro__line { position: relative; }

/* The couple's names, in the script and gold of the Door 1 darshan names */
.tb-intro__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.32em;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-sacrifice);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--text-gold-bright);
  text-shadow: 0 0 30px rgba(255, 190, 90, 0.55), 0 0 2px rgba(255, 230, 170, 0.6), 0 3px 16px rgba(0, 0, 0, 0.9);
  overflow-wrap: anywhere;
}

.tb-intro__name,
.tb-intro__amp {
  display: inline-block;
  opacity: 0;
}

.tb-intro__amp {
  font-family: var(--font-balivia);
  font-size: 0.5em;
  color: var(--text-white-soft);
}

.tb-intro__rule {
  width: clamp(56px, 8vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sacred-gold), transparent);
  transform: scaleX(0);
}

.tb-intro__line {
  margin: 0;
  font-family: var(--font-balivia);
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.12em;
  color: var(--text-white-soft);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  opacity: 0;
}

/* Skip: quiet, always there, where the HUD has nothing */
.tb-intro__skip {
  position: absolute;
  right: max(2rem, env(safe-area-inset-right));
  bottom: max(2rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: var(--font-balivia);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-white-muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.25s ease;
}

.tb-intro__skip::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.tb-intro__skip:hover,
.tb-intro__skip:focus-visible { color: var(--text-gold); }
.tb-intro__skip:focus-visible { outline: 1px solid rgba(239, 191, 4, 0.6); outline-offset: 4px; }

@media (max-width: 768px) {
  .tb-intro__skip {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* Guests who asked for less motion never get the opening (the page head does not
   start it); this only makes sure of it */
@media (prefers-reduced-motion: reduce) {
  .tb-intro { display: none; }
}