/* Animaciones de entrada por scroll (todo el sitio). Las activa assets/js/animaciones.js.
   Sin JS, o con "reducir movimiento" activado en el sistema, el contenido se ve normal y sin animar. */

:root{--hp-ease:cubic-bezier(.22,1,.36,1)}

/* Evita el parpadeo del contenido antes de que el script prepare los elementos */
html.hp-js:not(.hp-ready) .bde-section:not([class*="bde-section-281"]) > .section-container{opacity:0}

/* 1 · Entrada suave hacia arriba (textos, botones, tarjetas) */
.hp-fx{opacity:0;translate:0 32px;transition:opacity .9s var(--hp-ease) var(--d,0ms),translate .9s var(--hp-ease) var(--d,0ms) !important;will-change:opacity,translate}
.hp-fx.hp-in{opacity:1;translate:0 0}

/* 2 · Títulos cinéticos: cada palabra sube desde una máscara */
.hp-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
.hp-wi{display:inline-block;translate:0 115%;transition:translate 1s var(--hp-ease);transition-delay:calc(var(--d,0ms) + var(--i,0)*45ms);will-change:translate}
.hp-in .hp-wi{translate:0 0}

/* 3 · Fotos: se descubren con una cortina, se asientan con un zoom y luego siguen el scroll (paralaje) */
.hp-reveal{overflow:hidden}
.hp-reveal.hp-armed{clip-path:inset(0 0 100% 0)}
.hp-reveal.hp-armed > img{scale:1.38;will-change:translate,scale}
.hp-reveal.hp-armed.hp-in{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--hp-ease) var(--d,0ms)}
.hp-reveal.hp-armed.hp-in > img{scale:1.14;transition:scale 1.8s var(--hp-ease) var(--d,0ms)}
/* la sombra del marco aparece junto con la foto */
.hp-shadow-wait{box-shadow:none !important}
.breakdance-image-container{transition:box-shadow 1s ease .5s}

/* Fotos sueltas (sin marco): solo cortina */
.hp-wipe{clip-path:inset(0 0 100% 0)}
.hp-wipe.hp-in{clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--hp-ease) var(--d,0ms)}