/* ============================================================
   GROUPE EASY — MOTION LAYER (ui-ux-pro-max dial 8/10)
   Scroll bidirectionnel · souris · clic · magnetic · spotlight
   Consomme --mx/--my posés par motion.js
   ============================================================ */

:root {
    --motion-enter: 550ms;
    --motion-exit: 350ms;
    --motion-micro: 200ms;
    --motion-stagger: 45ms;
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* ── Curseur signature ───────────────────────────────────── */
.cursor-dot, .cursor-outline { display: none; }
@media (hover: hover) and (pointer: fine) {
    .cursor-dot, .cursor-outline {
        display: block;
        position: fixed; top: 0; left: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: calc(var(--z-overlay) + 2);
        transform: translate(-50%, -50%);
        will-change: left, top, transform;
    }
    .cursor-dot {
        width: 5px; height: 5px;
        background: var(--green);
        box-shadow: 0 0 10px var(--green-glow);
        transition: transform var(--motion-micro) var(--ease-spring);
    }
    .cursor-dot.is-clicking { transform: translate(-50%, -50%) scale(0.55); }
    .cursor-outline {
        width: 34px; height: 34px;
        border: 1px solid var(--green-soft);
        transition: transform 0.28s var(--ease-spring), border-color 0.28s var(--ease), background 0.28s var(--ease);
    }
    .cursor-outline.is-hover {
        transform: translate(-50%, -50%) scale(1.5);
        border-color: var(--green);
        background: rgba(16, 185, 129, 0.07);
    }
    .cursor-outline.is-clicking {
        transform: translate(-50%, -50%) scale(0.82);
        background: rgba(16, 185, 129, 0.16);
    }
}

/* ── Fond : parallaxe + respiration ────────────────────────── */
.motion-ready .bg-grid {
    transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -7px));
    transition: transform 0.55s var(--ease-enter);
    animation: gridDrift 110s linear infinite;
}
@keyframes gridDrift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 64px 64px, 64px 64px; }
}

.motion-ready .bg-glow {
    transform: translateX(-50%) translate(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 12px));
    transition: transform 0.6s var(--ease-enter), opacity 0.5s var(--ease);
    animation: glowBreathe 16s ease-in-out infinite alternate;
}
@keyframes glowBreathe {
    from { opacity: 0.26; }
    to   { opacity: 0.44; }
}

/* ── Scroll direction (classes posées par motion.js) ───────── */
html.scroll-down .header { transform: translateY(0); }
html.scroll-down.scrolled-far .header {
    transform: translateY(-100%);
    opacity: 0.92;
}
html.scroll-up .header {
    transform: translateY(0);
    opacity: 1;
}
.header {
    transition: transform var(--motion-enter) var(--ease-enter),
                opacity var(--motion-exit) var(--ease-exit),
                padding var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* ── Sections : entrée / sortie scroll ─────────────────────── */
html:not(.js-motion) main section:not(.wheel-scene),
html:not(.js-motion) [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

.js-motion main section:not(.wheel-scene) {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--motion-enter) var(--ease-enter),
                transform var(--motion-enter) var(--ease-enter);
    will-change: opacity, transform;
}
.js-motion main section.sec-in {
    opacity: 1;
    transform: none;
}
.js-motion main section.sec-out-up {
    opacity: 0;
    transform: translateY(-24px);
    transition-duration: var(--motion-exit);
    transition-timing-function: var(--ease-exit);
}
.js-motion main section.sec-out-down {
    opacity: 0;
    transform: translateY(32px);
    transition-duration: var(--motion-exit);
    transition-timing-function: var(--ease-exit);
}

/* ── data-reveal bidirectionnel ────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-enter) var(--ease-enter),
                transform var(--motion-enter) var(--ease-enter);
}
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].active  { opacity: 1; transform: translate(0); }
[data-reveal="fade"].active { transform: none; }

/* ── Stagger (45ms/item — ui-ux-pro-max) ───────────────────── */
.stagger-in {
    animation: staggerReveal var(--motion-enter) var(--ease-enter) both;
    animation-delay: calc(var(--stagger, 0) * var(--motion-stagger) + 60ms);
}
@keyframes staggerReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ── Spotlight + tilt cards ────────────────────────────────── */
.spot-card,
.process-card, .hub-card, .rev-card, .news-card, .fix-card,
.retrouvez-card, .cta-card, .stepper-process, .auth-card,
.vacances-card, .service-card {
    --spot-x: 50%;
    --spot-y: 50%;
    transition: transform 0.32s var(--ease-spring),
                background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    transform-style: preserve-3d;
}
.spot-card::before,
.process-card::before, .hub-card::before, .rev-card::before,
.news-card::before, .fix-card::before, .retrouvez-card::before,
.cta-card::before, .auth-card::before, .vacances-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(420px circle at var(--spot-x) var(--spot-y),
        rgba(207, 211, 218, 0.07), transparent 42%);
    transition: opacity 0.35s var(--ease);
}
.spot-card:hover::before,
.process-card:hover::before, .hub-card:hover::before, .rev-card:hover::before,
.news-card:hover::before, .fix-card:hover::before, .retrouvez-card:hover::before,
.cta-card:hover::before, .auth-card:hover::before, .vacances-card:hover::before {
    opacity: 1;
}
.is-tilting {
    transform: perspective(900px)
               rotateX(var(--tilt-y, 0deg))
               rotateY(var(--tilt-x, 0deg))
               translateY(-2px);
}

/* ── Magnetic buttons ──────────────────────────────────────── */
.is-magnetic {
    transition: transform 0.22s var(--ease-spring);
    will-change: transform;
}

/* ── Ripple + press ────────────────────────────────────────── */
.click-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 68%);
    animation: rippleExpand 560ms var(--ease-exit) forwards;
}
@keyframes rippleExpand {
    from { transform: scale(0); opacity: 0.8; }
    to   { transform: scale(1); opacity: 0; }
}
.is-pressed { animation: clickPress 200ms var(--ease-spring); }
@keyframes clickPress {
    0%   { transform: scale(1); }
    42%  { transform: scale(0.965); }
    100% { transform: scale(1); }
}
.btn-primary.is-pressed, .mega-cta-btn.is-pressed {
    animation: clickPressChrome 200ms var(--ease-spring);
}
@keyframes clickPressChrome {
    0%   { transform: translateY(0); }
    42%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* ── Interactifs : cursor + focus (ui-ux-pro-max checklist) ─ */
a, button, [role="button"], .hub-card, .process-card, .news-card,
.rev-card, .fix-card, .retrouvez-card, .shop-tag, .service-card,
.wheel-toggle, .auth-tab, label.checkbox-label {
    cursor: pointer;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.mega-cta-btn:focus-visible, .hub-card:focus-visible,
.wheel-toggle:focus-visible, .auth-tab:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--green-soft);
    outline-offset: 3px;
}

/* ── Header entrée ─────────────────────────────────────────── */
.motion-ready .header {
    animation: headerSlide 0.75s var(--ease-enter) both;
}
@keyframes headerSlide {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}

/* ── Hero page : léger parallax au scroll ──────────────────── */
.motion-ready .hero-page-content,
.motion-ready .news-header,
.motion-ready .hub-page-header {
    transform: translateY(calc(var(--scroll-y, 0) * -0.04px));
    transition: transform 0.1s linear;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .motion-ready .bg-grid,
    .motion-ready .bg-glow,
    .motion-ready .header,
    .stagger-in { animation: none !important; }
    .motion-ready .bg-grid,
    .motion-ready .bg-glow { transform: none !important; }
    .js-motion main section:not(.wheel-scene),
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .cursor-dot, .cursor-outline { display: none !important; }
    .is-tilting, .is-magnetic { transform: none !important; }
    html.scroll-down.scrolled-far .header { transform: none !important; }
}