/* Settle the figure just above the arch crown's center for optical balance. */
#gate {
  --intro-cream: #fff9eb; --intro-paper: #f8edda; --intro-edge: #e9d3ae;
  --intro-gold: #ad8035; --intro-ink: #781839; --intro-line: #ba965b66;
  --intro-gold-opacity: .63; --intro-ease: cubic-bezier(.22,.65,.25,1);
  --intro-initial-lift: 10px; --intro-initial-scale: .97;
  --intro-crown-center: calc(13svh + 39vw - clamp(8px, 1.4svh, 12px));
}
#gate[data-intro-style="pearl"] {
  --intro-cream: #fffdf6; --intro-paper: #faf3e7; --intro-edge: #ecdfc9;
  --intro-gold: #ae8a4d; --intro-line: #bea16c70; --intro-gold-opacity: .66;
  --intro-initial-lift: 0px; --intro-initial-scale: .94;
}
#gate[data-intro-style="rose"] {
  --intro-cream: #fff9f1; --intro-paper: #f8e9df; --intro-edge: #e9cfc0;
  --intro-gold: #aa7b43; --intro-line: #b78a6666; --intro-gold-opacity: .63;
  --intro-initial-lift: 7px; --intro-initial-scale: 1;
}
#gate[data-intro-style="champagne"] {
  --intro-cream: #fff8e8; --intro-paper: #f3e5ce; --intro-edge: #e3c99f;
  --intro-gold: #956c2c; --intro-line: #ad844966; --intro-gold-opacity: .64;
  --intro-initial-lift: 8px; --intro-initial-scale: .98;
}
#gate .intro-paper { background: radial-gradient(ellipse at 50% 42%, var(--intro-cream) 0%, var(--intro-paper) 58%, var(--intro-edge) 100%); }
#gate .intro-arch { width: 78vw; top: 13svh; border-radius: 39vw 39vw 0 0; border-color: var(--intro-line); box-shadow: 0 0 0 9px var(--intro-paper), 0 0 0 10px var(--intro-line); }

/* Leave room for the outer rose, including the full sway at both extremes. */
#gate .intro-garlands img { width: 40vw; top: -36px; }
#gate .intro-garlands img:first-child { left: 10px; }
#gate .intro-garlands img:last-child { right: 10px; }

#gate .intro-emblem { width: 65vw; top: 50%; animation: none; z-index: 4; }
#gate .intro-emblem > img { animation: none; }
#gate .intro-halo { display: none; }
#gate .intro-mantra { top: calc(var(--intro-crown-center) + 16.25vw + 1px); width: 43vw; margin: 0; opacity: 0; animation: none; z-index: 4; line-height: 0; }
#gate .intro-mantra img { display: block; width: 100%; height: auto; }
#gate .intro-initials { position: absolute; top: 55.5%; left: 50%; width: 84vw; aspect-ratio: 1; transform: translate(-50%,-50%); opacity: 0; z-index: 2; }
#gate .intro-watermark { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; opacity: .2; background: var(--intro-gold); mask: url('assets/intro-monogram-watermark.webp') center/contain no-repeat; -webkit-mask: url('assets/intro-monogram-watermark.webp') center/contain no-repeat; }
#gate .lotus-touch { top: 79%; width: clamp(85px, 24vw, 110px); transform: translate(-50%,-50%); opacity: 0; filter: drop-shadow(0 2px 7px #bf916e33); }
#gate .lotus-touch:disabled { cursor: default; pointer-events: none; }
#gate .lotus-touch img { animation: none; }
#gate .lotus-note { white-space: nowrap; top: calc(100% + 8px); font-size: 11px; letter-spacing: .11em; opacity: 0; }

/* Six seconds: 0–2 move, 2–3 blessing, 3–4 reveal, 4–5 ink, 5–6 lotus. */
#gate.intro-sequencing .intro-emblem { animation: intro-ganesha-rise 2s var(--intro-ease) both; }
#gate.intro-sequencing .intro-emblem > img { animation: ganpati-float 7s 2s ease-in-out infinite; }
#gate.intro-sequencing .intro-mantra { animation: intro-blessing-reveal 1s 2s var(--intro-ease) both; }
#gate.intro-sequencing .intro-mantra img { animation: ganpati-float 7s 2s ease-in-out infinite; }
#gate.intro-sequencing .intro-initials { animation: intro-initials-reveal 1s 3s var(--intro-ease) both; }
#gate.intro-sequencing .intro-watermark { animation: intro-initials-ink 1s 4s ease-in-out both; }
#gate.intro-sequencing .lotus-touch { animation: intro-lotus-reveal 1s 5s var(--intro-ease) both; }
#gate.intro-sequencing .lotus-touch img { animation: ganpati-float 7s 6s ease-in-out infinite; }
#gate.intro-sequencing .lotus-note { animation: intro-note-reveal 1s 5s ease-out both; }
@keyframes intro-ganesha-rise {
  0%, 15% { top: 50%; width: 65vw; }
  100% { top: var(--intro-crown-center); width: 32.5vw; }
}
@keyframes intro-blessing-reveal { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes intro-initials-reveal { from { opacity: 0; translate: 0 var(--intro-initial-lift); scale: var(--intro-initial-scale); filter: blur(3px); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } }
@keyframes intro-initials-ink { from { opacity: .2; } to { opacity: var(--intro-gold-opacity); } }
@keyframes intro-lotus-reveal { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes intro-note-reveal { from { opacity: 0; } to { opacity: 1; } }

/* Short portrait screens need a smaller monogram to preserve the same gaps. */
@media (min-aspect-ratio: 12/25) {
  #gate .intro-mantra { width: 39vw; }
  #gate .intro-initials { top: 58%; width: 72vw; }
  #gate .lotus-touch { top: 81%; }
  #gate .intro-mandala-bottom { translate: -50% 79%; opacity: .55; }
}
@media (min-aspect-ratio: 11/20) {
  #gate .intro-initials { top: 60%; width: 60vw; }
  #gate .lotus-touch { top: 83%; }
}

.intro-style-trigger { position: absolute; z-index: 12; right: 18px; bottom: max(18px,env(safe-area-inset-bottom)); border: 1px solid #b6977066; border-radius: 20px; padding: 8px 12px; background: #fffaf0c9; color: #805d36; font: 400 11px/1.4 Jost,sans-serif; letter-spacing: .04em; cursor: pointer; }
.intro-style-trigger span { padding-left: 5px; color: #ad8035; }
.intro-style-picker { width: min(348px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 22px; border: 1px solid #c6a77a; border-radius: 18px; color: #785539; background: #fff9ef; box-shadow: 0 16px 60px #69461d33; }
.intro-style-picker::backdrop { background: #4d351b38; backdrop-filter: blur(3px); }
.intro-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.intro-picker-heading h2 { font: 500 27px/1.2 'Cormorant Garamond',Georgia,serif; margin: 0; color: #781839; }
.intro-picker-heading button { border: 0; background: none; padding: 0 4px; min-height: 36px; font: 400 28px/1 Georgia,serif; color: #886d4c; cursor: pointer; }
.intro-style-picker > p { font: 400 11px/1.6 Jost,sans-serif; margin: 7px 0 18px; }
.intro-style-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.intro-style-options button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 1px solid #c7b59a80; border-radius: 10px; padding: 12px 10px; background: #fffdf7; color: #785539; cursor: pointer; }
.intro-style-options button[aria-pressed="true"] { border-color: #9d7237; box-shadow: 0 0 0 1px #9d7237; background: #f7eddd; }
.intro-style-options strong { font: 500 13px/1.4 'Cormorant Garamond',Georgia,serif; }
.intro-style-options small { font: 400 9px/1.4 Jost,sans-serif; }
.intro-swatch { display: block; width: 100%; height: 28px; margin-bottom: 4px; border-radius: 5px; border: 1px solid #b6977040; }
.swatch-ivory { background: linear-gradient(110deg,#fff9eb 60%,#ad8035 61%,#d9bb81 80%,#781839 81%); }
.swatch-pearl { background: linear-gradient(110deg,#fffdf6 60%,#ae8a4d 61%,#e1cda8 80%,#781839 81%); }
.swatch-rose { background: linear-gradient(110deg,#f8e9df 60%,#aa7b43 61%,#e9cfc0 80%,#781839 81%); }
.swatch-champagne { background: linear-gradient(110deg,#f3e5ce 60%,#956c2c 61%,#d5b378 80%,#781839 81%); }
.intro-style-replay { width: 100%; margin-top: 18px; padding: 12px 15px; border: 0; border-radius: 8px; background: #781839; color: #fff8ea; font: 400 12px/1.5 Jost,sans-serif; cursor: pointer; }
.intro-style-picker button:focus-visible, .intro-style-trigger:focus-visible { outline: 2px solid #781839; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #gate.intro-sequencing .intro-emblem { animation: none; top: var(--intro-crown-center); width: 32.5vw; }
  #gate.intro-sequencing .intro-mantra, #gate.intro-sequencing .intro-initials, #gate.intro-sequencing .lotus-touch, #gate.intro-sequencing .lotus-note { animation: none; opacity: 1; }
  #gate.intro-sequencing .intro-watermark { animation: none; opacity: var(--intro-gold-opacity); }
  #gate.intro-sequencing .intro-emblem > img, #gate.intro-sequencing .intro-mantra img, #gate.intro-sequencing .lotus-touch img { animation: none; }
}