/* ==========================================================================
   Macylia Coiffure — animations
   Douces et lentes, dans l'esprit « naturel ». Tout est désactivé si l'appareil
   demande moins d'animations (prefers-reduced-motion).
   ========================================================================== */

:root {
    --ease-soft: cubic-bezier(.22, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

@keyframes fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade-up-blur { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0); transform: scale(1.08); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow-leaf { from { transform: scale(0) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 70% { transform: rotate(7deg); } }
@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-50px, -30px) scale(.95); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: .5; } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 65% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes petal-fall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate3d(var(--dx, 40px), 105vh, 0) rotate(var(--rot, 540deg)); opacity: .9; }
}
@keyframes pop-scale { from { scale: .3; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes flash-bg { from { background-color: var(--blush); } to { background-color: transparent; } }

/* Titre découpé en mots par main.js : masqué le temps du découpage pour éviter un clignotement */
.js .split-words:not(.is-split) { visibility: hidden; }

/* Éléments masqués avant leur apparition au scroll (uniquement si JS actif) */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {

    /* ------------------------------------------------ apparitions au scroll */
    .js .reveal {
        transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
        transition-delay: calc(var(--i, 0) * 60ms);
    }
    .js .reveal-left { transform: translateX(-36px); }
    .js .reveal-right { transform: translateX(36px); }

    /* ------------------------------------------------ entrée de l'accueil */
    .hero, .page-hero { position: relative; isolation: isolate; }
    .anim-in { animation: fade-up .9s var(--ease-soft) both; animation-delay: var(--d, 0s); }
    .anim-in-blur { animation: fade-up-blur 1.1s var(--ease-soft) both; animation-delay: var(--d, 0s); }
    .hero-visual > .photo { animation: unveil 1.4s var(--ease-soft) .2s both; }
    .hero-visual .photo-bubble { animation: pop-in .9s var(--ease-spring) 1s both; }
    .hero-card { animation: slide-in-right .8s var(--ease-soft) 1.3s both, float 6s ease-in-out 2.1s infinite; }
    .hero-card:hover { animation-play-state: paused; }

    .page-hero > .container > * { animation: fade-up .8s var(--ease-soft) both; }
    .page-hero > .container > *:nth-child(2) { animation-delay: .08s; }
    .page-hero > .container > *:nth-child(3) { animation-delay: .16s; }
    .page-hero > .container > *:nth-child(4) { animation-delay: .24s; }

    /* ------------------------------------------------ logo */
    .logo-mark .lm-ring, .logo-mark .lm-m { stroke-dasharray: 1; }
    .logo-mark .lm-leaf, .logo-mark .lm-rib { transform-box: view-box; transform-origin: 32px 33px; }
    .page-accueil .site-header .logo-mark .lm-ring { stroke-dashoffset: 1; animation: draw 1.6s var(--ease-soft) .1s forwards; }
    .page-accueil .site-header .logo-mark .lm-m { stroke-dashoffset: 1; animation: draw 1.3s var(--ease-soft) .3s forwards; }
    .page-accueil .site-header .logo-mark .lm-leaf,
    .page-accueil .site-header .logo-mark .lm-rib { animation: grow-leaf .8s var(--ease-spring) 1.2s both; }
    .brand:hover .lm-leaf, .brand:hover .lm-rib { animation: sway 1.6s ease-in-out; }

    /* ------------------------------------------------ boutons & liens */
    .btn-primary, .btn-sage { position: relative; overflow: hidden; isolation: isolate; }
    .btn-primary::after, .btn-sage::after {
        content: ""; position: absolute; inset: 0; width: 45%; z-index: -1;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
        transform: translateX(-120%) skewX(-20deg);
    }
    .btn-primary:hover::after, .btn-sage:hover::after { animation: shine .9s ease; }
    .btn { transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-spring), box-shadow .25s; }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary:hover { box-shadow: 0 10px 22px -10px rgba(180, 90, 110, .7); }
    .btn:active { transform: translateY(0) scale(.98); }
    .main-nav ul a { transition: background-color .25s, color .25s; }

    /* ------------------------------------------------ cartes & photos */
    .service-card > .photo { transition: transform 1s var(--ease-soft); }
    .service-card:hover > .photo { transform: scale(1.06); }
    /* Soulèvement au survol via « translate » : pas de conflit avec l'apparition au scroll (transform) */
    .js .service-card.reveal, .js .review-card.reveal, .service-card, .review-card {
        transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), translate .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
        transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s, 0s;
    }
    .service-card:hover, .review-card:hover { translate: 0 -5px; box-shadow: var(--shadow); }
    .product-card .photo { transition: transform .3s ease; }
    .product-card:hover .photo { transform: translateY(-4px); }
    .add-btn { transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--ease-spring); }
    .add-btn:hover { transform: rotate(90deg) scale(1.08); }
    .gallery-item .photo { transition: opacity .3s; }
    .gallery-item:hover .photo { opacity: 1; }
    .chip { transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-spring); }
    .chip:hover { transform: translateY(-2px); }
    .socials a { transition: background-color .25s, color .25s, transform .3s var(--ease-spring); }
    .socials a:hover { transform: translateY(-3px) rotate(-6deg); }
    .radio-card .box { transition: border-color .2s, background-color .25s, box-shadow .2s, transform .25s var(--ease-spring); }
    .radio-card:active .box { transform: scale(.985); }

    /* ------------------------------------------------ bandeau défilant */
    .marquee-track { animation: marquee 38s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }

    /* ------------------------------------------------ barre de progression de lecture (navigateurs récents) */
    @supports (animation-timeline: scroll()) {
        .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); }
    }

    /* ------------------------------------------------ vie du site : uniquement des mouvements et des fondus
       (pas de flou animé, pas de 3D, pas d'ombre recalculée : c'est ce qui faisait saccader les pages à photos) */

    /* Feuilles qui flottent doucement dans les sections claires */
    .leaves svg { animation: leaf-float var(--dur, 16s) ease-in-out var(--delay, 0s) infinite; }

    /* Anneaux qui respirent derrière le bandeau « Prendre rendez-vous » */
    .cta-band::after { animation: breathe 8s ease-in-out infinite; }
    .cta-band::before {
        content: ""; position: absolute; right: 30px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .15); animation: breathe 8s ease-in-out 2s infinite; pointer-events: none;
    }

    /* Photos : léger zoom au survol (transformation seule) */
    .product-card .photo, .gallery-item .photo { transition: transform .45s var(--ease-soft), opacity .3s; }
    .product-card:hover .photo { transform: translateY(-4px) scale(1.015); }
    .gallery-item:hover .photo { transform: scale(1.03); opacity: 1; }
    .product-svg { transition: transform .5s var(--ease-spring); transform-origin: 50% 90%; }
    .product-card:hover .product-svg { transform: rotate(-3deg) translateY(-3px); }

    /* Surtitres : la petite feuille pousse quand le bloc apparaît */
    .js .section-head .eyebrow::before, .js .split > div .eyebrow::before { transition: transform .6s var(--ease-spring) .15s; transform: scale(0) rotate(-30deg); }
    .js .section-head.visible .eyebrow::before, .js .split > div.visible .eyebrow::before { transform: none; }

    /* Cartes prestations : la photo respire très légèrement au survol */
    .service-card > .photo { transition: transform .8s var(--ease-soft); }
    .service-card:hover > .photo { transform: scale(1.04); }

    /* Planning et pastilles : apparition en douceur */
    .pl-seg { animation: fade-in .5s ease both; }
    .status-new, .status-pending { animation: pop-in .4s var(--ease-spring) both; }
}

@keyframes word-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes progress { to { transform: scaleX(1); } }
@keyframes leaf-float {
    0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
    33% { transform: translate(14px, -22px) rotate(calc(var(--r, 0deg) + 18deg)); }
    66% { transform: translate(-10px, -8px) rotate(calc(var(--r, 0deg) - 12deg)); }
}

/* Étapes terminées de la prise de RDV (visible même sans animation) */
.step-num { position: relative; }
.booking-step.done .step-num { background: var(--sage-strong); color: transparent; }
.booking-step.done .step-num::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 13px; height: 7px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-2px) rotate(-45deg);
}

/* ==========================================================================
   Deuxième vague : coup de pinceau, cartes 3D, logo du pied de page, fil des étapes
   ========================================================================== */

@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
    .hero-badge svg.ring { animation: spin 22s linear infinite; }
    .hero-badge { animation: pop-in .9s var(--ease-spring) 1.5s both; }
}
@keyframes paint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* déplacement horizontal du pinceau, même durée et même courbe que « paint » : toujours synchronisés */
@keyframes brush-x { from { left: -1.89em; } to { left: calc(100% - 1.43em); } }
/* vie du pinceau : il se pose, ondule en peignant (≈ 75 % du temps), puis se relève et s'envole */
@keyframes brush-life {
    0%   { opacity: 0; translate: -.1em -.45em; rotate: -10deg; }
    9%   { opacity: 1; translate: 0 0; rotate: 0deg; }
    28%  { translate: 0 -.06em; rotate: 2deg; }
    50%  { translate: 0 .05em; rotate: -1.5deg; }
    73%  { opacity: 1; translate: 0 -.03em; rotate: 1deg; }
    100% { opacity: 0; translate: .6em -.8em; rotate: 16deg; }
}
:root { --brush-ease: cubic-bezier(.45, .05, .35, 1); }

@media (prefers-reduced-motion: no-preference) {

    /* ------------------------------------------------ coup de pinceau sous les mots en italique des titres */
    /* La trace est posée derrière le bas des lettres (::after) et dévoilée de gauche à droite par clip-path :
       le dessin n'est jamais déformé, il est « peint » progressivement. */
    .section-head h2 em, .split h2 em, .page-hero h1 em, .hero h1 em, .cta-band h2 em {
        position: relative; display: inline-block; z-index: 0;
    }
    .section-head h2 em::after, .split h2 em::after, .page-hero h1 em::after, .hero h1 em::after, .cta-band h2 em::after {
        content: ""; position: absolute; z-index: -1; pointer-events: none;
        left: -.18em; right: -.28em; bottom: -.12em; height: .66em;
        background: url("../img/pinceau.svg") no-repeat center / 100% 100%;
        clip-path: inset(0 100% 0 0);
        transform: rotate(-1.2deg);
    }
    /* Le pinceau (::before) : sa pointe (95 % / 95 % du dessin) suit exactement le bord de la peinture.
       Bord de la peinture = -.18em + p × (100 % + .46em) ; pointe = left + 1.71em (95 % de 1.8em)  →  left = p × (100 % + .46em) − 1.89em */
    .section-head h2 em::before, .split h2 em::before, .page-hero h1 em::before, .hero h1 em::before, .cta-band h2 em::before {
        content: ""; position: absolute; z-index: 1; pointer-events: none;
        width: 1.8em; height: 1.8em; bottom: .07em; left: -1.89em;
        background: url("../img/pinceau-outil.svg") no-repeat center / contain;
        transform-origin: 95% 95%;
        opacity: 0;
    }
    .section-head.visible h2 em::after, .split > div.visible h2 em::after, .cta-band.visible h2 em::after {
        animation: paint 1.15s var(--brush-ease) .45s both;
    }
    .section-head.visible h2 em::before, .split > div.visible h2 em::before, .cta-band.visible h2 em::before {
        animation: brush-x 1.15s var(--brush-ease) .45s both, brush-life 1.55s linear .45s both;
    }
    .page-hero h1 em::after { animation: paint 1.15s var(--brush-ease) .55s both; }
    .page-hero h1 em::before { animation: brush-x 1.15s var(--brush-ease) .55s both, brush-life 1.55s linear .55s both; }
    .hero h1 em::after { animation: paint 1.25s var(--brush-ease) 1.15s both; }
    .hero h1 em::before { animation: brush-x 1.25s var(--brush-ease) 1.15s both, brush-life 1.68s linear 1.15s both; }
    .cta-band h2 em::after { opacity: .35; }
    .bg-blush h2 em::after { filter: saturate(1.5) brightness(.88); }

    /* ------------------------------------------------ logo du pied de page qui se dessine */
    .js .footer-brand:not(.visible) .logo-mark .lm-ring,
    .js .footer-brand:not(.visible) .logo-mark .lm-m { stroke-dashoffset: 1; }
    .js .footer-brand:not(.visible) .logo-mark .lm-leaf,
    .js .footer-brand:not(.visible) .logo-mark .lm-rib { opacity: 0; }
    .footer-brand.visible .logo-mark .lm-ring { stroke-dashoffset: 1; animation: draw 1.6s var(--ease-soft) .1s forwards; }
    .footer-brand.visible .logo-mark .lm-m { stroke-dashoffset: 1; animation: draw 1.3s var(--ease-soft) .3s forwards; }
    .footer-brand.visible .logo-mark .lm-leaf,
    .footer-brand.visible .logo-mark .lm-rib { animation: grow-leaf .8s var(--ease-spring) 1.2s both; }

    /* ------------------------------------------------ fil conducteur entre les étapes « Votre visite » */
    @media (min-width: 861px) {
        .steps { position: relative; isolation: isolate; }
        .steps::before {
            content: ""; position: absolute; left: 1.6rem; right: 12%; top: 1.2rem; height: 2px; z-index: -1;
            background: linear-gradient(90deg, var(--rose), var(--sage));
            border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0);
            transition: transform 1.8s var(--ease-soft) .3s;
        }
        .steps:has(li.visible)::before { transform: scaleX(1); }
        .steps li::before { background: var(--bg); padding-right: 12px; position: relative; display: inline-block; }
    }
}