/* ═══════════════════════════════════════════════════════════════
   EXCELIA — Ultra-Premium Animations System
   Fichier standalone — ne modifie aucun style existant
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────── SCROLL REVEAL ──────────────── */

.anim-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.anim-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.anim-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.anim-reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.anim-visible {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

/* ──────────────── STAGGER DELAYS ──────────────── */

.anim-stagger-1 { transition-delay: 0.05s; }
.anim-stagger-2 { transition-delay: 0.12s; }
.anim-stagger-3 { transition-delay: 0.19s; }
.anim-stagger-4 { transition-delay: 0.26s; }
.anim-stagger-5 { transition-delay: 0.33s; }
.anim-stagger-6 { transition-delay: 0.40s; }
.anim-stagger-7 { transition-delay: 0.47s; }
.anim-stagger-8 { transition-delay: 0.54s; }

/* ──────────────── HERO TEXT SPLIT ──────────────── */

.anim-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotateX(45deg);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center bottom;
}

.anim-word.anim-word-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* ──────────────── BADGE SCALE BLUR ──────────────── */

.anim-badge {
    opacity: 0;
    transform: scale(0.75);
    filter: blur(6px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.anim-badge.anim-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0) !important;
}

/* ──────────────── MAGNETIC BUTTON ──────────────── */

.anim-magnetic {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* ──────────────── COUNTER PULSE GLOW ──────────────── */

@keyframes counterPulseGlow {
    0%   { text-shadow: 0 0 0 transparent; }
    50%  { text-shadow: 0 0 30px rgba(112, 10, 245, 0.6), 0 0 60px rgba(112, 10, 245, 0.3); }
    100% { text-shadow: 0 0 0 transparent; }
}

.anim-counter-glow {
    animation: counterPulseGlow 1.2s ease-out;
}

/* ──────────────── NAV SCROLL SHRINK ──────────────── */

.anim-nav-scrolled {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(2, 6, 23, 0.92) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(112, 10, 245, 0.05) !important;
}

.anim-nav-scrolled > div {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──────────────── SECTION GLOW DIVIDER ──────────────── */

.anim-section-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(112, 10, 245, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.8s ease, width 0.8s ease;
}

.anim-section-divider.anim-visible::before {
    opacity: 1;
    width: 400px;
}

/* ──────────────── GLASS CARD SHIMMER BORDER ──────────────── */

@keyframes borderShimmer {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.anim-card-shimmer {
    position: relative;
}

.anim-card-shimmer::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(112, 10, 245, 0) 25%,
        rgba(112, 10, 245, 0.5) 50%,
        rgba(112, 10, 245, 0) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    animation: borderShimmer 3s linear infinite;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.anim-card-shimmer:hover::after {
    opacity: 1;
}

/* ──────────────── PARALLAX SMOOTH ──────────────── */

.anim-parallax {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ──────────────── TEXT SCROLL STORYTELLING — DISABLED ──────────────── */
/* ──────────────── CONSTELLATION CANVAS — DISABLED ──────────────── */

/* ──────────────── STICKY SCROLL STORYTELLING — DISABLED ──────────────── */
/* Removed: was causing solutions cards/header overlap */

/* ──────────────── ACCESSIBILITY ──────────────── */

@media (prefers-reduced-motion: reduce) {
    .anim-reveal,
    .anim-reveal-left,
    .anim-reveal-right,
    .anim-reveal-scale,
    .anim-word,
    .anim-badge,
    .anim-service-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }

    .anim-card-shimmer::after {
        animation: none !important;
    }

    #constellation-canvas {
        display: none !important;
    }
}