/* Kaizen Atletas · modelo de animaciones (se suma a index.html; no cambia colores ni pantallas) */

/* ---------- Pantalla de entrada: el logo aparece ---------- */
#kz-splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .45s ease,visibility .45s}
#kz-splash.out{opacity:0;visibility:hidden}
#kz-splash.out .kz-s-in{transform:scale(1.08);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.kz-s-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.kz-s-logo{position:relative;display:block;width:min(62vw,250px)}
.kz-s-logo img{display:block;width:100%;height:auto}
.kz-s-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) no-repeat;background-size:250% 100%;background-position:160% 0;
  -webkit-mask:url(/icons/kaizen-wordmark.png) center/100% 100% no-repeat;mask:url(/icons/kaizen-wordmark.png) center/100% 100% no-repeat}
.kz-s-bar{display:block;width:72px;height:4px;border-radius:2px;background:var(--accent);transform:scaleX(0)}
.kz-s-sub{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.6em;margin-right:-.6em;color:var(--muted);text-transform:uppercase;opacity:0}
.kz-s-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(253,102,0,.22),transparent 65%);opacity:0;pointer-events:none}

@media (prefers-reduced-motion: no-preference){
  .kz-s-logo img{clip-path:inset(0 100% 0 0);animation:kz-reveal .7s .15s cubic-bezier(.7,0,.2,1) forwards}
  .kz-s-shine{animation:kz-shine .8s .85s ease-out forwards}
  .kz-s-bar{animation:kz-bar .5s .7s cubic-bezier(.2,.9,.3,1) forwards}
  .kz-s-sub{animation:kz-sub .6s .9s ease-out forwards}
  .kz-s-glow{animation:kz-glow 1.6s .3s ease-out forwards}
}
@media (prefers-reduced-motion: reduce){ .kz-s-sub{opacity:1}.kz-s-bar{transform:none} }
@keyframes kz-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes kz-shine{to{background-position:-60% 0}}
@keyframes kz-bar{to{transform:scaleX(1)}}
@keyframes kz-sub{from{opacity:0;letter-spacing:1.2em;margin-right:-1.2em}to{opacity:1;letter-spacing:.6em;margin-right:-.6em}}
@keyframes kz-glow{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:.5;transform:scale(1)}}

@media (prefers-reduced-motion: no-preference){

/* ---------- Botones que se hunden al tocarlos ---------- */
button,.btn,.day,.chip,.pct,.week-day,.tmr,.lnk,.bump{transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .15s,border-color .15s,color .15s}
button:active:not(:disabled),.btn:active{transform:scale(.94)}
.week-day:active,.card:active,.gbtn:active{transform:scale(.98)}
.sheet-bg:active{transform:none}

/* ---------- Al abrir una pantalla: las tarjetas entran una atrás de otra ---------- */
.kz-in{animation:kz-up .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 55ms)}
.kz-from-r{animation:kz-right .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 40ms)}
.kz-from-l{animation:kz-left .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 40ms)}
@keyframes kz-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kz-right{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes kz-left{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
h1.kz-in{animation-name:kz-title}
@keyframes kz-title{from{opacity:0;transform:translateY(10px);letter-spacing:4px}to{opacity:1;transform:none}}

/* Barra de "Primeros pasos" que se llena */
.kz-grow .steps-bar span{animation:kz-fill .9s .35s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
@keyframes kz-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kz-grow .step.done .step-ic{animation:kz-pop .45s cubic-bezier(.3,1.8,.5,1) both;animation-delay:calc(.5s + var(--d,0) * 90ms)}

/* ---------- Día elegido: salta ---------- */
.day.on.kz-pick{animation:kz-pick .42s cubic-bezier(.3,1.8,.5,1)}
@keyframes kz-pick{0%{transform:scale(.82)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Pestaña de abajo: el ícono rebota y aparece un puntito */
#nav button.on .i{animation:none}
#nav button.on.kz-tab .i{animation:kz-hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes kz-hop{0%{transform:translateY(0)}35%{transform:translateY(-6px) scale(1.12)}100%{transform:none}}
#nav button{position:relative}
#nav button.on::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
#nav button.on.kz-tab::after{animation:kz-pop .4s .1s cubic-bezier(.3,1.8,.5,1) both}

/* Lo que tocaste vuelve con un saltito cuando se redibuja */
.kz-pop{animation:kz-pop .42s cubic-bezier(.3,1.8,.5,1)}
@keyframes kz-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- Chocar los 5 ---------- */
.bump.kz-bumped{animation:kz-pop .45s cubic-bezier(.3,1.8,.5,1)}
.bump.kz-bumped .i{animation:kz-wave .6s ease-in-out}
@keyframes kz-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg) scale(1.2)}55%{transform:rotate(14deg)}80%{transform:rotate(-6deg)}}
.kz-plus{position:fixed;z-index:60;pointer-events:none;font-family:var(--display);font-size:22px;color:var(--accent);animation:kz-float .8s ease-out forwards}
@keyframes kz-float{from{opacity:1;transform:translate(-50%,0) scale(.8)}to{opacity:0;transform:translate(-50%,-38px) scale(1.2)}}

/* ---------- Resultado guardado / marcado como hecho ---------- */
.kz-done{animation:kz-glowpop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes kz-glowpop{0%{transform:scale(.85);box-shadow:0 0 0 0 rgba(52,211,153,.6)}50%{transform:scale(1.05)}100%{transform:scale(1);box-shadow:0 0 0 14px rgba(52,211,153,0)}}
.kz-done .i path,.kz-done .i polyline{stroke-dasharray:30;stroke-dashoffset:30;animation:kz-draw .5s .15s ease-out forwards}
@keyframes kz-draw{to{stroke-dashoffset:0}}
.block.kz-flash{animation:kz-blockflash 1s ease-out}
@keyframes kz-blockflash{0%{background:rgba(52,211,153,.16)}100%{background:transparent}}

/* ---------- Pizarra: brillo en el 1° puesto ---------- */
.brow{position:relative;overflow:hidden}
.brow.kz-first::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(253,102,0,.28) 50%,transparent 70%);transform:translateX(-100%);animation:kz-sweep 1.1s .45s ease-out forwards}
@keyframes kz-sweep{to{transform:translateX(100%)}}
.brow.kz-first .pos{animation:kz-pop .5s .4s cubic-bezier(.3,1.8,.5,1) both;color:var(--accent)!important}

/* ---------- Paneles de abajo: suben con rebote ---------- */
.kz-open.sheet-bg{animation:kz-fade .22s ease-out}
.kz-open .sheet{animation:kz-sheet .42s cubic-bezier(.2,1.15,.35,1)}
.kz-open.center .sheet{animation:kz-zoom .38s cubic-bezier(.2,1.3,.4,1)}
.kz-open.full .sheet{animation:kz-zoom .32s cubic-bezier(.2,.9,.3,1)}
.kz-closing{position:fixed;inset:0;z-index:31;pointer-events:none;animation:kz-fade .22s ease-in reverse forwards}
.kz-closing .kz-gsheet{animation:kz-sheet-out .22s ease-in forwards}
.kz-closing.center .kz-gsheet,.kz-closing.full .kz-gsheet{animation:kz-zoom .2s ease-in reverse forwards}
@keyframes kz-fade{from{opacity:0}to{opacity:1}}
@keyframes kz-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes kz-sheet-out{to{transform:translateY(100%)}}
@keyframes kz-zoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ---------- Aviso de abajo (toast): entra con rebote ---------- */
#toast{transition:opacity .25s,transform .45s cubic-bezier(.2,1.5,.4,1)}
#toast.kz-pr{font-family:var(--display);font-size:22px;letter-spacing:.5px;padding:12px 18px;border-color:var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px rgba(253,102,0,.45)}

/* ---------- Timer ---------- */
.tm-big.kz-beat{animation:kz-beat .5s cubic-bezier(.3,1.6,.5,1);color:var(--warn)}
@keyframes kz-beat{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
.tm-lbl.kz-round{animation:kz-pop .5s cubic-bezier(.3,1.8,.5,1)}
.kz-flashscreen{position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--accent);animation:kz-flash .9s ease-out forwards}
@keyframes kz-flash{0%{opacity:.85}100%{opacity:0}}
.tm-end .tm-big{animation:kz-pop .6s .15s cubic-bezier(.3,1.8,.5,1) both}

/* Papelitos del PR */
#kz-confetti{position:fixed;inset:0;z-index:70;pointer-events:none}

/* Login: el logo de Google entra suave */
.gbtn{animation:kz-up .5s .2s cubic-bezier(.2,.8,.2,1) both}
}