/* ==========================================================================
   FLORISTERÍA LAUXAN · ANIMACIONES & TRANSICIONES CINEMATOGRÁFICAS
   Inspiración: Editorial de alta costura botánica, fluida y no invasiva.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REVEAL DE IMÁGENES MEDIANTE MÁSCARAS (CLIP-PATH)
   -------------------------------------------------------------------------- */
.reveal-image {
    position: relative;
    overflow: hidden;
}

.reveal-image img {
    will-change: transform;
}

/* Efecto telón suave para carga progresiva */
.reveal-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-bg);
    z-index: 2;
    transform-origin: top;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
}

.reveal-image.is-inview::after {
    transform: scaleY(0);
}

/* --------------------------------------------------------------------------
   2. ANIMACIÓN POR PALABRAS DEL TITULAR HERO
   -------------------------------------------------------------------------- */
.hero-headline .headline-word {
    display: inline-block;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(35px) rotate(2deg);
}

/* --------------------------------------------------------------------------
   3. ANIMACIONES DE ENTRADA AL VIEWPORT (CLASES GSAP/SCROLL)
   -------------------------------------------------------------------------- */
.fade-up-element {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   4. EFECTOS HOVER PERSONALIZADOS
   -------------------------------------------------------------------------- */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

/* --------------------------------------------------------------------------
   5. PARALLAX DE IMÁGENES
   -------------------------------------------------------------------------- */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   6. RESPALDO ACCESIBILIDAD: PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@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;
    }

    .hero-headline .headline-word,
    .fade-up-element {
        opacity: 1 !important;
        transform: none !important;
    }

    .reveal-image::after {
        display: none !important;
    }

    .hero-bg-img {
        transform: none !important;
    }

    .scroll-wheel {
        animation: none !important;
    }

    .hint-pulse {
        animation: none !important;
    }
}