/* ==========================================
   PROFESSIONAL ANIMATIONS SYSTEM
   ========================================== */

:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* 1. Entrée du Hero - Apparition séquencée */
.page-hero-content > * {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeIn 1s var(--ease-out-expo) forwards;
}

.page-hero-content .eyebrow { animation-delay: 0.1s; }
.page-hero-content h1 { animation-delay: 0.25s; }
.page-hero-content .hero-lead { animation-delay: 0.4s; }
.page-hero-content .hero-actions { animation-delay: 0.55s; }

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Effet Parallaxe Doux sur le fond */
body {
    background-attachment: fixed;
}

/* 3. Micro-interactions sur les Cartes (Discipline, Coach, News) */
.discipline-card, 
.coach-card, 
.value-card, 
.media-card,
.form-card {
    transition: transform 0.5s var(--ease-out-expo), 
                box-shadow 0.5s var(--ease-out-expo),
                border-color 0.5s var(--ease-out-expo) !important;
}

.discipline-card:hover, 
.coach-card:hover, 
.value-card:hover, 
.media-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 
                0 0 20px rgba(214, 40, 40, 0.15) !important;
    border-color: rgba(214, 40, 40, 0.3) !important;
}

/* 4. Animation des Images au Survol */
.discipline-card img, 
.coach-card img, 
.mosaic-item img, 
.media-frame img {
    transition: transform 0.8s var(--ease-out-expo) !important;
}

.discipline-card:hover img, 
.coach-card:hover img, 
.mosaic-item:hover img,
.media-card:hover img {
    transform: scale(1.1) rotate(1deg) !important;
}

/* 5. Effet de Révélation Staggered (Grilles) */
[data-reveal].is-visible {
    animation: revealIn 0.8s var(--ease-out-expo) forwards;
}

@keyframes revealIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 6. Boutons - Effet de brillance et rebond */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease-in-out-back), box-shadow 0.3s ease !important;
}

.btn:active {
    transform: scale(0.95) !important;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: none;
}

.btn-primary:hover::after {
    left: 130%;
    transition: left 0.6s var(--ease-out-expo);
}

/* 7. Header - Transition fluide au scroll */
.site-header {
    transition: all 0.4s var(--ease-out-expo) !important;
}

.site-header.scrolled {
    padding: 0.5rem 0;
}

/* 8. Navigation - Soulignement animé */
.site-nav a {
    position: relative;
}

.site-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s var(--ease-out-expo);
}

.site-nav a:hover::after {
    width: 100%;
}

/* 9. Modal - Ouverture fluide */
.media-modal {
    transition: opacity 0.4s var(--ease-out-expo), visibility 0.4s !important;
}

.media-modal-dialog {
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s var(--ease-out-expo);
}

.media-modal.is-open .media-modal-dialog {
    transform: scale(1) translateY(0);
}

/* 10. Formulaires - Focus animé */
.form-group input, 
.form-group select, 
.form-group textarea {
    transition: all 0.3s var(--ease-out-expo) !important;
}

.form-group input:focus {
    transform: translateX(5px);
}

/* 11. Inscription - Barre de progression animée */
.progress-step .step-circle {
    transition: all 0.5s var(--ease-in-out-back) !important;
}

.progress-step.active .step-circle {
    transform: scale(1.2);
}

.progress-line {
    position: relative;
    overflow: hidden;
}

.progress-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--green);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out-expo);
}

.progress-line.filled::after {
    transform: translateX(0);
}