/* ==========================================================================
   ANIMACIONES — ambientales, microinteracciones y entrada al hacer scroll
   [data-reveal]: los elementos entran al aparecer en pantalla (la clase .is-in
   la pone modules/reveal.js y se quita al salir, así se repite cada vez).
   Usan las propiedades independientes translate/scale para no chocar con los
   transform de :hover. La clase .js la añade assets/js/head.js.
   ========================================================================== */

/* ---------- Ambientales ---------- */
@keyframes vz-drift { 0% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-40px,28px,0) scale(1.16) } 100% { transform: translate3d(0,0,0) scale(1) } }
@keyframes vz-eq { 0%, 100% { transform: scaleY(.18) } 50% { transform: scaleY(1) } }

.vz-aurora { animation: vz-drift 20s ease-in-out infinite; }
.vz-bar { transform-origin: bottom center; animation: vz-eq 1.25s ease-in-out infinite; }

.vz-btn { transition: transform .3s ease, box-shadow .3s ease; }
.vz-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,121,232,.3); }

/* ---------- Entrada al hacer scroll ---------- */
.js [data-reveal] {
  --delay: 0ms;
  opacity: 0;
  translate: 0 44px;
  transition:
    opacity .8s var(--ease) var(--delay),
    translate .95s var(--ease) var(--delay),
    scale .95s var(--ease) var(--delay),
    transform .45s var(--ease),
    border-color .45s ease,
    box-shadow .45s ease,
    background-color .35s ease;
}
.js [data-reveal="left"]  { translate: -70px 0; }
.js [data-reveal="right"] { translate: 70px 0; }
.js [data-reveal="zoom"]  { translate: 0 24px; scale: .92; }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; }