/* =============================================
   ANIMATIONS PREMIUM — ARTEWEB
   ============================================= */

/* ---- Cursor Glow ---- */
.cursor-glow {
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.042) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    will-change: left, top;
    transition: opacity 0.4s ease;
}

/* ---- Word Wrapper — Hero H1 ---- */
.word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

.word {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.hero-words-ready .word {
    transform: translateY(0);
}

/* ---- HERO — Entrée staggerée ---- */
@keyframes heroSlideUpBlur {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-hero-el {
    opacity: 0;
    animation: heroSlideUpBlur 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--delay, 0ms);
    will-change: opacity, transform;
}

/* ---- SCROLL ANIMATIONS ---- */

/* Fade Up */
[data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
    will-change: opacity, transform;
}

/* Fade Up (textes — anciennement fade-blur) */
[data-anim="fade-blur"] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
    will-change: opacity, transform;
}

/* Scale In */
[data-anim="scale-in"] {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
    will-change: opacity, transform;
}

/* Fade from Left (badges) */
[data-anim="fade-left"] {
    opacity: 0;
    transform: translateX(-16px);
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
    will-change: opacity, transform;
}

/* Visible — tous types */
[data-anim].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---- SERVICE CARDS — Animation des enfants ---- */
.service-card[data-anim-card] .service-body > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.service-card[data-anim-card] .service-body > *:nth-child(1) { transition-delay: 0ms; }
.service-card[data-anim-card] .service-body > *:nth-child(2) { transition-delay: 90ms; }
.service-card[data-anim-card] .service-body > *:nth-child(3) { transition-delay: 175ms; }
.service-card[data-anim-card] .service-body > *:nth-child(4) { transition-delay: 260ms; }

.service-card[data-anim-card] .circle-icon {
    opacity: 0;
    transform: scale(0.72) rotate(-12deg);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 340ms,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1) 340ms;
    will-change: opacity, transform;
}

.service-card[data-anim-card].is-visible .service-body > * {
    opacity: 1;
    transform: none;
}

.service-card[data-anim-card].is-visible .circle-icon {
    opacity: 1;
    transform: none;
}

/* ---- FOOTER BIG TEXT — Parallax ---- */
.footer-big-text {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ---- HOVER LINE — Liens de navigation footer ---- */
.nav-col a {
    position: relative;
}

.nav-col a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---- HOVER LINE — Liens nav principale ---- */
.nav-menu li a {
    position: relative;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-menu li a:hover::after {
    width: calc(100% - 24px);
}

/* ---- PROJECT CARD — hover lift avec ombre arrondie ---- */
.project-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 4px 12px -4px rgba(0, 0, 0, 0.18),
        0 20px 50px -14px rgba(0, 0, 0, 0.55);
}

/* ---- SHIMMER — effet reflet sur les CTA ---- */
.btn-primary,
.btn-secondary,
.btn-submit {
    position: relative;
    overflow: hidden;
}

.btn-primary::after,
.btn-secondary::after,
.btn-submit::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -80%;
    width: 55%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    transition: left 0s 0.6s;
    pointer-events: none;
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-submit:hover::after {
    left: 130%;
    transition: left 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- APPOINTMENT ITEMS — stagger on reveal ---- */
.appointment-item {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    will-change: opacity, transform;
}

.appointment-item:nth-child(1) { transition-delay: 0ms; }
.appointment-item:nth-child(2) { transition-delay: 100ms; }

.contact-card.is-visible .appointment-item {
    opacity: 1;
    transform: none;
}

/* ---- PREFERS REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim-card] .service-body > *,
    [data-anim-card] .circle-icon,
    .anim-hero-el,
    .word,
    .appointment-item {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .cursor-glow {
        display: none !important;
    }

    .nav-col a::after,
    .nav-menu li a::after {
        display: none;
    }
}