/* === Motion: page-open entrance (html.intro) + scroll reveals (.reveal → .in) ===
   Only runs when the visitor hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  /* --- entrance, in order --- */
  .intro .site-header { animation: slideDown .55s cubic-bezier(.2,.8,.2,1) both; }
  .intro .hero > .papel-picado {
    animation:
      flagsDrop .9s .15s cubic-bezier(.2,.9,.3,1.25) both,
      sway 6s 1.05s ease-in-out infinite alternate;
  }
  .intro .hero .open-badge { animation: fadeUp .5s .55s both; }
  .intro .hero-logo { animation: logoPop .9s .35s cubic-bezier(.2,.9,.3,1.35) both; }
  .intro .hero-title { animation: stamp .55s .95s cubic-bezier(.2,.9,.3,1.3) both; }
  .intro .wheel-stage { animation: fadeUp .7s 1.15s both; }
  .intro .wheel-item[data-slot="front"] .wheel-photo { animation: spinIn 1s 1.2s cubic-bezier(.2,.9,.3,1.1) both; }
  .intro .wheel-controls,
  .intro .wheel-sample,
  .intro .hero-hint,
  .intro .hero-actions { animation: fadeUp .6s 1.6s both; }

  /* --- stays alive after the entrance --- */
  .hero-logo { animation: logoFloat 5s 1.4s ease-in-out infinite; }
  .intro .hero-logo { animation: logoPop .9s .35s cubic-bezier(.2,.9,.3,1.35) both, logoFloat 5s 1.4s ease-in-out infinite; }
  .open-badge { position: relative; }
  .open-badge:not(.is-closed)::after {
    content: ''; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; background: rgba(47,160,79,.6); animation: livePulse 2s ease-out infinite; pointer-events: none;
  }
  .papel-picado, .hero-logo { will-change: transform; }
  .is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

  /* --- scroll reveals --- */
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.in { opacity: 1; transform: none; }
  .exp-photo.reveal.in .exp-lettering { animation: letterIn .8s .25s cubic-bezier(.2,.9,.3,1.3) both; }
}

@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flagsDrop { from { transform: translateY(-110%) skewX(-6deg); opacity: 0; } to { transform: skewX(-1.2deg) translateY(-1px); opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes logoPop {
  0% { opacity: 0; transform: scale(.55) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.6); }
  70% { opacity: 1; transform: scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes spinIn { from { opacity: 0; transform: rotate(-120deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes livePulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes letterIn {
  from { opacity: 0; transform: translateY(-50%) rotate(-20deg) scale(.7); }
  to { opacity: 1; transform: translateY(-50%) rotate(-8deg); }
}