/**
 * animations.css — Sistema de variables por sección + animaciones al scroll
 *
 * ARQUITECTURA:
 *  1. Cada sección se envuelve en <div class="section-block" style="--sec-bg:...; --sec-pt:...px; ...">
 *  2. sections.php escribe las variables CSS inline solo cuando el usuario las personalizó.
 *  3. Las reglas [style*="--sec-*"] aplican fondo/padding/color/ancho solo a esas secciones;
 *     el resto hereda del tema global.
 *  4. data-animate + data-animate-delay activan las animaciones de scroll via animations.js.
 */

/* ===== Wrapper .section-block (base) ===== */
.section-block {
    position: relative;
    display: block;
}

/* Fondo: solo cuando el usuario lo fijó */
.section-block[style*="--sec-bg"] {
    background: var(--sec-bg) !important;
}

/* Padding: solo cuando el usuario puso un valor numérico en px */
.section-block[style*="--sec-pt"] {
    padding-top: var(--sec-pt) !important;
}
.section-block[style*="--sec-pb"] {
    padding-bottom: var(--sec-pb) !important;
}
/* Cuando el wrapper toma el padding, anular el del <section> interno */
.section-block[style*="--sec-pt"] > section,
.section-block[style*="--sec-pt"] > .section {
    padding-top: 0 !important;
}
.section-block[style*="--sec-pb"] > section,
.section-block[style*="--sec-pb"] > .section {
    padding-bottom: 0 !important;
}

/* Color de texto */
.section-block[style*="--sec-text"] {
    color: var(--sec-text);
}

/* Ancho máximo del contenido */
.section-block[style*="--sec-max-width"] > .container,
.section-block[style*="--sec-max-width"] > section > .container,
.section-block[style*="--sec-max-width"] > div > .container {
    max-width: var(--sec-max-width);
}

/* ===== Neutralizar sistema antiguo de scroll-reveal (header.php opacity:0) =====
   Cuando una sección está dentro de .section-block, el wrapper maneja la animación.
   Se cancela el opacity:0 y la animation de fallback que emite header.php en el <style>
   inline, para que no interfieran con data-animate en el wrapper. */
.section-block > section,
.section-block > .section,
.section-block > .hero,
.section-block > .hero-carousel-section,
.section-block > .features-section,
.section-block > .split-section,
.section-block > .gallery-section,
.section-block > .banner-section,
.section-block > .stats-counter-section,
.section-block > .faq-accordion-section,
.section-block > .cta-fullwidth-section,
.section-block > .reserva-cta-section,
.section-block > .flujo-reserva-section,
.section-block > .video-hero-section,
.section-block > .newsletter-section,
.section-block > .about-section,
.section-block > .testimonials-section,
.section-block > .products-grid-section,
.section-block > .products-carousel-section,
.section-block > .categories-section,
.section-block > .horarios-bloque-section,
.section-block > .servicios-turnos-section,
.section-block > .reserva-cta-section,
.section-block > .profesionales-section,
.section-block > .preguntas-reserva-section,
.section-block > .countdown-section {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ===== Hero — carga progresiva ===== */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transition: filter 0.5s ease, opacity 0.5s ease;
}
.hero-bg.hero-bg-loading {
    filter: blur(8px);
    transform: scale(1.03);
    opacity: 0.85;
}
.hero-bg:not(.hero-bg-loading) {
    filter: none;
    transform: scale(1);
    opacity: 1;
}
/* Slide de hero carousel */
.carousel-slide {
    position: relative;
}
.carousel-slide .hero-bg {
    position: absolute;
    inset: 0;
}
.carousel-slide.hero-bg-loading .hero-bg {
    filter: blur(8px);
    transform: scale(1.03);
    opacity: 0.85;
}

/* ===== Animaciones al scroll (data-animate en .section-block) ===== */

/* Fade */
.section-block[data-animate="fade"] {
    opacity: 0;
    transition: opacity 0.65s ease;
}
.section-block[data-animate="fade"].is-visible {
    opacity: 1;
}

/* Fade Up (recomendado) */
.section-block[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.section-block[data-animate="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Down */
.section-block[data-animate="fade-down"] {
    opacity: 0;
    transform: translateY(-36px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.section-block[data-animate="fade-down"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left */
.section-block[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.section-block[data-animate="fade-left"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right */
.section-block[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.section-block[data-animate="fade-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Zoom In */
.section-block[data-animate="zoom-in"] {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.section-block[data-animate="zoom-in"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Delays (desde el editor visual, data-animate-delay en ms) */
.section-block[data-animate-delay="100"] { transition-delay: 0.1s; }
.section-block[data-animate-delay="200"] { transition-delay: 0.2s; }
.section-block[data-animate-delay="300"] { transition-delay: 0.3s; }
.section-block[data-animate-delay="400"] { transition-delay: 0.4s; }
.section-block[data-animate-delay="500"] { transition-delay: 0.5s; }
.section-block[data-animate-delay="600"] { transition-delay: 0.6s; }
.section-block[data-animate-delay="800"] { transition-delay: 0.8s; }

/* ===== Clases genéricas reveal (usadas por animations.js) ===== */
.reveal {
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible,
.reveal-up.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== Sin animación para la primera sección (above the fold) ===== */
/* La primera sección visible y las hero nunca deben estar ocultas al cargar */
.section-block:first-child[data-animate],
.section-block:first-of-type[data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .section-block[data-animate],
    .reveal,
    .reveal-up,
    .hero-bg,
    .hero-bg.hero-bg-loading {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}