/**
 * Utilities CSS — Glazam Child Theme
 * Classes d'animation et utilitaires de layout.
 * @version 1.0.0
 */

/* ========================================
   FADE + MONTÉE AU SCROLL
   Usage : classe "anim-fade" sur un élément
   Variantes : "anim-fade anim-delay-2"
   ======================================== */
.anim-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-out),
                transform var(--anim-duration-base) var(--anim-ease-out);
}

.anim-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   FADE DE CÔTÉ
   Usage : "anim-fade-left" / "anim-fade-right"
   ======================================== */
.anim-fade-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-out),
                transform var(--anim-duration-base) var(--anim-ease-out);
}

.anim-fade-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-out),
                transform var(--anim-duration-base) var(--anim-ease-out);
}

.anim-fade-left.is-visible,
.anim-fade-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   ZOOM IMAGE AU SCROLL
   Usage : classe "anim-zoom" sur le conteneur
   ======================================== */
.anim-zoom {
    overflow: hidden;
}

.anim-zoom img,
.anim-zoom .wp-block-image img {
    transform: scale(1.07);
    transition: transform var(--anim-duration-slow) var(--anim-ease-out);
}

.anim-zoom.is-visible img,
.anim-zoom.is-visible .wp-block-image img {
    transform: scale(1);
}

/* ========================================
   REVEAL PAR LIGNE — titres hero
   Usage HTML :
   <div class="reveal-block">Ligne 1<br>Ligne 2</div>
   (animationsJS découpe en .reveal-line)
   ======================================== */
.reveal-line {
    display: block;
    overflow: hidden;
}

.reveal-line span {
    display: block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform var(--anim-duration-slow) var(--anim-ease-out),
                opacity 0.6s ease;
}

.reveal-line.is-visible span {
    transform: translateY(0);
    opacity: 1;
}

.reveal-line:nth-child(2) span { transition-delay: 0.1s; }
.reveal-line:nth-child(3) span { transition-delay: 0.2s; }
.reveal-line:nth-child(4) span { transition-delay: 0.3s; }

/* ========================================
   COMPTEUR ANIMÉ
   Usage : <span class="anim-counter" data-target="250">0</span>
   data-suffix : "+", "%", "k"...
   ======================================== */
.anim-counter {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    font-family: var(--font-display);
    color: var(--color-navy);
}

/* ========================================
   DÉLAIS EN CASCADE
   ======================================== */
.anim-delay-1 { transition-delay: var(--anim-delay-1) !important; }
.anim-delay-2 { transition-delay: var(--anim-delay-2) !important; }
.anim-delay-3 { transition-delay: var(--anim-delay-3) !important; }
.anim-delay-4 { transition-delay: var(--anim-delay-4) !important; }
.anim-delay-5 { transition-delay: var(--anim-delay-5) !important; }

/* ========================================
   UTILITAIRES LAYOUT
   ======================================== */

/* Container pleine largeur avec padding */
.glazam-container {
    width: 100%;
    padding-left: var(--footer-padding-x);
    padding-right: var(--footer-padding-x);
    box-sizing: border-box;
}

/* Container centré avec max-width */
.glazam-container--narrow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Section spacings */
.glazam-section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.glazam-section--lg {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

/* Grid 2 colonnes standard */
.glazam-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

/* Grid 3 colonnes services */
.glazam-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 1024px) {
    .glazam-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .glazam-grid-2 {
        gap: var(--spacing-md);
    }
}

@media (max-width: 767px) {
    .glazam-container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .glazam-section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .glazam-grid-2,
    .glazam-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* ========================================
   SÉPARATEUR DÉCORATIF
   Usage : <hr class="glazam-sep">
   ======================================== */
.glazam-sep {
    border: none;
    border-top: 2px solid var(--color-primary);
    width: 48px;
    margin: 0;
}

/* ========================================
   TEXTE SURLIGNÉ CYAN
   Usage : <mark class="glazam-mark">mot</mark>
   ======================================== */
.glazam-mark {
    background: linear-gradient(0deg, rgba(0, 196, 204, 0.25) 40%, transparent 40%);
    color: inherit;
    padding: 0 2px;
}

/* ========================================
   ACCESSIBILITÉ — MOUVEMENT RÉDUIT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .reveal-line span,
    .anim-fade,
    .anim-fade-left,
    .anim-fade-right,
    .anim-zoom img,
    .anim-zoom .wp-block-image img {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}