/**
 * FairPlace Animations — CSS
 *
 * Classes disponibles pour vos blocs WordPress (Spectra / Gutenberg) :
 *
 *   .fpa-reveal            — Fade-in + slide-up au scroll (GSAP)
 *   .fpa-reveal-left       — Slide-in depuis la gauche
 *   .fpa-reveal-right      — Slide-in depuis la droite
 *   .fpa-stagger           — Anime les enfants directs en cascade
 *   .fpa-card-hover        — Hover lift + shadow sur les cards
 *   .fpa-btn-gold          — Bouton gradient doré avec glow au hover
 *   .fpa-float              — Animation de flottement vertical
 *   .fpa-parallax           — Parallax léger au scroll (GSAP)
 *   .fpa-marquee            — Défilement horizontal continu (marquee)
 *
 * Attributs data :
 *   data-delay="100"       — Délai en ms avant le déclenchement (sur .fpa-reveal)
 */

/* ===========================
   Reveal on scroll (GSAP sets initial opacity:0 via JS for below-fold elements only)
   CSS no longer hides elements — this prevents CLS on above-the-fold content.
   The .fpa-animate-in class is used as fallback when GSAP is absent.
   =========================== */
.fpa-reveal.fpa-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.fpa-reveal-left.fpa-animate-in {
    opacity: 1;
    transform: translateX(0);
}

.fpa-reveal-right.fpa-animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Delay variants via data attribute (CSS fallback) */
.fpa-reveal[data-delay="100"],
.fpa-reveal-left[data-delay="100"],
.fpa-reveal-right[data-delay="100"] { transition-delay: 100ms; }

.fpa-reveal[data-delay="200"],
.fpa-reveal-left[data-delay="200"],
.fpa-reveal-right[data-delay="200"] { transition-delay: 200ms; }

.fpa-reveal[data-delay="300"],
.fpa-reveal-left[data-delay="300"],
.fpa-reveal-right[data-delay="300"] { transition-delay: 300ms; }

.fpa-reveal[data-delay="400"],
.fpa-reveal-left[data-delay="400"],
.fpa-reveal-right[data-delay="400"] { transition-delay: 400ms; }

/* ===========================
   Stagger children
   =========================== */
/* Stagger: GSAP hides children via JS for below-fold parents only */
.fpa-stagger.fpa-animate-in > *:nth-child(1) { transition-delay: 0.1s; }
.fpa-stagger.fpa-animate-in > *:nth-child(2) { transition-delay: 0.2s; }
.fpa-stagger.fpa-animate-in > *:nth-child(3) { transition-delay: 0.3s; }
.fpa-stagger.fpa-animate-in > *:nth-child(4) { transition-delay: 0.4s; }
.fpa-stagger.fpa-animate-in > *:nth-child(5) { transition-delay: 0.5s; }
.fpa-stagger.fpa-animate-in > *:nth-child(6) { transition-delay: 0.6s; }
.fpa-stagger.fpa-animate-in > * {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   Card hover lift + shadow
   =========================== */
.fpa-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fpa-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(7, 49, 46, 0.15);
}

/* ===========================
   Gold gradient button with glow
   =========================== */
.fpa-btn-gold {
    background: linear-gradient(135deg, #d08e3d, #e0a95c);
    color: #fff;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fpa-btn-gold:hover {
    box-shadow: 0 8px 25px -5px rgba(208, 142, 61, 0.45);
    transform: translateY(-2px);
    color: #fff;
}

/* ===========================
   Float animation (vertical bob)
   =========================== */
.fpa-float {
    animation: fpaFloat 6s ease-in-out infinite;
}
@keyframes fpaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ===========================
   Parallax (GSAP handles movement — this adds will-change)
   =========================== */
.fpa-parallax {
    will-change: transform;
}

/* ===========================
   Marquee (continuous horizontal scroll)
   =========================== */
.fpa-marquee {
    position: relative;
    overflow: hidden;
}
.fpa-marquee-track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: fpaMarquee 22s linear infinite;
    opacity: 0.8;
}
.fpa-marquee:hover .fpa-marquee-track {
    animation-play-state: paused;
}
@keyframes fpaMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===========================
   FAQ accordion chevron
   =========================== */
.fpa-accordion details summary::-webkit-details-marker { display: none; }
.fpa-accordion details summary { list-style: none; }
.fpa-accordion details[open] summary .fpa-chevron { transform: rotate(180deg); }
.fpa-chevron {
    transition: transform 0.3s ease;
}

/* ===========================
   Scrollspy active link
   =========================== */
.fpa-nav-active {
    color: #d08e3d !important;
    font-weight: 600;
}

/* ===========================
   Scroll progress bar (injected via PHP)
   =========================== */
#fpa-scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    z-index: 9999;
    background: linear-gradient(90deg, #d08e3d, #e0a95c);
    transition: width 100ms linear;
    pointer-events: none;
}

/* ===========================
   Reduced motion — respect user preferences
   =========================== */
@media (prefers-reduced-motion: reduce) {
    .fpa-reveal,
    .fpa-reveal-left,
    .fpa-reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .fpa-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .fpa-float {
        animation: none;
    }
    .fpa-marquee-track {
        animation: none;
    }
    .fpa-card-hover:hover {

/* ===========================
   CLS Fix — Stabilise layout on first paint
   =========================== */

/* Hero container: reserve vertical space */
.uagb-block-a1b2c3d1.uagb-is-root-container {
    min-height: 520px;
    contain: layout style;
}
@media (max-width: 768px) {
    .uagb-block-a1b2c3d1.uagb-is-root-container {
        min-height: 600px;
    }
}

/* Shape divider: absolute positioning to avoid reflow */
.uagb-container__shape {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    contain: layout size style;
}
.uagb-container__shape svg {
    display: block;
    width: 100%;
}
.uagb-container__shape-bottom {
    bottom: 0;
}

/* Auth buttons in header: reserve space */
.fpauth-buttons-inline {
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Stabilise header height */
.site-header {
    min-height: 80px;
}
.site-primary-header-wrap {
    min-height: 80px;
}
.ast-primary-header-bar {
    min-height: 80px;
}

/* Disable Astra header transitions during initial paint */
.ast-above-header,
.main-header-bar,
.ast-below-header {
    transition: background-color 0.2s linear, box-shadow 0.2s linear !important;
}

/* All root Spectra containers: stable layout */
.uagb-is-root-container {
    contain: layout style;
}