/* The stage and the two presentation modes: world (page-built set) and plaza (clay photo plate).
   Sizes use container units of the stage so desktop shows a centered phone-width column. */
.stage {
  position: fixed; inset: 0; margin: 0 auto; max-width: 520px; overflow: hidden;
  container-type: size; background: var(--cream);
  /* World: character box geometry. Plaza: the clip covers the stage, pinned to the bottom. */
  --rig-h: min(64cqh, 150cqw);
  --rig-w: calc(var(--rig-h) * 0.5625);
  --clip-h: max(100cqh, 177.78cqw);
  --clip-w: calc(var(--clip-h) * 0.5625);
  --edge-l: calc(var(--space-2) + var(--safe-l));
  --edge-r: calc(var(--space-2) + var(--safe-r));
}
.scenery { position: absolute; inset: 0; }
.plaza { display: none; }

/* ---------- world: sun, papel, tiled ground ---------- */
.sun {
  position: absolute; left: 50%; top: 18%; width: 120cqmax; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: rgba(var(--marigold-rgb), 0.18);
  box-shadow: 0 0 0 7cqmin rgba(var(--marigold-rgb), 0.1), 0 0 0 14cqmin rgba(var(--marigold-rgb), 0.06);
}
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--cream-deep); }
.ground::before { /* clay tiles */
  content: ""; position: absolute; inset: 0; opacity: 0.35;
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(58, 35, 24, .18) 46px 48px),
                    repeating-linear-gradient(0deg, transparent 0 22px, rgba(58, 35, 24, .18) 22px 24px);
}

/* ---------- title ---------- */
.title {
  position: absolute; z-index: 5; left: var(--edge-l); right: var(--edge-r);
  top: calc(var(--safe-t) + 30px + 18.75cqw); /* just under the papel flags */
  text-align: center;
}
.title h1 { font-size: clamp(var(--text-2xl), 9cqw, var(--text-4xl)); margin: 0; overflow-wrap: anywhere; }
.title p { margin: 0; }
.date { margin-top: 0.25rem !important; color: var(--muted); font-weight: 600; }
.details {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem;
  max-height: 0; opacity: 0; overflow: hidden; font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cacao);
  transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
}
[data-phase="final"] .details { max-height: 5rem; opacity: 1; margin-top: var(--space-1); }
.details span {
  background: rgba(var(--rosa-rgb), 0.1); border-radius: 999px; padding: 0.125rem 0.625rem;
}

/* ---------- characters ---------- */
.rig {
  position: absolute; z-index: 3; left: 50%; bottom: 12%; translate: -50% 0;
  height: var(--rig-h); aspect-ratio: 9 / 16;
}
.actors {
  position: absolute; inset: 0;
  transform: translateY(115%); transition: transform 0.9s cubic-bezier(.2, 1.3, .4, 1);
}
.actors.in { transform: none; }
.actors canvas { position: relative; width: 100%; height: 100%; display: block; }
/* Contact shadow under the feet (feet sit ~13-16% above the clip's bottom edge). */
.shadow {
  position: absolute; left: 8%; right: 8%; bottom: 12.5%; height: 5%;
  border-radius: 50%; background: rgba(58, 35, 24, 0.2);
}

/* ---------- bubble placement: above the heads (~24% from the clip top) ---------- */
.bubble { bottom: calc(12cqh + var(--rig-h) * 0.78); }
.bubble[data-speaker="manuel"] { left: max(var(--edge-l), calc(50cqw - var(--rig-w) * 0.62)); }
.bubble[data-speaker="carolina"] { right: max(var(--edge-r), calc(50cqw - var(--rig-w) * 0.62)); }

/* ---------- final screen: Sí / No + replay (absent until the S09 loop starts) ---------- */
.final {
  position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(var(--safe-b) + var(--space-2));
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: 0 var(--edge-r) 0 var(--edge-l);
}
.final[hidden] { display: none; }
.final.pop .btn-yes { animation: pop-in 0.55s var(--pop) 0.05s backwards; }
.final.pop .btn-no { animation: pop-in 0.55s var(--pop) 0.22s backwards; }
.final.pop .replay { animation: fade-up 0.4s ease 0.6s backwards; }
.final .btn.pressed { animation: squish 0.35s var(--pop); } /* after pop-in so a tap wins */
@keyframes pop-in {
  0% { opacity: 0; transform: translateY(40px) scale(0.3) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.12) rotate(3deg); }
  80% { transform: translateY(0) scale(0.95) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- mute toggle (bottom-left, clear of the centered buttons) ---------- */
.mute {
  position: absolute; z-index: 9; left: calc(var(--safe-l) + 12px); bottom: calc(var(--safe-b) + var(--space-2));
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(58, 35, 24, 0.25); background: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
}
[data-phase="envelope"] .mute { display: none; }

/* ---------- plaza mode: full-bleed clay plate, title on a cream card ---------- */
[data-mode="plaza"] .stage { background: #e9c9a3; }
[data-mode="plaza"] .plaza {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
[data-mode="plaza"] :is(.sun, .papel, .ground) { display: none; }
/* The green clips are framed ~1.3x tighter than the plate, so the rig is scaled to stand the
   couple where the plate's own figures stood (feet ~18% above its bottom edge). */
[data-mode="plaza"] .rig { height: calc(var(--clip-h) * 0.76); bottom: calc(var(--clip-h) * 0.081); }
[data-mode="plaza"] .actors { transform: none; opacity: 0; transition: opacity 0.8s ease; }
[data-mode="plaza"] .actors.in { opacity: 1; }
[data-mode="plaza"] .title {
  top: calc(var(--safe-t) + var(--space-2)); width: fit-content; max-width: calc(100% - 2 * var(--space-2));
  margin: 0 auto; padding: var(--space-1) var(--space-3);
  background: rgba(251, 241, 227, 0.94); border: 3px solid var(--cacao); border-radius: 20px;
  box-shadow: 0 5px 0 var(--cacao);
}
[data-mode="plaza"] .title h1 { font-size: clamp(var(--text-xl), 8cqw, var(--text-3xl)); }
[data-mode="plaza"] .date { color: var(--cacao); }
[data-mode="plaza"] .stage { --rig-h: calc(var(--clip-h) * 0.76); }
[data-mode="plaza"] .bubble { bottom: calc(var(--clip-h) * (0.081 + 0.76 * 0.78)); }

/* ---------- short screens: tighter title so the bubble has room over the heads ---------- */
@container (max-height: 700px) {
  [data-phase="show"] .date { display: none; }
  [data-mode="plaza"][data-bubble="on"] .title { opacity: 0; }
}
.title { transition: opacity 0.25s ease; }

@media (prefers-reduced-motion: reduce) {
  .actors, [data-mode="plaza"] .actors { transform: none; transition: opacity 0.3s ease; }
  .actors:not(.in) { opacity: 0; }
  .final.pop :is(.btn-yes, .btn-no, .replay) { animation: fade-up 0.3s ease backwards; }
  .final .btn.pressed { animation: none; }
  .details { transition: none; }
}

/* Camera punch-in on the "¡Espérate!" cut (scenes.json "punch"). */
#screen.punch { animation: punch 0.45s cubic-bezier(.2, .9, .3, 1); }
@keyframes punch {
  0% { transform: scale(1.12); filter: brightness(1.15); }
  100% { transform: scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) { #screen.punch { animation: none; } }