/* ============================================================
   ANIMACIONES - Transiciones, keyframes y efectos
   Estilo Webflow: parallax, sticky, rotaciones y brillos
   conducidos por la posición de scroll (variable --p).
   ============================================================ */

/* ---------- KEYFRAMES BÁSICOS ---------- */
@keyframes aparecerSuave {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes aparecerIzquierda {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes aparecerDerecha {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes aparecerEscala {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes aparecerModal {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes revelar3D {
    from {
        opacity: 0;
        transform: perspective(900px) rotateX(20deg) translateY(60px);
    }
    to {
        opacity: 1;
        transform: perspective(900px) rotateX(0) translateY(0);
    }
}

/* ---------- KEYFRAMES DE BRILLO / MOVIMIENTO SUTIL ---------- */
@keyframes flotarSuave {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes brillarHalo {
    0%, 100% { opacity: 0.35; transform: scale(1) rotate(0); }
    50%      { opacity: 0.6;  transform: scale(1.06) rotate(8deg); }
}

@keyframes barrido {
    0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translateX(220%)  skewX(-18deg); opacity: 0; }
}

@keyframes gradienteAnimado {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ============================================================
   CLASES DE REVELADO (IntersectionObserver añade .visible)
   ============================================================ */
.anim-aparecer,
.anim-izquierda,
.anim-derecha,
.anim-escala,
.anim-revelar {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
                transform 0.9s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}

.anim-aparecer  { transform: translateY(40px); }
.anim-izquierda { transform: translateX(-60px); }
.anim-derecha   { transform: translateX(60px); }
.anim-escala    { transform: scale(.85); }
.anim-revelar   { transform: perspective(900px) rotateX(18deg) translateY(40px); }

.anim-aparecer.visible,
.anim-izquierda.visible,
.anim-derecha.visible,
.anim-escala.visible {
    opacity: 1;
    transform: none;
}

.anim-revelar.visible {
    opacity: 1;
    transform: perspective(900px) rotateX(0) translateY(0);
}

/* Retrasos escalonados */
.retraso-1 { transition-delay: 0.10s; }
.retraso-2 { transition-delay: 0.20s; }
.retraso-3 { transition-delay: 0.30s; }
.retraso-4 { transition-delay: 0.40s; }
.retraso-5 { transition-delay: 0.50s; }
.retraso-6 { transition-delay: 0.60s; }

/* ============================================================
   SCROLL-DRIVEN (consumen --p de [data-paralaje])
   --p:          0 al entrar por abajo → 1 al salir por arriba
   --p-centrado: -1 al entrar → 0 al centro → 1 al salir
   ============================================================ */

[data-paralaje] {
    transform: translateZ(0);
}

/* Traslación vertical conducida por scroll */
.par-trasladar {
    transform: translate3d(
        calc(var(--p-x, 0px) * var(--p-centrado, 0)),
        calc(var(--p-velocidad, 0.25) * var(--p-centrado, 0) * -120px),
        0
    );
}

/* Rotación conducida por scroll */
.par-rotar {
    transform: rotate(calc(var(--p-rotacion, 90deg) * var(--p, 0)));
}

/* Traslación + rotación */
.par-flotar {
    transform:
        translate3d(0, calc(var(--p-velocidad, 0.3) * var(--p-centrado, 0) * -80px), 0)
        rotate(calc(var(--p-rotacion, 20deg) * var(--p-centrado, 0)));
}

/* Escala conducida por scroll (efecto zoom suave al pasar) */
.par-escalar {
    transform: scale(calc(1 + var(--p-escala, 0.1) * var(--p-centrado, 0)));
}

/* Brillo / saturación conducidos por scroll */
.par-brillar {
    filter:
        brightness(calc(1 + var(--p-brillo, 0.6) * var(--p, 0) * 0.6))
        saturate(calc(1 + var(--p-brillo, 0.6) * var(--p, 0)));
}

/* Glow exterior conducido por scroll */
.par-glow {
    box-shadow:
        0 0 calc(20px + var(--p, 0) * 60px)
        calc(var(--p, 0) * 6px)
        rgba(16, 185, 129, calc(0.15 + var(--p, 0) * 0.45));
}

/* Halo radial detrás de un elemento (usa --p, sin blur por rendimiento) */
.par-halo {
    position: relative;
    isolation: isolate;
}
.par-halo::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%,
        rgba(16, 185, 129, calc(0.25 + var(--p, 0) * 0.25)),
        transparent 65%);
    opacity: calc(0.6 + var(--p, 0) * 0.4);
    pointer-events: none;
}

/* Texto que se "desvanece hacia arriba" al hacer scroll */
.par-desvanecer {
    opacity: calc(1 - var(--p, 0) * 1.4);
    transform: translate3d(0, calc(var(--p, 0) * -60px), 0);
}

/* ============================================================
   ELEMENTOS STICKY (anidados durante el scroll)
   ============================================================ */
.sticky-foto {
    position: sticky;
    top: 96px;
    align-self: start;
}

.sticky-titulo {
    position: sticky;
    top: 96px;
    z-index: 2;
}

/* ============================================================
   FONDO DECORATIVO (blobs animados conducidos por scroll)
   ============================================================ */
.fondo-decorativo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.25;
    transition: transform .8s ease-out;
}

.blob--1 {
    width: 420px; height: 420px;
    top: -100px; left: -100px;
    background: radial-gradient(circle, #10b981, transparent 70%);
    transform: translate3d(
        calc(var(--scroll-progreso, 0) * 80px),
        calc(var(--scroll-progreso, 0) * 200px),
        0);
}

.blob--2 {
    width: 360px; height: 360px;
    top: 40vh; right: -120px;
    background: radial-gradient(circle, #7c3aed, transparent 70%);
    transform: translate3d(
        calc(var(--scroll-progreso, 0) * -120px),
        calc(var(--scroll-progreso, 0) * -120px),
        0);
}

.blob--3 {
    width: 300px; height: 300px;
    bottom: -80px; left: 40%;
    background: radial-gradient(circle, #0891b2, transparent 70%);
    transform: translate3d(
        calc(var(--scroll-progreso, 0) * -60px),
        calc(var(--scroll-progreso, 0) * -180px),
        0);
}

/* ============================================================
   EFECTOS UTILITARIOS
   ============================================================ */
.con-hover-elevar {
    transition: transform var(--transicion-base), box-shadow var(--transicion-base);
}
.con-hover-elevar:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Texto con gradiente animado (lento, decorativo, no perpetuo agresivo) */
.texto-degradado-animado {
    background: linear-gradient(90deg, #34d399, #10b981, #7c3aed, #34d399);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradienteAnimado 8s ease-in-out infinite;
}

/* ============================================================
   TILT 3D (cursor) — consume --tilt-x / --tilt-y de animaciones.js
   ============================================================ */
[data-tilt] {
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

[data-tilt].tilt-activo {
    transform: perspective(800px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transition: transform .12s linear;
}

/* Reflejo que sigue al cursor en tarjetas con tilt */
.tilt-reflejo {
    position: relative;
    /* overflow: hidden; */
}
.tilt-reflejo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--tilt-mx, 50%) var(--tilt-my, 50%),
        rgba(255,255,255,0.10),
        transparent 50%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}
.tilt-reflejo.tilt-activo::before { opacity: 1; }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-paralaje] { transform: none !important; filter: none !important; }
    .blob { display: none; }
}