/* Micro-animaciones del Inicio (2026-10-23), al estilo de la página de Skyline.
   No agrega ni saca nada de la página: solo anima lo que ya estaba. Con html[data-motion=reduced] queda todo quieto. */

/* ---------- título: las letras caen una por una y cada tanto hacen una ola ---------- */
/* Solo translateY/scaleY: el degradado de "Revitalizado." se mide con getBoundingClientRect().left y no debe correrse en X.
   Al terminar la caída manza-vida.js pone .vd-cayo; sin eso, al sacar la clase de la ola las letras volverían a caer. */
.inicio-hero.listo .t-h1:not(.vd-cayo) .l{animation:vdCae .95s cubic-bezier(.23,1,.32,1) backwards;animation-delay:calc(.12s + var(--i,0) * 55ms);transform-origin:50% 100%}
@keyframes vdCae{
  0%{transform:translateY(-.85em) scaleY(1.12);opacity:0}
  55%{transform:translateY(.05em) scaleY(.92);opacity:1}
  78%{transform:translateY(-.03em) scaleY(1.02)}
  100%{transform:none;opacity:1}
}
.inicio-hero.listo .t-h1 .l.vd-salta{animation:vdSalta .52s cubic-bezier(.23,1,.32,1)}
@keyframes vdSalta{40%{transform:translateY(-.13em) scaleY(1.04)}100%{transform:none}}

/* ---------- botones de invitar: barrido de brillo cada tanto ---------- */
.btn-invitar,.final-ctas .btn-solid{position:relative;overflow:hidden;isolation:isolate}
.btn-invitar::after,.final-ctas .btn-solid::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg) translateX(0);
  animation:vdBarrido 4.8s cubic-bezier(.77,0,.175,1) 2.4s infinite}
.final-ctas .btn-solid::after{background:linear-gradient(100deg,transparent,rgba(255,200,90,.55),transparent);animation-delay:1.2s}
@keyframes vdBarrido{0%,72%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(440%)}}

/* ---------- íconos que se animan al pasar el mouse o con el foco ---------- */
.mz-tile header .mz-ic,.rasgo svg.ic,.cifra > svg{transform-box:fill-box}
/* hero: moneda que gira, tilde del escudo que se dibuja, personas que saludan */
.rasgo[href="#economia"]:is(:hover,:focus-visible) svg.ic{animation:vdMoneda .7s cubic-bezier(.23,1,.32,1)}
.rasgo[href="#moderacion"] svg.ic path + path{stroke-dasharray:14;stroke-dashoffset:0}
.rasgo[href="#moderacion"]:is(:hover,:focus-visible) svg.ic{animation:vdPop .5s cubic-bezier(.23,1,.32,1)}
.rasgo[href="#moderacion"]:is(:hover,:focus-visible) svg.ic path + path{animation:vdTilde .55s .12s cubic-bezier(.23,1,.32,1) backwards}
.rasgo[href="#comunidad"]:is(:hover,:focus-visible) svg.ic{animation:vdSaludo .6s cubic-bezier(.23,1,.32,1)}
/* "Ver comandos": la flechita se escapa en diagonal */
.btn-sec svg{transition:transform .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .btn-sec:hover svg{transform:translate(3px,-3px)}
  /* cifras: personas que saludan, rayo que titila, calendario que da vuelta la hoja */
  .cifra:nth-child(1):hover > svg{animation:vdSaludo .6s cubic-bezier(.23,1,.32,1)}
  .cifra:nth-child(2):hover > svg{animation:vdRayo .5s steps(1,end)}
  .cifra:nth-child(3):hover > svg{animation:vdHoja .55s cubic-bezier(.23,1,.32,1)}
  /* mosaico "Y todo lo demás": cada tarjeta mueve su ícono a su manera */
  .mz-t-embed:hover header .mz-ic{animation:vdSaludo .6s cubic-bezier(.23,1,.32,1)}
  .mz-t-tickets:hover header .mz-ic,.mz-t-sorteo:hover header .mz-ic{animation:vdTambalea .6s cubic-bezier(.23,1,.32,1)}
  .mz-t-roles:hover header .mz-ic,.mz-t-pronto:hover header .mz-ic{animation:vdPop .5s cubic-bezier(.23,1,.32,1)}
  .mz-t-subasta:hover header .mz-ic{animation:vdGolpe .5s cubic-bezier(.23,1,.32,1);transform-origin:80% 80%}
  .mz-t-adivina:hover header .mz-ic{animation:vdMoneda .7s cubic-bezier(.23,1,.32,1)}
}
/* demos: el ícono de la pestaña elegida pega un saltito cada vez que la elegís */
.mz-tab[aria-selected="true"] .mz-ic{animation:vdPop .45s cubic-bezier(.23,1,.32,1)}

@keyframes vdMoneda{from{transform:perspective(200px) rotateY(0)}to{transform:perspective(200px) rotateY(360deg)}}
@keyframes vdPop{40%{transform:scale(1.18)}100%{transform:none}}
@keyframes vdTilde{from{stroke-dashoffset:14}}
@keyframes vdSaludo{25%{transform:translateY(-4px) rotate(-6deg)}55%{transform:translateY(0) rotate(4deg)}100%{transform:none}}
@keyframes vdTambalea{20%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}70%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes vdGolpe{40%{transform:rotate(-30deg)}70%{transform:rotate(8deg)}100%{transform:none}}
@keyframes vdRayo{0%,40%,80%{opacity:1}20%,60%{opacity:.25}}
@keyframes vdHoja{50%{transform:perspective(160px) rotateX(-60deg)}100%{transform:none}}

/* ---------- puntito de los títulos de sección: una onda que sale cada tanto ---------- */
.kicker-dot{position:relative}
.kicker-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:hsl(var(--gold-2,46 100% 62%));
  opacity:0;animation:vdOnda 2.6s cubic-bezier(.23,1,.32,1) infinite;pointer-events:none}
@keyframes vdOnda{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}

/* ---------- chips de Niveles: entran de a uno cuando aparece la sección ---------- */
.reveal.in .chip{animation:vdChip .55s cubic-bezier(.23,1,.32,1) backwards}
.reveal.in .chip:nth-child(1){animation-delay:.25s}
.reveal.in .chip:nth-child(2){animation-delay:.31s}
.reveal.in .chip:nth-child(3){animation-delay:.37s}
.reveal.in .chip:nth-child(4){animation-delay:.43s}
@keyframes vdChip{from{opacity:0;transform:translateY(8px) scale(.92)}}

/* ---------- dudas: la respuesta aparece suave al abrir ---------- */
.mz-duda[open] > :not(summary){animation:vdAbrir .4s cubic-bezier(.23,1,.32,1)}
@keyframes vdAbrir{from{opacity:0;transform:translateY(-6px);filter:blur(2px)}}

/* ---------- movimiento reducido (botón del sitio, no la config del sistema: decisión del dueño 2026-10-08) ---------- */
html[data-motion="reduced"] :is(.t-h1 .l,.rasgo svg.ic,.rasgo svg.ic path,.cifra > svg,.mz-tile .mz-ic,.mz-tab .mz-ic,.chip,.mz-duda > *){animation:none!important}
html[data-motion="reduced"] .btn-invitar::after,html[data-motion="reduced"] .final-ctas .btn-solid::after,html[data-motion="reduced"] .kicker-dot::after{display:none}