/* ─── GSAP Animator for Bricks — Estilos base ─────────────────────────────── */

/*
 * No se ocultan elementos via CSS: gsap.fromTo() aplica el estado inicial
 * (oculto) de forma inmediata con immediateRender, antes de que ScrollTrigger
 * dispare. El CSS que oculta conflictúa con el "to" que GSAP intenta leer.
 */

/*
 * Splitting.js: cada unidad (char / word / line) necesita display inline-block
 * para que el slide desde abajo no desborde visualmente el contenedor.
 * El wrapper .word y .line que genera Splitting necesita overflow:hidden.
 */
.ga-chars .char,
.ga-words .word,
.ga-lines .line {
    display: inline-block;
}

/* Máscara para el efecto slide-up: oculta el desplazamiento inicial */
.ga-words .word,
.ga-lines .line {
    overflow: hidden;
    vertical-align: bottom; /* evita gap extra por line-height */
}

/*
 * will-change se gestiona dinámicamente desde animator.js:
 * se activa justo antes de la animación y se limpia en onComplete,
 * liberando memoria de GPU cuando el elemento ya terminó de animar.
 */

/* ─── Gradient Typography ───────────────────────────────────────────────────── */

/*
 * @property permite que el navegador interpole los colores como tipo <color>,
 * habilitando que GSAP anime --ga-grad-c1 / --ga-grad-c2 suavemente.
 * Fallback en navegadores sin soporte: GSAP asigna el valor sin transición.
 */
@property --ga-grad-c1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #c40075;
}
@property --ga-grad-c2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff6fb5;
}

/* Gradiente estático — colores configurados desde el panel de ajustes */
.ga-text-gradient {
    background-image: linear-gradient(
        var(--ga-gradient-angle, 90deg),
        var(--ga-gradient-left,  #c40075) 0%,
        var(--ga-gradient-right, #ff6fb5) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-font-smoothing: antialiased;
}

/* Flujo continuo CSS — el gradiente se desplaza en bucle sin JS extra */
@keyframes ga-gradient-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.ga-text-gradient-flow {
    background-image: linear-gradient(
        var(--ga-gradient-angle, 90deg),
        var(--ga-gradient-left,  #c40075),
        var(--ga-gradient-right, #ff6fb5),
        var(--ga-gradient-left,  #c40075),
        var(--ga-gradient-right, #ff6fb5),
        var(--ga-gradient-left,  #c40075)
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-font-smoothing: antialiased;
    animation: ga-gradient-flow 3s linear infinite;
}

.ga-text-gradient-flow.ga-loop-slow { animation-duration: 6s; }
.ga-text-gradient-flow.ga-loop-fast { animation-duration: 1.5s; }

/*
 * Cicla colores como .ga-bg-fade — usa la paleta de fondos animados.
 * GSAP anima --ga-grad-c1 y --ga-grad-c2 gracias a @property arriba.
 * Soporta data-ga-colors y .ga-loop-slow / .ga-loop-fast.
 */
.ga-text-gradient-fade {
    background-image: linear-gradient(
        var(--ga-gradient-angle, 90deg),
        var(--ga-grad-c1, #c40075) 0%,
        var(--ga-grad-c2, #ff6fb5) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-font-smoothing: antialiased;
}

/* ─── Hover Cards Animation ───────────────────────────────────────────────── */

[data-gsap-hover-cards], .gsap-hover-cards {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow: hidden;
    min-height: 300px;
}

.gsap-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    flex: 1 1 0%;
    min-width: 0;
    cursor: pointer;
    /* La expansión la maneja el navegador via CSS transition — más confiable que GSAP
       para flex-grow en contextos donde Bricks controla el layout */
    transition:
        flex       var(--ga-expand-dur,   0.55s) cubic-bezier(0.77, 0, 0.175, 1),
        opacity    var(--ga-expand-dur,   0.55s) ease;
}

/* Card expandida al hover */
.gsap-card.is-active {
    flex: var(--ga-expanded-flex, 4) 1 0%;
}

/* Cards no activas se atenúan mientras hay una activa */
.gsap-hover-cards.has-active .gsap-card:not(.is-active) {
    opacity: 0.7;
}

.gsap-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gsap-card__image-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gsap-card__icon {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11; /* sobre el overlay (z-index: 10) para que se vea siempre */
    color: white;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    transform-origin: center;
    /* Fondo semitransparente que garantiza visibilidad sobre cualquier imagen o SVG */
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    backdrop-filter: blur(4px);
}

.gsap-card__overlay {
    position: absolute;
    inset: 0;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    z-index: 10;
    background-color: rgba(97, 97, 97, 0.535);
    /* Bricks re-agrega bricks-lazy-hidden via IntersectionObserver y su CSS usa
       visibility:hidden !important, lo que gana sobre los inline styles de GSAP.
       Forzamos visibility:visible aquí y delegamos la ocultación solo a opacity. */
    visibility: visible !important;
    pointer-events: none; /* el overlay invisible no captura eventos */
}

.gsap-card__title {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.gsap-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
    max-width: 38ch;
    margin: 0;
    padding: 0;
}

/* Responsive: ocultar en móvil */
@media (max-width: 768px) {
    [data-gsap-hover-cards], .gsap-hover-cards {
        display: none;
    }
}