/* ======================================================================
   TanaTeam — animations.css
   Styles visuels pour les animations GSAP
====================================================================== */

/* Curseur custom géré entièrement par cursor.js (styles inline)
   Ici : uniquement les états hover sur fonds sombres */
#cur-ring.cur-light { border-color: rgba(255,255,255,.6) !important; }
#cur-dot.cur-light  { background: rgba(255,255,255,.9) !important; }

/* ══════════════════════════════════════════
   PAGE TRANSITION COVER
══════════════════════════════════════════ */
#pageCover {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: #141618;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* cover intercepts clicks only during transition */
    will-change: transform;
}

/* During transition, re-enable pointer-events */
#pageCover.is-active {
    pointer-events: auto;
}

.page-cover-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.65;
    animation: coverPulse 1.2s ease-in-out infinite;
}
@keyframes coverPulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.80; }
}

.pcl-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.06);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════
   HERO SPLIT — Spotlight
══════════════════════════════════════════ */
.hero-panel { isolation: isolate; }

.hero-spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    will-change: opacity, background;
    transition: none; /* controlled entirely by GSAP */
}

/* Parallax layers need overflow hidden */
.hero-panel .hp-bg {
    will-change: transform;
}
.hero-panel .hp-content {
    will-change: transform;
}

/* Hero panel transition for scale */
.hero-panel {
    transition: none; /* GSAP handles all transitions */
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Hero divider transition */
.hero-divider {
    transition: none;
    will-change: opacity;
}

/* Floating idle animation on hero h1 */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}
.hero-panel:not(:hover) .hp-content h1 {
    animation: heroFloat 7s ease-in-out infinite;
}
.hero-tech:not(:hover) .hp-content h1 {
    animation-delay: 0s;
}
.hero-bpo:not(:hover) .hp-content h1 {
    animation-delay: 3.5s; /* offset pour désynchroniser les deux */
}

/* ══════════════════════════════════════════
   HEADER — État scrolled
══════════════════════════════════════════ */
.site-header {
    transition: box-shadow 0.4s ease, background 0.3s ease;
    will-change: box-shadow;
}
.site-header.scrolled {
    background: rgba(255,255,255,.99);
}
/* Réduction légère de la hauteur nav au scroll */
.site-header.scrolled .nav-inner {
    height: 58px;
    transition: height 0.35s cubic-bezier(.4,0,.2,1);
}
.site-header .nav-inner {
    transition: height 0.35s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════
   SCROLL REVEAL — État initial (invisible)
   GSAP anime vers visible
══════════════════════════════════════════ */
.reveal-ready {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════
   MICRO-INTERACTIONS — Boutons
══════════════════════════════════════════ */
.btn,
.btn-cta,
.btn-white-red,
.btn-white {
    will-change: transform;
    /* GSAP gère le transform, on désactive la CSS transition sur transform */
    transition-property: background, box-shadow, border-color, color !important;
}

/* Ripple sur click des boutons primaires */
.btn-primary,
.btn-dark,
.btn-cta {
    position: relative;
    overflow: hidden;
}
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transform: scale(0);
    pointer-events: none;
    animation: ripple 0.55s ease-out forwards;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════
   PAGE HERO (inner pages) — animations
══════════════════════════════════════════ */
.page-hero .container > * {
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════
   CARDS — hover 3D tilt (pure CSS fallback)
══════════════════════════════════════════ */
.service-card,
.offer-card,
.pole-card,
.project-card {
    will-change: transform;
    transform-style: preserve-3d;
}

/* ══════════════════════════════════════════
   PROOF BAR — items apparition
══════════════════════════════════════════ */
.proof-chip,
.stat {
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════
   SECTIONS BENTO — stagger
══════════════════════════════════════════ */
.b-card,
.sector-chip,
.skill-item,
.step-card,
.case-card {
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════
   FOOTER — accent line apparition
══════════════════════════════════════════ */
.footer-col,
.footer-about {
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════
   PREFERS-REDUCED-MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero-panel:not(:hover) .hp-content h1 {
        animation: none;
    }
    .page-cover-logo {
        animation: none;
        opacity: 0.6;
    }
    /* Cacher le curseur custom et garder le natif */
    .cur-dot,
    .cur-ring {
        display: none !important;
    }
    /* Restaurer le curseur natif même si la classe est présente */
    .custom-cursor-ready *,
    .custom-cursor-ready *::before,
    .custom-cursor-ready *::after {
        cursor: auto !important;
    }
}