/* MundiJuegos — Intro cinematográfica de la portada (~2,2 s).
   Solo transform, opacity y clip-path. Se puede saltar con un toque.
   Reproducir una vez por sesión (sessionStorage: mj-intro-seen). */

.mj-intro__skip{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  z-index:6;appearance:none;border:0;background:rgba(30,27,75,.45);
  color:#fff;font:800 .8rem var(--font-ui);padding:8px 14px;border-radius:999px;
  min-height:var(--tap-min);cursor:pointer;opacity:0;pointer-events:none;
  backdrop-filter:blur(6px);
}
.mj-hero{position:relative}

/* —— Anti-FOUC: iris cerrado y copy oculta hasta que arranque el JS —— */
html.mj-await-intro .mj-hero__frame{clip-path:circle(0% at 50% 62%)}
html.mj-await-intro .mj-header__logo,
html.mj-await-intro .mj-hero__copy,
html.mj-await-intro .mj-section,
html.mj-await-intro .mj-footer,
html.mj-await-intro .mj-fx-piece,
html.mj-await-intro .mj-fx-confetti{opacity:0}
html.mj-await-intro .mj-hero__art{transform:scale(1.15)}

/* —— Guion (is-intro) ——
   0.00–0.80  iris + Ken Burns (1.15 → 1)
   0.35–1.50  piezas caen y rebotan
   0.90–1.40  logo con overshoot
   1.25–1.90  confeti
   1.50–2.20  titular y CTA escalonados
*/
.is-intro .mj-hero__frame{
  clip-path:circle(0% at 50% 62%);
  animation:mj-iris 800ms ease-out both;
}
.is-intro .mj-hero__art{
  transform:scale(1.15);
  animation:mj-kenburns 2200ms ease-out both;
}
.is-intro .mj-header__logo{
  opacity:0;
  animation:mj-logo-in 500ms var(--mj-ease,cubic-bezier(.34,1.56,.64,1)) 900ms both;
}
.is-intro .mj-hero__copy h1{
  opacity:0;
  animation:mj-rise 400ms ease-out 1500ms both;
}
.is-intro .mj-hero__copy p{
  opacity:0;
  animation:mj-rise 400ms ease-out 1620ms both;
}
.is-intro .mj-hero__cta{
  opacity:0;
  animation:mj-cta-in 420ms var(--mj-ease,cubic-bezier(.34,1.56,.64,1)) 1780ms both;
}
.is-intro .mj-section,
.is-intro .mj-footer{opacity:0}
.is-intro .mj-intro__skip{
  pointer-events:auto;
  animation:mj-skip-in 300ms ease 400ms both;
}
.is-intro .mj-fx-piece{
  animation:mj-piece-fall 1100ms var(--mj-ease,cubic-bezier(.34,1.56,.64,1)) var(--delay,.4s) both;
}
.is-intro .mj-fx-confetti{
  animation:mj-confetti 700ms ease-out var(--delay,1.25s) both;
}

@keyframes mj-iris{
  from{clip-path:circle(0% at 50% 62%)}
  to{clip-path:circle(150% at 50% 62%)}
}
@keyframes mj-kenburns{
  from{transform:scale(1.15) translateY(2%)}
  to{transform:scale(1) translateY(0)}
}
@keyframes mj-logo-in{
  0%{transform:scale(.55) translateY(-16px);opacity:0}
  70%{transform:scale(1.14) translateY(0);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes mj-rise{
  from{transform:translateY(18px);opacity:0}
  to{transform:none;opacity:1}
}
@keyframes mj-cta-in{
  from{transform:translateY(14px) scale(.92);opacity:0}
  to{transform:none;opacity:1}
}
@keyframes mj-skip-in{
  from{opacity:0}
  to{opacity:.85}
}
@keyframes mj-piece-fall{
  0%{transform:translateY(-30%) rotate(var(--rot,0deg)) scale(.75);opacity:0}
  12%{opacity:1}
  72%{transform:translateY(var(--land,70%)) rotate(calc(var(--rot,0deg) + 18deg)) scale(1)}
  84%{transform:translateY(calc(var(--land,70%) - 16px)) rotate(calc(var(--rot,0deg) + 10deg)) scale(1.05)}
  100%{transform:translateY(var(--land,70%)) rotate(var(--rot,0deg)) scale(1);opacity:.95}
}
@keyframes mj-confetti{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(0);opacity:0}
  18%{transform:translate(-50%,-50%) rotate(20deg) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,80px))) rotate(var(--spin,180deg)) scale(.85);opacity:0}
}

/* Estado final (saltado, visto o terminado) */
.is-intro-done .mj-hero__frame{clip-path:none}
.is-intro-done .mj-hero__art{transform:none}
.is-intro-done .mj-header__logo,
.is-intro-done .mj-hero__copy,
.is-intro-done .mj-hero__copy h1,
.is-intro-done .mj-hero__copy p,
.is-intro-done .mj-hero__cta,
.is-intro-done .mj-section,
.is-intro-done .mj-footer{opacity:1;transform:none}
.is-intro-done .mj-intro__skip{opacity:0;pointer-events:none;display:none}
.is-intro-done .mj-fx-confetti{opacity:0}

/* prefers-reduced-motion: solo un fundido. Gana a identidad-v1 (1ms !important). */
@media (prefers-reduced-motion:reduce){
  html.mj-await-intro .mj-hero__frame,
  html.mj-intro-done .mj-hero__frame{clip-path:none}
  html.mj-await-intro .mj-hero__art,
  html.mj-intro-done .mj-hero__art{transform:none}
  html.mj-await-intro .mj-header__logo,
  html.mj-await-intro .mj-hero__copy,
  html.mj-await-intro .mj-section,
  html.mj-await-intro .mj-footer,
  html.mj-await-intro .mj-fx-piece{opacity:1}
  .mj-page{animation:mj-fade 400ms ease both !important}
  .mj-page .mj-fx-piece,
  .mj-page .mj-card,
  .mj-page .mj-hero__art,
  .mj-page .mj-hero__frame,
  .mj-page .mj-header__logo,
  .mj-page .mj-hero__copy,
  .mj-page .mj-hero__cta,
  .mj-page .mj-intro__skip,
  .mj-page .mj-fx-confetti{
    animation:none !important;
    transition:none !important;
  }
  .is-intro-done .mj-fx-piece{animation:none !important;transform:translateY(var(--land,70%)) rotate(var(--rot,0deg))}
}
@keyframes mj-fade{from{opacity:0}to{opacity:1}}