/* --------------------------------------------------------------------------
 * Mahajapa intro gate — animated mantra reveal.
 *
 * Phases driven by classes on .mp-intro:
 *   (none)         — idle state, prompt visible, awaiting tap
 *   .is-writing    — mantra revealing left-to-right (~4.5s), prompt hidden
 *   .is-done       — fade-out (~0.8s) then JS removes from DOM
 *   .is-skipped    — already seen this session, render but never paint
 * ------------------------------------------------------------------------ */

.mp-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: radial-gradient(ellipse at center, #2b1509 0%, #140a05 55%, #060301 100%);
  color: #FAF4EC;
  opacity: 1;
  transition: opacity .8s ease-in-out;
  overflow: hidden;
  /* Use the Devanagari Google Font when loaded; gracefully fall back. */
  font-family: var(--mp-font-devanagari, "Noto Sans Devanagari", "Mukta", "Hind", system-ui, serif);
}

.mp-intro.is-skipped,
.mp-intro.is-hidden {
  display: none;
}

.mp-intro.is-done {
  opacity: 0;
  pointer-events: none;
}

/* Lock body scroll while the intro is up. */
body.mp-intro-open {
  overflow: hidden;
}

/* Ambient base glow that pulses gently in the idle state, brightens during writing. */
.mp-intro__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(233,154,56,0.18) 0%, transparent 55%);
  opacity: 0.35;
  transition: opacity 2s ease-in-out;
}

.mp-intro.is-writing .mp-intro__glow {
  opacity: 1;
}

/* The dark vignette behind the glow. We keep it as its own layer so the
 * background gradient isn't reflowed when phases change. */
.mp-intro__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

/* -------------------------------- Idle prompt --------------------------- */
.mp-intro__idle {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: mp-intro-prompt-in 0.9s ease-out 0.3s forwards;
  font-family: var(--mp-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}

.mp-intro.is-writing .mp-intro__idle,
.mp-intro.is-done .mp-intro__idle {
  animation: mp-intro-prompt-out 0.6s ease-in forwards;
}

.mp-intro__brand {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(233, 154, 56, 0.85);
}

.mp-intro__prompt {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(246, 238, 228, 0.8);
  animation: mp-intro-pulse 2.4s ease-in-out infinite;
}

@media (min-width: 768px) {
  .mp-intro__prompt { font-size: 16px; }
}

@keyframes mp-intro-prompt-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mp-intro-prompt-out {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes mp-intro-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* -------------------------------- Mantra reveal ------------------------- */
.mp-intro__mantra {
  position: relative;
  z-index: 2;
  display: inline-block;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  margin: 0 24px;
  /* Lock dimensions to whichever phrase is widest at clamp max — prevents
   * layout jitter when the reveal layer crosses element boundaries. */
}

.mp-intro.is-writing .mp-intro__mantra,
.mp-intro.is-done .mp-intro__mantra {
  animation: mp-intro-mantra-in 0.6s ease-out forwards;
}

.mp-intro__mantra-shadow,
.mp-intro__mantra-text {
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 1.1;
  font-weight: 400;
  white-space: nowrap;
}

/* Bottom layer — faint version of the text always visible during writing. */
.mp-intro__mantra-shadow {
  color: rgba(250, 244, 236, 0.15);
}

/* Top layer — clipped from left-to-right via clip-path. */
.mp-intro__mantra-reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
}

.mp-intro.is-writing .mp-intro__mantra-reveal {
  animation: mp-intro-write 4.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards;
}

.mp-intro__mantra-text {
  color: #FAF4EC;
  text-shadow:
    0 0 30px rgba(233, 154, 56, 0.45),
    0 0 60px rgba(233, 154, 56, 0.25);
}

/* The traveling "ink tip" — a thin glowing vertical bar that follows the reveal edge. */
.mp-intro__ink {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, #E99A38 40%, #E99A38 60%, transparent);
  box-shadow:
    0 0 12px rgba(233, 154, 56, 0.9),
    0 0 24px rgba(233, 154, 56, 0.5);
  opacity: 0;
}

.mp-intro.is-writing .mp-intro__ink {
  animation: mp-intro-ink 4.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards;
}

@keyframes mp-intro-mantra-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mp-intro-write {
  to {
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes mp-intro-ink {
  0%   { left: 0%;   opacity: 0; }
  10%  {              opacity: 1; }
  90%  {              opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* -------------------------------- Caption ------------------------------- */
.mp-intro__caption {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(233, 154, 56, 0.75);
  opacity: 0;
  font-family: var(--mp-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}

.mp-intro.is-writing .mp-intro__caption {
  animation: mp-intro-caption-in 1.5s ease-out 3.2s forwards;
}

@keyframes mp-intro-caption-in {
  to { opacity: 1; }
}

/* Reduced-motion: render the mantra static, fade the gate after a beat. */
@media (prefers-reduced-motion: reduce) {
  .mp-intro__idle,
  .mp-intro__mantra,
  .mp-intro__caption {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mp-intro__mantra-reveal {
    clip-path: inset(0 0% 0 0) !important;
  }
  .mp-intro__ink {
    display: none;
  }
}