/* The Habit Fix — animaciones de las landings (solo transform y opacity; nada atrapa el scroll).
   Las activa /assets/anim.js. Con prefers-reduced-motion todo queda visible y quieto. */

/* Aparecer al bajar (solo si hay JavaScript: anim.js pone la clase .anim en <html>) */
.anim .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.anim .rv.in{opacity:1;transform:none}

/* Secuencias: los pasos aparecen uno tras otro */
.anim .seq .paso{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1.25)}
.anim .seq .paso.in{opacity:1;transform:none}
.escribe{display:none;align-items:center;gap:4px;padding:10px 14px;border-radius:16px;background:#24334F;width:max-content;margin:6px 0}
.escribe.on{display:inline-flex}
.escribe i{width:7px;height:7px;border-radius:50%;background:var(--crema2);animation:puntos 1s infinite}
.escribe i:nth-child(2){animation-delay:.15s}.escribe i:nth-child(3){animation-delay:.3s}
@keyframes puntos{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Portada que entra, flota y le pasa un brillo */
.portada-wrap{position:relative;max-width:300px;margin:0 auto}
.portada-wrap .portada{max-width:100%;margin:0}
.anim .portada-wrap{animation:entraPortada .9s cubic-bezier(.2,.9,.25,1.15) both}
.portada-wrap .flota{animation:flota 6s ease-in-out 1s infinite}
.portada-wrap .brillo{position:absolute;inset:0;border-radius:10px;overflow:hidden;pointer-events:none;transform:rotate(-2deg)}
.portada-wrap .brillo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 48%,transparent 60%);transform:translateX(-130%);animation:brillo 7s ease-in-out 2s infinite}
@keyframes entraPortada{0%{opacity:0;transform:translateY(40px) rotate(4deg) scale(.92)}100%{opacity:1;transform:none}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes brillo{0%,70%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@media(min-width:900px){.portada-wrap{max-width:380px}}
@media(max-width:899px){.portada-wrap{max-width:220px}}

/* Globo "Woof!" */
.woof{position:absolute;left:-6%;bottom:30%;z-index:3;background:#fff;color:var(--noche);font:900 18px/1 var(--titulo);text-transform:uppercase;padding:8px 12px;border-radius:14px;transform:scale(0) rotate(-8deg);transform-origin:80% 100%;animation:woof 4s ease-in-out 1.8s infinite;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.woof::after{content:"";position:absolute;right:14px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes woof{0%,8%{transform:scale(0) rotate(-8deg)}14%,40%{transform:scale(1) rotate(-8deg)}48%,100%{transform:scale(0) rotate(-8deg)}}

/* Muestras en abanico */
.anim .abanico figure{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.25,1.1)}
.anim .abanico figure:nth-child(1){transform:translateY(30px) rotate(-6deg)}
.anim .abanico figure:nth-child(2){transform:translateY(30px) rotate(6deg)}
.anim .abanico.in figure{opacity:1}
.anim .abanico.in figure:nth-child(1){transform:rotate(-2deg)}
.anim .abanico.in figure:nth-child(2){transform:rotate(2deg);transition-delay:.15s}
@media(hover:hover){.anim .abanico.in:hover figure:nth-child(1){transform:rotate(-4deg) translateX(-8px)}.anim .abanico.in:hover figure:nth-child(2){transform:rotate(4deg) translateX(8px)}}

/* Sello */
.sello-no{display:inline-block}
.anim .sello-no{animation:sello .55s cubic-bezier(.3,1.6,.4,1) .2s both}
@keyframes sello{0%{opacity:0;transform:scale(1.3) rotate(-4deg)}100%{opacity:1;transform:none}}

/* Tachado que se dibuja */
.tachar{position:relative;text-decoration:none!important}
.tachar::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:3px;background:var(--naranja);border-radius:2px;transform-origin:left;transform:scaleX(1)}
.anim .tachar::after{animation:tacha .6s ease-out .4s both}
@keyframes tacha{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Alarma */
.alarma{display:inline-flex;align-items:center;gap:8px;font:900 34px/1 var(--titulo);color:var(--naranja);margin:10px 0 4px}
.anim .alarma.in{animation:alarma .5s steps(2,jump-none) 4}
@keyframes alarma{0%,100%{opacity:1;transform:rotate(0)}25%{transform:rotate(-6deg)}50%{opacity:.25}75%{transform:rotate(6deg)}}

/* Golpe con temblor */
.anim .ganador.paso.in{animation:golpe .5s cubic-bezier(.3,1.6,.4,1) both,tiembla .35s ease-in-out .5s 2}
@keyframes golpe{0%{opacity:0;transform:scale(1.25)}100%{opacity:1;transform:none}}
@keyframes tiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Pila de portadas en abanico que flota */
.anim .pila img{animation:entraPila .9s cubic-bezier(.2,.9,.25,1.15) both}
.anim .pila .p2{animation-delay:.15s}.anim .pila .p3{animation-delay:.3s}
.pila{animation:flota 6s ease-in-out 1.4s infinite}
@keyframes entraPila{0%{opacity:0;translate:0 40px}100%{opacity:1;translate:0 0}}

/* Barra del plan de 30 días */
.barra-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:24px 0 6px}
.barra-plan span{height:12px;border-radius:6px;background:rgba(243,221,178,.12);overflow:hidden;position:relative}
.barra-plan span::after{content:"";position:absolute;inset:0;background:var(--naranja);transform-origin:left;transform:scaleX(1)}
.anim .barra-plan span::after{transform:scaleX(0);transition:transform .6s ease}
.anim .barra-plan.in span::after{transform:scaleX(1)}
.anim .barra-plan.in span:nth-child(2)::after{transition-delay:.6s}
.anim .barra-plan.in span:nth-child(3)::after{transition-delay:1.2s}
.barra-plan-et{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

/* Tarjetas que se voltean: pista y rebote */
.anim .flips.in .flip:first-child .frente{animation:pista 1.1s ease-in-out .5s}
@keyframes pista{0%,100%{transform:rotateY(0)}40%{transform:rotateY(20deg)}}
.flip[aria-pressed="true"] .reves b{animation:rebote .45s cubic-bezier(.3,1.6,.4,1) .25s both}
@keyframes rebote{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}

/* Resultado del quiz */
.quiz-res.entra{animation:desliza .5s cubic-bezier(.2,.9,.3,1.1)}
@keyframes desliza{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .anim .rv,.anim .seq .paso,.anim .abanico figure{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation:none!important}
  .woof{display:none}
  .anim .barra-plan span::after{transform:scaleX(1)}
}