/* =====================================================
   SEEBB - CSS Animations
   Remplace les setTimeout JavaScript par des @keyframes CSS
   Plus performant (GPU accelerated, hors main thread)
   ===================================================== */

/* ======================
   CSS Custom Properties pour timing
   ====================== */
:root {
    /* Animation durations */
    --anim-fast: 150ms;
    --anim-normal: 300ms;
    --anim-slow: 500ms;
    --anim-slower: 800ms;

    /* Easing functions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Chantier animation timings */
    --chantier-fall-duration: 800ms;
    --chantier-fall-delay: 150ms;
    --chantier-word-duration: 600ms;
    --chantier-word-stagger: 100ms;
    --chantier-cycle-duration: 12s;
}

/* ======================
   Hero Orb Animations
   ====================== */
@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, 40px) scale(1.1); }
}

/* ======================
   Background Gradient Animation
   ====================== */
@keyframes gradientMove {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%;
        transform: scale(1);
    }
    50% {
        background-position: 50% 20%, 80% 30%, 20% 80%;
        transform: scale(1.05);
    }
    100% {
        background-position: 100% 0%, 60% 50%, 40% 60%;
        transform: scale(1);
    }
}

.bg-gradient {
    animation: gradientMove 15s ease-in-out infinite alternate;
    will-change: transform, background-position;
}

/* ======================
   Hero Entry Animations
   ====================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero content staggered entry */
.hero-content > * {
    opacity: 0;
    animation: fadeInUp var(--anim-slower) var(--ease-out-expo) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 100ms; }
.hero-content > *:nth-child(2) { animation-delay: 200ms; }
.hero-content > *:nth-child(3) { animation-delay: 350ms; }
.hero-content > *:nth-child(4) { animation-delay: 450ms; }
.hero-content > *:nth-child(5) { animation-delay: 550ms; }
.hero-content > *:nth-child(6) { animation-delay: 650ms; }

/* Chantier animation controls its own timing */
.hero-content > .chantier-animation {
    opacity: 1;
    animation: none;
}

/* ======================
   Badge Pulse Animation
   ====================== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.badge-dot {
    animation: pulse 2s ease-in-out infinite;
    will-change: transform, opacity;
}

/* ======================
   Floating Card Effect
   ====================== */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.visual-card {
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

/* ======================
   Glow Animation
   ====================== */
@keyframes glow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

.card-glow {
    animation: glow 4s ease-in-out infinite;
    will-change: opacity;
}

/* ======================
   Chantier Constructif - Block Fall Animation
   ====================== */
@keyframes blockFall {
    0% {
        opacity: 0;
        transform: translateY(-200px) rotate(-8deg);
    }
    50% {
        opacity: 1;
        transform: translateY(15px) rotate(2deg);
    }
    70% {
        transform: translateY(-8px) rotate(-1deg);
    }
    85% {
        transform: translateY(4px) rotate(0.5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }
}

.block.landed {
    opacity: 1;
    transform: translateY(0) rotate(0);
    animation: blockFall var(--chantier-fall-duration) var(--ease-out-back) forwards;
}

/* Staggered landing delays */
.block[data-index="0"].landed { animation-delay: 0ms; }
.block[data-index="1"].landed { animation-delay: 150ms; }
.block[data-index="2"].landed { animation-delay: 300ms; }
.block[data-index="3"].landed { animation-delay: 450ms; }
.block[data-index="4"].landed { animation-delay: 600ms; }

/* ======================
   Chantier - Word Reveal (Drawer Open)
   ====================== */
.block-word {
    transition:
        max-width var(--chantier-word-duration) var(--ease-out-back),
        opacity calc(var(--chantier-word-duration) * 0.66) ease,
        padding-left calc(var(--chantier-word-duration) * 0.66) ease;
}

.block.word-visible .block-word {
    max-width: 200px;
    opacity: 1;
    padding-left: 0.3em;
}

/* Staggered word reveal delays */
.block[data-index="0"].word-visible .block-word { transition-delay: 0ms; }
.block[data-index="1"].word-visible .block-word { transition-delay: 100ms; }
.block[data-index="2"].word-visible .block-word { transition-delay: 200ms; }
.block[data-index="3"].word-visible .block-word { transition-delay: 300ms; }
.block[data-index="4"].word-visible .block-word { transition-delay: 400ms; }

/* ======================
   Chantier - Word Hide (Drawer Close)
   ====================== */
.block.word-hidden .block-word {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    transition:
        max-width 500ms var(--ease-in-out),
        opacity 300ms ease,
        padding-left 300ms ease;
}

/* Reverse stagger for hide */
.block[data-index="4"].word-hidden .block-word { transition-delay: 0ms; }
.block[data-index="3"].word-hidden .block-word { transition-delay: 80ms; }
.block[data-index="2"].word-hidden .block-word { transition-delay: 160ms; }
.block[data-index="1"].word-hidden .block-word { transition-delay: 240ms; }
.block[data-index="0"].word-hidden .block-word { transition-delay: 320ms; }

/* ======================
   Chantier - Acronym Mode (Accent Highlight)
   ====================== */
.block.acronym-mode .block-letter {
    background: var(--gradient-primary);
    box-shadow:
        0 4px 0 rgba(22, 163, 74, 1),
        0 8px 25px rgba(34, 197, 94, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    transition: all 500ms var(--ease-out-back);
    transform: scale(1.05);
}

[data-theme="light"] .block.acronym-mode .block-letter {
    box-shadow:
        0 4px 0 rgba(22, 163, 74, 1),
        0 8px 25px rgba(34, 197, 94, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* ======================
   Chantier - Dust Puff Effect on Landing
   ====================== */
@keyframes dustPuff {
    0% {
        opacity: 0.8;
        transform: translateX(-50%) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.5);
    }
}

.block.landed::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 10px;
    background: radial-gradient(ellipse at center,
        rgba(150, 150, 150, 0.3) 0%,
        transparent 70%);
    opacity: 0;
    animation: dustPuff 500ms ease-out forwards;
    pointer-events: none;
}

/* ======================
   Messenger Button Animations
   ====================== */
@keyframes messengerPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ======================
   WhatsApp Button Animations
   ====================== */
@keyframes whatsappPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes whatsappBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.whatsapp-float {
    animation: whatsappBounce 2s ease-in-out infinite;
}

.whatsapp-float::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--whatsapp-color, #25D366);
    animation: whatsappPulse 2s infinite;
    z-index: -1;
}

.whatsapp-float:hover {
    animation: none;
}

.whatsapp-float:hover::before {
    animation: none;
    opacity: 0;
}

/* ======================
   Scroll-triggered Animations
   ====================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity var(--anim-slower) var(--ease-out-expo),
        transform var(--anim-slower) var(--ease-out-expo);
    will-change: opacity, transform;
}

.animate-on-scroll.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered service cards */
.service-card.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.service-card.animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.service-card.animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.service-card.animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.service-card.animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.service-card.animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* Staggered metier cards */
.metier-card.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.metier-card.animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.metier-card.animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.metier-card.animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.metier-card.animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.metier-card.animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* Staggered chiffre items */
.chiffre-item.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.chiffre-item.animate-on-scroll:nth-child(2) { transition-delay: 150ms; }
.chiffre-item.animate-on-scroll:nth-child(3) { transition-delay: 300ms; }
.chiffre-item.animate-on-scroll:nth-child(4) { transition-delay: 450ms; }

/* Staggered realisation cards */
.realisation-card.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.realisation-card.animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.realisation-card.animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.realisation-card.animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.realisation-card.animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.realisation-card.animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* Staggered actualite items */
.actualite-card.animate-on-scroll { transition-delay: 0ms; }
.actualite-small.animate-on-scroll:nth-child(1) { transition-delay: 100ms; }
.actualite-small.animate-on-scroll:nth-child(2) { transition-delay: 200ms; }
.actualite-small.animate-on-scroll:nth-child(3) { transition-delay: 300ms; }

/* ======================
   Button Hover Animations
   ====================== */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 500ms ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px var(--accent-glow);
}

.btn-primary:active {
    transform: translateY(-1px) scale(1);
}

/* ======================
   Service Card Hover
   ====================== */
.service-card {
    transition:
        transform var(--anim-normal) ease,
        background var(--anim-normal) ease,
        border-color var(--anim-normal) ease,
        box-shadow var(--anim-normal) ease;
}

.service-card::before {
    transition: opacity var(--anim-normal) ease;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.15);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:active {
    transform: translateY(-4px) scale(1);
}

.service-icon {
    transition:
        background var(--anim-normal) ease,
        border-color var(--anim-normal) ease;
}

.service-icon svg {
    transition:
        color var(--anim-normal) ease,
        transform 400ms var(--ease-out-expo);
}

.service-card:hover .service-icon svg {
    transform: rotate(5deg) scale(1.1);
}

/* ======================
   Contact Card Hover
   ====================== */
.contact-card {
    transition: all 400ms var(--ease-out-expo);
}

.contact-card:hover {
    transform: translateY(-5px);
}

/* ======================
   Feature Hover
   ====================== */
.feature {
    transition: all var(--anim-normal) ease;
}

.feature-icon {
    transition:
        transform var(--anim-normal) ease,
        background var(--anim-normal) ease;
}

.feature:hover .feature-icon {
    transform: scale(1.1);
    background: var(--gradient-primary);
}

.feature:hover .feature-icon svg {
    color: #fff;
}

/* ======================
   Stats Counter Glow
   ====================== */
.stat-value {
    transition:
        color var(--anim-normal) ease,
        text-shadow var(--anim-normal) ease;
}

.stat:hover .stat-value {
    text-shadow: 0 0 30px var(--accent-glow);
}

/* ======================
   Form Focus Animations
   ====================== */
.form-group input,
.form-group select,
.form-group textarea {
    transition:
        border-color var(--anim-fast) ease,
        box-shadow var(--anim-fast) ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

/* ======================
   Tooltip Animations
   ====================== */
.whatsapp-tooltip {
    transition:
        opacity var(--anim-normal) ease,
        visibility var(--anim-normal) ease,
        transform var(--anim-normal) ease;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ======================
   Map Overlay Animation
   ====================== */
.map-overlay {
    transition:
        opacity var(--anim-normal) ease,
        transform var(--anim-normal) ease;
    opacity: 0;
    transform: translateY(10px);
}

.map-link:hover .map-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ======================
   Reduced Motion Override
   ====================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .block.landed::after {
        display: none;
    }

    .whatsapp-float::before {
        display: none;
    }
}

/* ======================
   GPU Acceleration Hints
   ====================== */
.bg-gradient,
.block,
.block-letter,
.service-card,
.whatsapp-float,
.btn-primary {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}