/**
 * utilities.css — Animations CSS au scroll
 *
 * @package HCS_Theme
 * @version 2.0.0 — IntersectionObserver driven
 *
 * ─────────────────────────────────────────────────────
 * TECHNIQUE : IntersectionObserver (JS) + @keyframes CSS
 *
 * Le JS (animations.js) observe tous les éléments portant
 * une classe .anim-* et ajoute .in-view au bon moment.
 * Les animations CSS se déclenchent sur .anim-*.in-view.
 *
 * Compatible : tous navigateurs, Elementor, caches/minifiers.
 * ─────────────────────────────────────────────────────
 *
 * UTILISATION (classes dans "Classes CSS" Elementor) :
 *
 *   Éléments ABOVE THE FOLD (hero, visible au chargement)
 *   → anim-hero-title  anim-subtitle  anim-pop
 *
 *   Éléments BELOW THE FOLD (toutes les autres sections)
 *   → anim-fade-up     anim-fade      anim-slide-left
 *   → anim-slide-right anim-zoom-in   anim-blur
 *   → anim-reveal      anim-section-title
 *
 *   Modificateurs de délai (empilables) :
 *   → anim-delay-1 … anim-delay-8
 *
 *   Cascade automatique sur les enfants :
 *   → anim-stagger  (mettre sur le conteneur parent)
 * ─────────────────────────────────────────────────────
 */

/* =============================================
   CONFIGURATION GLOBALE
   ============================================= */

:root {
    --anim-duration:    1.1s;
    --anim-easing:      cubic-bezier(0.16, 1, 0.3, 1);
    --anim-easing-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --anim-distance:    40px;
    --anim-distance-sm: 20px;
    --anim-distance-lg: 80px;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    [class*="anim-"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
    }
}


/* =============================================
   @KEYFRAMES
   ============================================= */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(var(--anim-distance)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(calc(var(--anim-distance) * -1)); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(var(--anim-distance)); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes zoomOut {
    from { opacity: 0; transform: scale(1.1); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes reveal {
    from { clip-path: inset(100% 0% 0% 0%); opacity: 0; }
    to   { clip-path: inset(0% 0% 0% 0%);   opacity: 1; }
}

@keyframes blurFocus {
    from { opacity: 0; filter: blur(12px); transform: translateY(var(--anim-distance-sm)); }
    to   { opacity: 1; filter: blur(0px);  transform: translateY(0); }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.7); }
    50%  {             transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes rotateIn {
    from { opacity: 0; transform: rotate(-4deg) translateY(var(--anim-distance)); }
    to   { opacity: 1; transform: rotate(0deg)  translateY(0); }
}

@keyframes lineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(30px); box-shadow: 0 0 0 rgba(0,0,0,0); }
    to   { opacity: 1; transform: translateY(0);    box-shadow: 0 8px 40px rgba(0,0,0,0.08); }
}


/* =============================================
   ÉTAT INITIAL — ÉLÉMENTS CACHÉS (below fold)
   Les classes scroll démarrent invisibles.
   .in-view est ajouté par animations.js.
   ============================================= */

.anim-fade-up,
.anim-fade-down,
.anim-fade,
.anim-slide-left,
.anim-slide-right,
.anim-zoom-in,
.anim-zoom-out,
.anim-reveal,
.anim-blur,
.anim-rise,
.anim-rotate,
.anim-card,
.anim-section-title,
.anim-section-text,
.anim-section-image,
.anim-section-pop {
    opacity: 0;
    will-change: opacity, transform;
}

/* Stagger : les enfants partent cachés */
.anim-stagger > *,
.anim-stagger-left > * {
    opacity: 0;
    will-change: opacity, transform;
}


/* =============================================
   DÉCLENCHEMENT — CLASSE .in-view
   Ajoutée par IntersectionObserver (animations.js)
   ============================================= */

.anim-fade-up.in-view {
    animation: fadeUp var(--anim-duration) var(--anim-easing) both;
}

.anim-fade-down.in-view {
    animation: fadeDown var(--anim-duration) var(--anim-easing) both;
}

.anim-fade.in-view {
    animation: fadeIn var(--anim-duration) var(--anim-easing-soft) both;
}

.anim-slide-left.in-view {
    animation: slideLeft var(--anim-duration) var(--anim-easing) both;
}

.anim-slide-right.in-view {
    animation: slideRight var(--anim-duration) var(--anim-easing) both;
}

.anim-zoom-in.in-view {
    animation: zoomIn var(--anim-duration) var(--anim-easing) both;
}

.anim-zoom-out.in-view {
    animation: zoomOut var(--anim-duration) var(--anim-easing) both;
}

.anim-reveal.in-view {
    animation: reveal 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.anim-blur.in-view {
    animation: blurFocus 0.9s var(--anim-easing) both;
}

.anim-rise.in-view {
    animation: fadeUp 1s var(--anim-easing) both;
    --anim-distance: var(--anim-distance-lg);
}

.anim-rotate.in-view {
    animation: rotateIn 0.8s var(--anim-easing) both;
    transform-origin: left bottom;
}

.anim-card.in-view {
    animation: cardEnter 0.8s var(--anim-easing) both;
}

/* Aliases sections */
.anim-section-title.in-view {
    animation: fadeUp var(--anim-duration) var(--anim-easing-soft) both;
}

.anim-section-text.in-view {
    animation: fadeUp 0.7s var(--anim-easing-soft) both;
}

.anim-section-image.in-view {
    animation: zoomIn 1s var(--anim-easing) both;
}

.anim-section-pop.in-view {
    animation: popIn 0.5s var(--anim-easing) both;
}


/* =============================================
   STAGGER — CASCADE SUR LES ENFANTS
   Classe sur le conteneur parent.
   ============================================= */

.anim-stagger.in-view > * {
    animation: fadeUp var(--anim-duration) var(--anim-easing) both;
}

.anim-stagger.in-view > *:nth-child(1)  { animation-delay: 0s;    }
.anim-stagger.in-view > *:nth-child(2)  { animation-delay: 0.08s; }
.anim-stagger.in-view > *:nth-child(3)  { animation-delay: 0.16s; }
.anim-stagger.in-view > *:nth-child(4)  { animation-delay: 0.24s; }
.anim-stagger.in-view > *:nth-child(5)  { animation-delay: 0.32s; }
.anim-stagger.in-view > *:nth-child(6)  { animation-delay: 0.40s; }
.anim-stagger.in-view > *:nth-child(7)  { animation-delay: 0.48s; }
.anim-stagger.in-view > *:nth-child(8)  { animation-delay: 0.56s; }
.anim-stagger.in-view > *:nth-child(9)  { animation-delay: 0.64s; }
.anim-stagger.in-view > *:nth-child(10) { animation-delay: 0.72s; }
.anim-stagger.in-view > *:nth-child(11) { animation-delay: 0.80s; }
.anim-stagger.in-view > *:nth-child(12) { animation-delay: 0.88s; }

.anim-stagger-left.in-view > * {
    animation: slideLeft var(--anim-duration) var(--anim-easing) both;
}

.anim-stagger-left.in-view > *:nth-child(1) { animation-delay: 0s;   }
.anim-stagger-left.in-view > *:nth-child(2) { animation-delay: 0.1s; }
.anim-stagger-left.in-view > *:nth-child(3) { animation-delay: 0.2s; }
.anim-stagger-left.in-view > *:nth-child(4) { animation-delay: 0.3s; }
.anim-stagger-left.in-view > *:nth-child(5) { animation-delay: 0.4s; }
.anim-stagger-left.in-view > *:nth-child(6) { animation-delay: 0.5s; }


/* =============================================
   MODIFICATEURS DE DÉLAI
   ============================================= */

.anim-delay-1.in-view { animation-delay: 0.1s !important; }
.anim-delay-2.in-view { animation-delay: 0.2s !important; }
.anim-delay-3.in-view { animation-delay: 0.3s !important; }
.anim-delay-4.in-view { animation-delay: 0.4s !important; }
.anim-delay-5.in-view { animation-delay: 0.5s !important; }
.anim-delay-6.in-view { animation-delay: 0.6s !important; }
.anim-delay-7.in-view { animation-delay: 0.7s !important; }
.anim-delay-8.in-view { animation-delay: 0.8s !important; }


/* =============================================
   MODIFICATEURS DE DURÉE
   ============================================= */

.anim-fast.in-view   { animation-duration: 0.4s !important; }
.anim-normal.in-view { animation-duration: 0.7s !important; }
.anim-slow.in-view   { animation-duration: 1.2s !important; }
.anim-slower.in-view { animation-duration: 1.8s !important; }


/* =============================================
   ABOVE THE FOLD — ANIMATIONS AU CHARGEMENT
   Pas de .in-view : se déclenchent immédiatement.
   Hero section, boutons, paragraphe intro.
   ============================================= */

.anim-hero-title {
    animation: reveal 1.1s cubic-bezier(0.76, 0, 0.24, 1) 0.1s both;
}

.anim-subtitle {
    animation: fadeUp 0.9s var(--anim-easing) 0.35s both;
}

.anim-paragraph {
    animation: fadeUp 0.7s var(--anim-easing-soft) 0.2s both;
}

.anim-image {
    animation: zoomIn 1s var(--anim-easing) 0.1s both;
}

.anim-pop {
    animation: popIn 0.5s var(--anim-easing) 0.5s both;
}


/* =============================================
   EFFETS DÉCORATIFS (indépendants du scroll)
   ============================================= */

/* Soulignement animé */
.anim-underline {
    position: relative;
    display: inline-block;
}

.anim-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--anim-easing);
}

.anim-underline.in-view::after {
    transform: scaleX(1);
}

.anim-underline-accent::after {
    background-color: #FF3D00;
    height: 3px;
    bottom: -6px;
}

/* Trait qui se trace */
.anim-line {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s var(--anim-easing-soft);
}

.anim-line.in-view {
    transform: scaleX(1);
}

.anim-line-right {
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 1s var(--anim-easing-soft);
}

.anim-line-right.in-view {
    transform: scaleX(1);
}

/* Parallax léger (hover uniquement, pas scroll) */
.anim-parallax-sm {
    transition: transform 0.3s ease;
}


/* =============================================
   ANIMATION MOT PAR MOT
   Structure HTML requise :
   <h2 class="anim-words">
     <span class="word"><span class="word-inner">Chaque</span></span>
     <span class="word"><span class="word-inner">mot</span></span>
   </h2>
   ============================================= */

.anim-words .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.anim-words .word-inner {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s var(--anim-easing), opacity 0.4s ease;
}

.anim-words.in-view .word-inner {
    transform: translateY(0);
    opacity: 1;
}

.anim-words.in-view .word:nth-child(1)  .word-inner { transition-delay: 0.00s; }
.anim-words.in-view .word:nth-child(2)  .word-inner { transition-delay: 0.05s; }
.anim-words.in-view .word:nth-child(3)  .word-inner { transition-delay: 0.10s; }
.anim-words.in-view .word:nth-child(4)  .word-inner { transition-delay: 0.15s; }
.anim-words.in-view .word:nth-child(5)  .word-inner { transition-delay: 0.20s; }
.anim-words.in-view .word:nth-child(6)  .word-inner { transition-delay: 0.25s; }
.anim-words.in-view .word:nth-child(7)  .word-inner { transition-delay: 0.30s; }
.anim-words.in-view .word:nth-child(8)  .word-inner { transition-delay: 0.35s; }
.anim-words.in-view .word:nth-child(9)  .word-inner { transition-delay: 0.40s; }
.anim-words.in-view .word:nth-child(10) .word-inner { transition-delay: 0.45s; }
.anim-words.in-view .word:nth-child(11) .word-inner { transition-delay: 0.50s; }
.anim-words.in-view .word:nth-child(12) .word-inner { transition-delay: 0.55s; }


/* =============================================
   OVERFLOW HELPER
   ============================================= */

.anim-overflow-hidden {
    overflow: hidden;
}


/* =============================================
   DÉSACTIVATION COMPLÈTE SUR MOBILE
   Toutes les animations sont neutralisées
   en dessous de 1024px.
   ============================================= */

@media (max-width: 1024px) {
    [class*="anim-"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
    }

    [class*="anim-"] * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}