/* ================================================================
   INTERMÉDIA CONSULTING — ANIMATIONS
   public/css/animations.css
   ================================================================ */

/* ── Base : tous les éléments animables sont invisibles au départ ── */
[data-anim] {
    opacity: 0;
    will-change: opacity, transform;
}

/* ── Éléments visibles (après déclenchement) ── */
[data-anim].is-visible {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-duration: 0.75s;
}

/* ─────────────────────────────────────────────
   TYPES D'ANIMATIONS
   ───────────────────────────────────────────── */

/* Fondu simple */
[data-anim="fade"].is-visible {
    animation-name: animFade;
}
@keyframes animFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Montée depuis le bas */
[data-anim="up"].is-visible {
    animation-name: animUp;
}
@keyframes animUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Descente depuis le haut */
[data-anim="down"].is-visible {
    animation-name: animDown;
}
@keyframes animDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entrée depuis la gauche */
[data-anim="left"].is-visible {
    animation-name: animLeft;
}
@keyframes animLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Entrée depuis la droite */
[data-anim="right"].is-visible {
    animation-name: animRight;
}
@keyframes animRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Zoom depuis petit */
[data-anim="zoom"].is-visible {
    animation-name: animZoom;
}
@keyframes animZoom {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* Flip vertical (pages intérieures) */
[data-anim="flip"].is-visible {
    animation-name: animFlip;
}
@keyframes animFlip {
    from { opacity: 0; transform: rotateX(8deg) translateY(30px); }
    to   { opacity: 1; transform: rotateX(0) translateY(0); }
}

/* ─────────────────────────────────────────────
   DÉLAIS ÉCHELONNÉS (stagger)
   ───────────────────────────────────────────── */
[data-delay="1"] { animation-delay: 0.1s; }
[data-delay="2"] { animation-delay: 0.2s; }
[data-delay="3"] { animation-delay: 0.3s; }
[data-delay="4"] { animation-delay: 0.4s; }
[data-delay="5"] { animation-delay: 0.5s; }
[data-delay="6"] { animation-delay: 0.6s; }
[data-delay="7"] { animation-delay: 0.7s; }
[data-delay="8"] { animation-delay: 0.8s; }

/* ─────────────────────────────────────────────
   HERO ACCUEIL — animation d'entrée immédiate
   ───────────────────────────────────────────── */
.hero-eyebrow-anim {
    opacity: 0;
    animation: animDown 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
}
.hero-title-anim {
    opacity: 0;
    animation: animUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
}
.hero-text-anim {
    opacity: 0;
    animation: animUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.55s forwards;
}
.hero-cta-anim {
    opacity: 0;
    animation: animUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.7s forwards;
}
.hero-number-anim {
    opacity: 0;
    animation: animRight 1s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}

/* ─────────────────────────────────────────────
   PAGE INTÉRIEURE — animation d'entrée du header
   (À propos, Réseau, Services, Publications…)
   ───────────────────────────────────────────── */
.page-hero-content .eyebrow {
    opacity: 0;
    animation: animDown 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
}
.page-hero-content h1 {
    opacity: 0;
    animation: animFlip 0.75s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}
.page-hero-content .breadcrumb-container {
    opacity: 0;
    animation: animUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}

/* Formation header */
.formations-hero-content h1,
.formations-hero-content p,
.formations-hero-content .breadcrum-container {
    opacity: 0;
}
.formations-hero-content h1 {
    animation: animFlip 0.75s cubic-bezier(0.22,1,0.36,1) 0.25s forwards;
}
.formations-hero-content p {
    animation: animUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
}
.formations-hero-content .breadcrum-container {
    animation: animUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.55s forwards;
}

/* Services show header */
.service-show-header h1 {
    opacity: 0;
    animation: animFlip 0.75s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}

/* ─────────────────────────────────────────────
   LIGNE DE SÉPARATION ANIMÉE sous les titres h2
   ───────────────────────────────────────────── */
.section-heading.is-visible::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #e2b13c;
    border-radius: 2px;
    margin: 14px auto 0;
    animation: lineGrow 0.6s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
}
@keyframes lineGrow {
    to { width: 60px; }
}

/* ─────────────────────────────────────────────
   HOVER CARDS — micro-interactions
   ───────────────────────────────────────────── */
.featured-card,
.event-card-new,
.rn-expert-card,
.rn-partner-card,
.pub-card,
.formation-card-ery,
.circle-service-card {
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.3s ease;
}

/* ─────────────────────────────────────────────
   RESPECT : pas d'animation si préférence réduite
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    .hero-eyebrow-anim, .hero-title-anim, .hero-text-anim,
    .hero-cta-anim, .hero-number-anim,
    .page-hero-content .eyebrow,
    .page-hero-content h1,
    .page-hero-content .breadcrumb-container,
    .formations-hero-content h1,
    .formations-hero-content p,
    .formations-hero-content .breadcrum-container {
        opacity: 1 !important;
        animation: none !important;
    }
}