/* The game-show touches: the FAQ answer board, characters that watch the visitor, the scoreboard step numbers,
   the searchlights behind the games, and the celebration when a code is asked for. */

/* ---------- Dudas as a "100 Familiares Dijeron" answer board ---------- */
/* Numbered tiles; on a wide screen they read down two columns, 1 to 4 then 5 to 8, like the show's board. */
.faq-list { counter-reset: tile; }
@media (width > 54rem) { .faq-list { grid-template-rows: repeat(4, auto); grid-auto-flow: column; } }
.faq-item { counter-increment: tile; background: linear-gradient(#22409a, var(--panel) 70%); }
.faq-item summary { padding-left: 78px; }
.faq-item summary::before { content: counter(tile); position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--gold-soft), var(--gold) 55%, var(--gold-deep)); color: var(--gold-ink); font: 400 1.2rem/1 var(--display); box-shadow: inset 0 -3px 0 rgb(42 28 0 / 0.22); }
.faq-item[open] { animation: tile-flash 650ms ease-out; }
.faq-item[open] p { transform-origin: 50% 0; animation: tile-flip 520ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes tile-flash { from { box-shadow: var(--lift), inset 0 0 0 999px rgb(255 199 44 / 0.35); } }
@keyframes tile-flip { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } }

/* ---------- Characters that watch the visitor (cast-gaze.js sets --lean, -1 to 1) ---------- */
.cabezon img { transform-origin: 50% 92%; rotate: calc(var(--lean, var(--tilt-lean, 0)) * 7deg); transition: scale 300ms cubic-bezier(0.16, 1, 0.3, 1), rotate 450ms ease-out; }
/* Two heads peek in at the right edge of a section, beside its title, and duck away while the page is scrolled fast. */
.peeker { position: absolute; z-index: 1; top: clamp(24px, 4vw, 60px); right: 0; width: clamp(96px, 9vw, 140px); height: auto; pointer-events: none; transform-origin: 70% 100%; translate: 110% 0; rotate: calc(-12deg + var(--lean, var(--tilt-lean, 0)) * 9deg); filter: drop-shadow(var(--lift)); transition: translate 650ms cubic-bezier(0.16, 1, 0.3, 1), rotate 450ms ease-out; }
.shown .peeker { translate: 34% 0; }
.rushing .peeker { translate: 110% 0; transition-duration: 220ms, 450ms; }
@media (max-width: 54rem) { .peeker { display: none; } }

/* ---------- "Así funciona" numbers as split-flap scoreboard digits (stage-fx.js sets data-flap) ---------- */
.how li::before { background: linear-gradient(transparent calc(50% - 1px), rgb(42 28 0 / 0.3) 0 calc(50% + 1px), transparent 0), linear-gradient(var(--gold-soft), var(--gold) 50%, var(--gold-deep) 50.5%, var(--gold)); }
.how li[data-flap]::before { content: attr(data-flap); }
.how li.flap::before { animation: flap 70ms linear; }
@keyframes flap { from { transform: perspective(240px) rotateX(-60deg); } }

/* ---------- Searchlights sweeping behind the games title ---------- */
/* The section gets room above its title so the beams rise into empty stage, not behind the step cards. */
.games { padding-top: clamp(48px, 8vw, 110px); }
.games h2 { position: relative; }
.games h2::before, .games h2::after { content: ""; position: absolute; z-index: -1; bottom: 0.2em; width: clamp(80px, 9vw, 140px); height: clamp(150px, 15vw, 210px); pointer-events: none; transform-origin: 50% 100%; background: linear-gradient(to top, rgb(255 214 120 / 0.34), rgb(255 214 120 / 0)); mix-blend-mode: screen; clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); animation: searchlight 7s ease-in-out infinite alternate; }
.games h2::before { left: 6%; }
.games h2::after { left: 34%; animation-delay: -3.5s; }
@keyframes searchlight { from { rotate: -24deg; } to { rotate: 20deg; } }

/* ---------- The celebration when a code is asked for (home.js and hero.js) ---------- */
.done-stamp { justify-self: start; margin-bottom: 6px; padding: 4px 14px; font: 400 1.4rem/1.3 var(--display); color: var(--stage); border: 4px solid var(--stage); border-radius: 8px; rotate: -8deg; animation: stamp-in 420ms cubic-bezier(0.2, 0, 0.2, 1) both; }
.turn-sign.flash { animation: sign-flash 1200ms steps(1) both; }
@keyframes sign-flash { 0%, 30%, 60% { opacity: 1; scale: 1.12; } 15%, 45%, 75% { opacity: 0.4; scale: 1.12; } 100% { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .faq-item[open], .faq-item[open] p, .how li.flap::before, .games h2::before, .games h2::after, .done-stamp, .turn-sign.flash { animation: none; }
  .games h2::before { rotate: -12deg; }
  .games h2::after { rotate: 10deg; }
}