/* Small speech bubbles stay tied to the head, not a fixed page-wide bar. */
.illustrated-scene .dialogue-beat {
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 13px;
  min-height: 0;
  border-radius: 14px;
  box-shadow: 0 5px 18px #17201730;
}
.illustrated-scene .dialogue-beat q[lang="gu"] { font-size: 1em; }
.dialogue-beat .speaker {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.cinematic section.scene.illustrated-scene .dialogue-track {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  transform: none;
  pointer-events: none;
}
.cinematic .illustrated-scene .dialogue-beat {
  position: absolute;
  left: var(--bubble-x, 50%);
  top: var(--bubble-y, 50%);
  width: min(240px, calc(100vw - 28px));
  min-height: 0;
  margin: 0;
  transform: translate(-50%, -100%);
  opacity: var(--speaker-visible, 1);
  border-radius: 14px;
}
.illustrated-scene .dialogue-beat:after {
  left: var(--bubble-tip, 50%);
  right: auto;
  bottom: -11px;
  width: 13px;
  height: 12px;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
html:not(.cinematic) .illustrated-scene .dialogue-track {
  width: min(380px, 84%);
  max-width: 380px;
}
html:not(.cinematic) .illustrated-scene .dialogue-beat {
  font-size: 16px;
  padding: 10px 13px;
}

/* The Mercedes overlay keeps its full steering wheel visible at each ratio. */
.story-drive .drive-cockpit { transform: none; }
.story-drive .drive-cockpit img { object-fit: fill; }

/* Both friends now offer the thali towards the centre shrine. */
#devotion .aarti-art {
  left: 50%;
  bottom: 17%;
  height: min(36svh, 340px);
}

/* One overhead courtyard: the small shrine stays still as the friends circle. */
#celebration { background: #172e25; }
#celebration:before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -2;
  background: url(assets/story/event-decor/garba-floor.webp) center / cover;
  filter: blur(22px) brightness(.35);
}
.garba-world {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(88svh, 96vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  isolation: isolate;
}
.garba-courtyard { display: block; width: 100%; height: 100%; }
.garba-ring {
  position: absolute;
  inset: 0;
  transform-origin: 50% 48%;
  pointer-events: none;
}
.garba-dancer {
  position: absolute;
  width: 7%;
  left: var(--dancer-x);
  top: var(--dancer-y);
  transform: translate(-50%, -50%) rotate(var(--dancer-angle));
  filter: drop-shadow(0 2px 2px #25120855);
}
.garba-dancer.dancer-woman { width: 8%; }
.garba-dancer.garba-man { width: 8%; }
.garba-dancer.garba-woman { width: 9%; }
.garba-dancer img { display: block; width: 100%; height: auto; }
.cinematic .garba-dancer img {
  animation: garba-step 1.1s ease-in-out infinite;
  animation-delay: var(--step-delay, 0s);
  animation-play-state: paused;
}
.cinematic #celebration[data-dancing="true"] .garba-dancer img { animation-play-state: running; }
.cinematic #celebration[data-dancing="true"] .garba-ring { will-change: transform; }
@keyframes garba-step {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic .garba-dancer img { animation: none; }
}
#celebration .story-shade { z-index: 1; }
#celebration .dialogue-track { z-index: 7; }
#celebration .story-title, #celebration .scene-actions { z-index: 5; }
html:not(.cinematic) #celebration { min-height: 1050px; }
html:not(.cinematic) .garba-world { top: 65%; }

@media (max-width: 650px) {
  .cinematic .illustrated-scene .dialogue-beat {
    width: min(200px, calc(100vw - 28px));
    font-size: 14px;
    line-height: 1.5;
    padding: 9px 11px;
  }
  #devotion .aarti-art { height: 27svh; bottom: 20%; }
  #devotion .scene-actions { bottom: 12%; }
  .garba-world { width: 106vw; top: 50%; }
  .cinematic #celebration .story-title { padding-top: 0; }
}
@media (max-width: 650px) and (max-height: 700px) {
  .cinematic .journey-stage:has(#devotion.is-active) .journey-caption { opacity: 0; }
}

/* Arrival travels through the actual lotus passage as the friends enter. */
#arrival .entry-passage-art {
  z-index: -3;
  opacity: 0;
  pointer-events: none;
}
.cinematic #arrival .entry-passage-art { opacity: var(--passage-opacity, 0); }
#the-stage .scene-art img { object-position: center; }

/* The camera moves into the whole courtyard before dissolving to the final walk. */
.cinematic .garba-world {
  transform: translate(-50%, -50%) scale(var(--garba-zoom, 1));
  transform-origin: 50% 48%;
}
.cinematic #celebration .dialogue-track { opacity: var(--garba-dialogue-opacity, 1); }

/* Fit the complete concert composition; the friends watch from the foreground. */
.cinematic #the-stage { background: #102820; }
.cinematic #the-stage::before {
  content: "";
  position: absolute;
  inset: -25px;
  z-index: -5;
  background: url(assets/story/event-decor/crowds/stage-clean.webp) center / cover;
  filter: blur(22px) brightness(.3);
}
.cinematic #the-stage .scene-art,
.cinematic #the-stage .stage-crowd { inset: 90px 0 80px; }
.cinematic #the-stage .scene-art img { object-fit: contain; transform: none; }
.cinematic #the-stage .stage-crowd { transform: none; }
#the-stage .together-art {
  height: min(20svh, 180px);
  left: 23%;
  bottom: 12%;
}
@media (max-width: 650px) {
  .cinematic #the-stage .scene-art,
  .cinematic #the-stage .stage-crowd { inset: 96px 0 92px; }
  #the-stage .together-art { height: 17svh; left: 24%; bottom: 17%; }
}

/* A separate note preserves the approved handoff's dimensions and motion. */
.elephant-entry-disclaimer {
  margin: 8px auto 0;
  font: 500 12px/1.6 "Noto Serif Gujarati", serif;
  color: #fff8e5;
  background: #163b32ed;
  border: 1px solid #d6b56c;
  border-radius: 6px;
  padding: 7px 10px;
  text-align: center;
}
.cinematic .elephant-entry-disclaimer {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 28px));
  box-sizing: border-box;
}

/* Original gold logo placed on the green wall, following the scenery's crop and motion. */
.invitation-wall-branding {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
.invitation-wall-branding svg { display: block; width: 100%; height: 100%; }
.invitation-wall-branding .wall-brand-mobile { display: none; }
html:not(.cinematic) .invitation-wall-branding {
  position: relative;
  inset: auto;
  z-index: 0;
  width: min(180px, 40vw);
  aspect-ratio: 152 / 104;
  margin: 24px auto;
  background: url(assets/logo.webp) center / contain no-repeat;
}
html:not(.cinematic) .invitation-wall-branding svg { display: none; }
/* Measure every speech beat so the wall logo reserves room for the longest line. */
.cinematic #the-invitation .dialogue-beat:not(.is-speaking) {
  display: block;
  visibility: hidden;
}
@media (min-width: 651px) and (max-height: 800px) {
  .cinematic .story-invite .invitation-handoff { width: min(79vw, 650px, 48svh); }
}
.cinematic .invitation-wall-branding {
  transform: scale(var(--zoom, 1.035)) translate3d(var(--pan, 0px), 0, 0);
}
@media (max-width:650px) {
  .invitation-wall-branding .wall-brand-desktop { display: none; }
  .invitation-wall-branding .wall-brand-mobile { display: block; }
}
@media (prefers-reduced-motion:reduce) {
  .invitation-wall-branding { transform: none !important; }
}