/* ==================================================================
   Home: capa de dinamismo (rama home-dinamica)
   Todo depende de html.h2-dyn (script en el <head>) y se apaga con
   "reducir movimiento".
   ================================================================== */

/* 1. Portada: la foto entra alejandose y el titulo sube desde abajo */
.h2-dyn .h2-hero-media img {
    animation: h2d-zoom 1.6s cubic-bezier(0.16, 1, 0.3, 1) both, h2-drift 24s ease-in-out 1.6s infinite alternate;
}
@keyframes h2d-zoom {
    from { transform: scale(1.18); filter: brightness(0.6); }
    to { transform: scale(1); filter: none; }
}
/* parallax: la foto es un poco mas alta que su marco y baja mas lento que el scroll */
@media (min-width: 900px) {
    .h2-dyn .h2-hero-media img {
        height: 120%;
        translate: 0 calc(var(--hy, 0px) - 16%);
        will-change: transform, translate;
    }
}
.h2-dyn .h2-hero-text > * { animation: h2d-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.h2-dyn .h2-hero-text > .h2-kicker { animation-delay: 0.15s; }
.h2-dyn .h2-hero-text > .h2-display {
    animation-name: h2d-rise;
    animation-duration: 1.1s;
    animation-delay: 0.25s;
}
.h2-dyn .h2-hero-text > .h2-lead { animation-delay: 0.5s; }
.h2-dyn .h2-hero-text > .h2-actions { animation-delay: 0.65s; }
@keyframes h2d-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes h2d-rise {
    from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}
/* la entrada propia de la portada reemplaza a la general */
.h2-dyn .h2-motion .h2-hero-text[data-reveal] > * { transition: none; }
.h2-dyn .h2-motion .h2-hero-text[data-reveal]:not(.is-in) > * { opacity: 1; transform: none; }

/* 2. Balines que reaccionan al mouse (inclinacion 3D) */
@media (hover: hover) and (pointer: fine) {
    .h2-dyn .h2-prod.has-3d .h2-prod-media { perspective: 700px; }
    .h2-dyn .h2-prod.has-3d .h2-prod-3d {
        transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
        transition: transform 0.25s ease-out, opacity 0.3s ease;
    }
    /* con la inclinacion, la lata ya no reemplaza al balin al pasar el mouse */
    .h2-dyn .h2 button.h2-prod.has-3d:hover .h2-prod-3d,
    .h2-dyn button.h2-prod.has-3d:hover .h2-prod-3d { opacity: 1; }
    .h2-dyn button.h2-prod.has-3d:hover .h2-prod-lata { width: 30%; }
    .h2-dyn button.h2-prod.has-3d .h2-prod-lata:hover { width: 100%; }
}

/* 3. Parallax de la foto de Air Boss */
.h2-dyn .h2-story-media { overflow: hidden; }
.h2-dyn .h2-story-media img {
    transform: translateY(var(--py, 0px)) scale(1.12);
    will-change: transform;
}