/* ========================================
   DIVIN CONCEPT — Animations (index & pages)
   Entrées : left / right / zoom / opacity / fade-up
   ======================================== */

:root {
    --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-duration: 0.75s;
    --anim-distance: 28px;
}

/* État initial (avant entrée) */
.anim-ready [data-anim],
.anim-ready .anim-child,
.anim-ready [data-animate] {
    opacity: 0;
    will-change: opacity, transform;
}

.anim-ready [data-anim="fade-up"],
.anim-ready [data-animate="up"] { transform: translateY(var(--anim-distance)); }
.anim-ready [data-anim="fade-down"] { transform: translateY(calc(var(--anim-distance) * -0.6)); }
.anim-ready [data-anim="fade-left"],
.anim-ready [data-animate="left"] { transform: translateX(calc(var(--anim-distance) * -1.2)); }
.anim-ready [data-anim="fade-right"],
.anim-ready [data-animate="right"] { transform: translateX(calc(var(--anim-distance) * 1.2)); }
.anim-ready [data-anim="fade"],
.anim-ready [data-anim="opacity"],
.anim-ready [data-animate="opacity"],
.anim-ready [data-animate="fade"] { transform: none; }
.anim-ready [data-anim="zoom"],
.anim-ready [data-anim="scale"],
.anim-ready [data-animate="zoom"] { transform: scale(0.92); }
.anim-ready [data-anim="hero"] {
    transform: translateY(18px) scale(0.985);
}

.anim-ready [data-anim].is-in,
.anim-ready .anim-child.is-in,
.anim-ready [data-animate].is-in,
.anim-ready [data-animate].visible {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--anim-duration) var(--anim-ease),
        transform var(--anim-duration) var(--anim-ease);
}

/* Classes utilitaires (aussi hors .anim-ready) */
.fade-left,
.fade-right,
.fade-zoom,
.fade-opacity,
.fade-up,
.scale-in {
    will-change: opacity, transform;
}

/* Stagger enfants */
.anim-ready .anim-stagger > .anim-child.is-in,
.anim-ready .anim-stagger > [data-anim].is-in,
.anim-ready .anim-stagger > [data-animate].is-in {
    transition-delay: calc(var(--anim-i, 0) * 70ms);
}

.anim-stagger > *:nth-child(1) { --anim-i: 0; }
.anim-stagger > *:nth-child(2) { --anim-i: 1; }
.anim-stagger > *:nth-child(3) { --anim-i: 2; }
.anim-stagger > *:nth-child(4) { --anim-i: 3; }
.anim-stagger > *:nth-child(5) { --anim-i: 4; }
.anim-stagger > *:nth-child(6) { --anim-i: 5; }

/* Ouverture de page — léger fade du main */
@keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.page-enter main {
    animation: pageEnter 0.55s var(--anim-ease) both;
}

/* Hero : entrée après disparition du preloader (pas pendant le blur) */
@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroTitleReveal {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.96);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.hero-anim-content > * {
    opacity: 0;
}

/* Démarre seulement quand body n’est plus en preloading */
body:not(.is-preloading) .hero-anim-content > * {
    animation: heroReveal 0.8s var(--anim-ease) forwards;
}
body:not(.is-preloading) .hero-anim-content > .hero-title-reveal,
body:not(.is-preloading) .hero-anim-content > h1 {
    animation-name: heroTitleReveal;
    animation-duration: 0.9s;
}

body:not(.is-preloading) .hero-anim-content > .ux-eyebrow { animation-delay: 0.1s; }
body:not(.is-preloading) .hero-anim-content > h1,
body:not(.is-preloading) .hero-anim-content > .hero-title-reveal { animation-delay: 0.26s; }
body:not(.is-preloading) .hero-anim-content > .ux-lead { animation-delay: 0.42s; }
body:not(.is-preloading) .hero-anim-content > .ux-cta-row { animation-delay: 0.58s; }
body:not(.is-preloading) .hero-anim-content > .prestige-hero-links { animation-delay: 0.72s; }

/* Overlay hero léger au load */
@keyframes heroOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.hero-anim-overlay {
    animation: heroOverlayIn 1s ease both;
}

/* Soft atmospheric wash on banded sections (very subtle) */
@keyframes bandWash {
    from { opacity: 0.55; }
    to { opacity: 1; }
}
.ux-section--mist,
.ux-section--warm,
.ux-section--pattern {
    animation: bandWash 0.9s var(--anim-ease) both;
}

@media (max-width: 768px) {
    :root {
        --anim-distance: 18px;
        --anim-duration: 0.55s;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-enter main,
    .hero-anim-content > *,
    body:not(.is-preloading) .hero-anim-content > *,
    .hero-anim-overlay,
    .ux-section--mist,
    .ux-section--warm,
    .ux-section--pattern {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .anim-ready [data-anim],
    .anim-ready .anim-child,
    .anim-ready [data-animate],
    .fade-up,
    .scale-in,
    .fade-left,
    .fade-right,
    .fade-zoom,
    .fade-opacity {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}