/* ==========================================================
   Dona tu pavo · movimiento (Agente 5)
   Reglas: solo transform y opacity · bucles solo con .en-pantalla
   · todo se apaga con prefers-reduced-motion
   ========================================================== */

/* --- entrada del hero (una sola vez) --- */
.hero__contenido>*{opacity:0;transform:translateY(16px);animation:entrar .7s cubic-bezier(.2,.8,.2,1) forwards}
.hero__contenido>:nth-child(1){animation-delay:.05s}
.hero__contenido>:nth-child(2){animation-delay:.2s}
.hero__contenido>:nth-child(3){animation-delay:.32s}
.hero__contenido>:nth-child(4){animation-delay:.44s}
.hero__contenido>:nth-child(5){animation-delay:.56s}
.hero__contenido>:nth-child(6){animation-delay:.9s}
@keyframes entrar{to{opacity:1;transform:translateY(0)}}

/* --- ticket dorado: flota y gira en falso 3D --- */
.en-pantalla .ticket-escena .ticket{animation:flotar 5s ease-in-out infinite}
@keyframes flotar{
  0%,100%{transform:translateY(0) rotateY(-16deg) rotateZ(-3deg)}
  50%{transform:translateY(-14px) rotateY(18deg) rotateZ(3deg)}
}
.en-pantalla .ticket__brillo{animation:brillo 5s ease-in-out infinite}
@keyframes brillo{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}

/* --- botón gigante: un solo pulso a los 2 s, nunca más --- */
.boton--gigante{animation:entrar .7s cubic-bezier(.2,.8,.2,1) .44s forwards,pulso .9s ease-in-out 2.2s 1}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* --- decorado del hero --- */
.en-pantalla .pavo-cuerpo{transform-origin:60px 110px;animation:balanceo 2.8s ease-in-out infinite}
@keyframes balanceo{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-6px)}}
.en-pantalla .pavo-cola{transform-origin:60px 70px;animation:abanico 2.8s ease-in-out infinite}
@keyframes abanico{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Papá Noel · ≥1024: camina por el suelo (18 s cruzando + 10 s fuera) */
.en-pantalla .deco--noel{animation:pasear 28s linear infinite}
@keyframes pasear{0%{transform:translateX(0)}64%{transform:translateX(calc(100vw + 280px))}64.01%,100%{transform:translateX(calc(100vw + 280px));opacity:0}}
/* 400–1023: se asoma desde la esquina, saluda y se esconde */
@media (max-width:1023px){
  .en-pantalla .deco--noel{animation:asomarse 12s ease-in-out infinite}
  @keyframes asomarse{0%,8%{transform:translateY(120%)}16%,62%{transform:translateY(0)}72%,100%{transform:translateY(120%)}}
}
@media (max-width:399px){.en-pantalla .deco--noel{animation-duration:10s}}
/* se detiene mientras alguien escribe en un formulario */
body.escribiendo .deco--noel,body.escribiendo .noel-cuerpo{animation-play-state:paused}
.en-pantalla .noel-cuerpo{transform-origin:60px 110px;animation:caminar .6s ease-in-out infinite}
@keyframes caminar{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.en-pantalla .noel-brazo{transform-origin:88px 76px;animation:saludar 6s ease-in-out infinite}
@keyframes saludar{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-22deg)}82%{transform:rotate(10deg)}88%{transform:rotate(-22deg)}94%{transform:rotate(0)}}
.en-pantalla .noel-brazo{animation-duration:8s}

.en-pantalla .bandera-tela{transform-origin:12px 28px;animation:ondear 2s ease-in-out infinite}
@keyframes ondear{0%,100%{transform:skewY(-4deg) scaleX(1)}50%{transform:skewY(4deg) scaleX(.96)}}

/* --- nieve: cada copo recibe su duración y retraso desde motion.js --- */
.en-pantalla .nieve i{animation:caer linear infinite}
@keyframes caer{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(var(--deriva,0px),110vh,0)}}

/* --- aparición al hacer scroll (una vez) --- */
.aparece{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.aparece.visible{opacity:1;transform:none}
.pasos .paso:nth-child(2).visible{transition-delay:.12s}
.pasos .paso:nth-child(3).visible{transition-delay:.24s}
.tarjetas .tarjeta:nth-child(2).visible{transition-delay:.1s}
.tarjetas .tarjeta:nth-child(3).visible{transition-delay:.2s}
.tarjetas .tarjeta:nth-child(4).visible{transition-delay:.3s}

/* --- gracias: el ticket vuela, el check se dibuja --- */
.gracias:not([hidden]) .ticket--vuela{animation:volar 1.4s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes volar{0%{opacity:0;transform:translate(-40px,60px) rotate(-18deg) scale(.7)}35%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(-6deg) scale(1)}}
.gracias:not([hidden]) .gracias__check path{stroke-dasharray:60;stroke-dashoffset:60;animation:trazo .6s ease-out 1.1s forwards}
.gracias:not([hidden]) .gracias__check circle{stroke-dasharray:180;stroke-dashoffset:180;animation:trazo .7s ease-out .8s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.gracias:not([hidden]) h2,.gracias:not([hidden]) p,.gracias:not([hidden]) .gracias__acciones{opacity:0;animation:entrar .6s ease forwards}
.gracias:not([hidden]) h2{animation-delay:1.2s}
.gracias:not([hidden]) p{animation-delay:1.35s}
.gracias:not([hidden]) .gracias__acciones{animation-delay:1.5s}
.hero__flecha span{animation:flecha 1.8s ease-in-out infinite}
@keyframes flecha{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}

/* --- v4: más vida en el resto de la página --- */
.pestana-oculta *{animation-play-state:paused!important}
.paso.visible .paso__n{animation:rebote .45s cubic-bezier(.3,1.6,.5,1) .15s both}
@keyframes rebote{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.qr--yape.aparece{transform:translateY(20px) rotate(-4deg)}
.qr--yape.aparece.visible{transform:none;transition-duration:.5s}
.late.visible,.yape__texto.visible .late{animation:latido .6s ease-in-out .3s 1}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.boton--confirmar.visible{animation:pulso .9s ease-in-out .4s 1}
@media (hover:hover){.tarjeta:hover>svg{animation:menear .5s ease-in-out 1}}
@keyframes menear{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}70%{transform:rotate(6deg)}}
.tarjeta--rol input:checked~.tarjeta__check{animation:rebote .25s ease-out}
.pregunta[open] .pregunta__resp{animation:abrir-resp .25s ease-out}
@keyframes abrir-resp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hoja__paso.entrando{animation:deslizar .28s cubic-bezier(.2,.8,.2,1)}
@keyframes deslizar{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.hoja__gracias.entrando .moneda{animation:caer-moneda .7s cubic-bezier(.3,1.5,.5,1) .1s both}
@keyframes caer-moneda{0%{opacity:0;transform:translateY(-80px) rotate(-30deg)}60%{opacity:1}100%{opacity:1;transform:none}}
.hoja__gracias.entrando [data-ap-raciones]{animation:entrar .5s ease .6s both}
.subir.lista img{animation:aparecer-mini .3s ease-out}
@keyframes aparecer-mini{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.subir.lista .subir__ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:trazo .5s ease-out .2s forwards}
.subir.sacudir{animation:sacudir .3s ease-in-out}
@keyframes sacudir{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.gracias:not([hidden]) .gracias__destello{animation:destello .9s ease-out .9s both}
@keyframes destello{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
.ok-voluntario:not([hidden]) .gracias__check circle{stroke-dasharray:180;stroke-dashoffset:180;animation:trazo .6s ease-out forwards}
.ok-voluntario:not([hidden]) .gracias__check path{stroke-dasharray:60;stroke-dashoffset:60;animation:trazo .5s ease-out .5s forwards}

/* --- toast --- */
.toast{animation:entrar .3s ease}

/* ==========================================================
   Movimiento reducido (cuando la computadora tiene las animaciones
   apagadas): la página sigue viva, pero más calmada.
   Sin desplazamientos grandes ni parpadeos; bucles lentos y suaves.
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .boton--gigante{animation:entrar .5s ease .3s forwards}
  .en-pantalla .ticket-escena .ticket{animation:flotar-suave 7s ease-in-out infinite}
  @keyframes flotar-suave{0%,100%{transform:translateY(0) rotateY(-8deg) rotateZ(-2deg)}50%{transform:translateY(-6px) rotateY(8deg) rotateZ(1deg)}}
  .en-pantalla .ticket__brillo{animation-duration:8s}
  .en-pantalla .pavo-cuerpo,.en-pantalla .pavo-cola{animation-duration:4.5s}
  .en-pantalla .bandera-tela{animation-duration:3.5s}
  /* Papá Noel no cruza la pantalla: se queda abajo a la izquierda y saluda */
  .deco--noel{left:2%!important;right:auto!important;bottom:2%}
  .en-pantalla .deco--noel{animation:none!important}
  .en-pantalla .noel-cuerpo{animation:caminar 2.4s ease-in-out infinite}
  .en-pantalla .nieve i{animation-duration:18s!important}
  .hero__flecha span{animation:none}
  .subir.sacudir,.paso.visible .paso__n,.hoja__gracias.entrando .moneda{animation:entrar .2s ease both}
}

/* ==========================================================
   Burbuja-pavo: el vuelo lo hace burbuja.js; aquí, la vida propia
   (plumas que respiran, moco que se mece, brillos), nacer, estallar y saltar.
   ========================================================== */
.pavo__plumas{transform-box:view-box;transform-origin:100px 112px;animation:pavo-plumas 3.6s ease-in-out infinite}
.pavo__moco{transform-box:fill-box;transform-origin:50% 0;animation:pavo-moco 2.4s ease-in-out infinite}
.pavo__brillo{animation:burbuja-brilla 5s ease-in-out infinite}
.pavo__chispa{transform-box:fill-box;transform-origin:center;animation:burbuja-chispea 3.2s ease-in-out infinite}
.pavo__vidrio{animation:burbuja-ondula 7s ease-in-out infinite}
.burbuja-cuerpo.nace{animation:burbuja-nace .95s cubic-bezier(.2,.9,.3,1.2) both}
.burbuja-cuerpo.estalla{animation:burbuja-estalla .4s cubic-bezier(.3,0,.8,.4) forwards}
.burbuja-cuerpo.salta{animation:burbuja-salta .65s cubic-bezier(.34,1.56,.64,1)}
.burbuja__gotas i{animation:burbuja-gota .8s cubic-bezier(.15,.7,.3,1) forwards}
.burbuja__onda{animation:burbuja-onda .6s ease-out forwards}
body.pestana-oculta .pavo__plumas,body.pestana-oculta .pavo__moco,body.pestana-oculta .pavo__brillo,body.pestana-oculta .pavo__chispa,body.pestana-oculta .pavo__vidrio{animation-play-state:paused}
@keyframes pavo-plumas{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.035) rotate(-1.5deg)}60%{transform:scale(.99) rotate(1.2deg)}}
@keyframes pavo-moco{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes burbuja-ondula{0%,100%{transform:scale(1,1)}33%{transform:scale(1.02,.98)}66%{transform:scale(.985,1.015)}}
@keyframes burbuja-brilla{0%,100%{opacity:.4}50%{opacity:.7}}
@keyframes burbuja-chispea{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1.3);opacity:.9}}
@keyframes burbuja-nace{0%{transform:scale(0);opacity:0}55%{transform:scale(1.14);opacity:1}78%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}
@keyframes burbuja-estalla{0%{transform:scale(1);opacity:1}45%{transform:scale(1.14);opacity:1}100%{transform:scale(1.45);opacity:0}}
@keyframes burbuja-salta{0%{transform:scale(1)}40%{transform:scale(1.16) rotate(-4deg)}70%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}
@keyframes burbuja-gota{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}
@keyframes burbuja-onda{0%{transform:scale(.75);opacity:.95}100%{transform:scale(2);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .pavo__plumas{animation-duration:7s}
  .pavo__moco{animation-duration:4.5s}
  .pavo__vidrio,.pavo__chispa{animation:none}
  .burbuja-cuerpo{transition:opacity .35s ease}
  .burbuja-cuerpo.oculta{transform:none}
  .burbuja-cuerpo.nace{animation:burbuja-aparece .5s ease both}
  .burbuja-cuerpo.estalla{animation:burbuja-desvanece .32s ease forwards}
  .burbuja-cuerpo.salta{animation:none}
  @keyframes burbuja-aparece{from{opacity:0}to{opacity:1}}
  @keyframes burbuja-desvanece{from{opacity:1}to{opacity:0}}
}