/* Tikehub — animations au scroll (public) */
html.th-motion {
    scroll-behavior: smooth;
}

html.th-motion body {
    overflow-x: hidden;
}

html.th-motion [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
}

html.th-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

html.th-motion [data-reveal] {
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--stagger, 0) * 80ms);
    will-change: opacity, transform;
}

html.th-motion [data-reveal="left"]:not(.is-in) {
    transform: translate3d(-2rem, 0, 0);
}

html.th-motion [data-reveal="right"]:not(.is-in) {
    transform: translate3d(2rem, 0, 0);
}

html.th-motion [data-reveal="scale"]:not(.is-in) {
    transform: scale(0.94);
}

html.th-motion [data-mask]:not(.is-in) {
    clip-path: inset(14% 10% 14% 10% round 2.5rem);
    opacity: 0.45;
    filter: saturate(0.85);
}

html.th-motion [data-mask].is-in {
    clip-path: inset(0 0 0 0 round 1.75rem);
    opacity: 1;
    filter: none;
}

html.th-motion [data-mask] {
    transition:
        clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease,
        filter 0.6s ease;
    transition-delay: calc(var(--stagger, 0) * 70ms);
}

html.th-motion [data-mask="wipe"]:not(.is-in) {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
    filter: none;
}

html.th-motion [data-mask="wipe"].is-in {
    clip-path: inset(0 0 0 0);
}

html.th-motion [data-parallax] {
    will-change: transform;
}

/* Scroll-driven natif quand le navigateur le permet */
@supports (animation-timeline: view()) {
    html.th-motion [data-scroll-fade] {
        animation: th-view-fade linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 42%;
    }

    html.th-motion [data-scroll-rise] {
        animation: th-view-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 36%;
    }
}

@keyframes th-view-fade {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@keyframes th-view-rise {
    from { transform: translate3d(0, 1.75rem, 0); opacity: 0.2; }
    to { transform: none; opacity: 1; }
}

/* Sticky + reveal horizontal (desktop) */
.th-hpin__sticky {
    position: relative;
}

.th-hpin__progress {
    display: none;
}

@media (min-width: 1024px) {
    html.th-motion .th-hpin {
        height: 210vh;
    }

    html.th-motion .th-hpin__sticky {
        position: sticky;
        top: 6.75rem;
        height: calc(100vh - 8.25rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    html.th-motion .th-hpin .th-why__intro {
        margin-bottom: 1.1rem;
    }

    html.th-motion .th-hpin__progress {
        display: block;
        height: 4px;
        width: min(18rem, 40%);
        margin: 0 auto 1.35rem;
        border-radius: 9999px;
        background: rgba(40, 30, 20, 0.08);
        overflow: hidden;
    }

    html.th-motion .th-hpin__progress > span {
        display: block;
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: var(--th-coral, #f26b4a);
        transform-origin: left center;
    }

    html.th-motion .th-hpin [data-hscroll-rail] {
        display: flex;
        flex-wrap: nowrap;
        gap: 1.2rem;
        width: max-content;
        padding-inline: 0.25rem 3rem;
        will-change: transform;
    }

    html.th-motion .th-hpin .th-why-card {
        width: min(22.5rem, 68vw);
        flex: 0 0 auto;
        min-height: 18.5rem;
    }
}

/* Hero : entrée immédiate, carte en parallax */
html.th-motion .th-hero-badge-wrap,
html.th-motion .th-hero__title,
html.th-motion .th-hero .th-lead,
html.th-motion .th-hero__actions,
html.th-motion .th-hero__chips {
    animation: th-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.th-motion .th-hero-badge-wrap { animation-delay: 0.05s; }
html.th-motion .th-hero__title { animation-delay: 0.12s; }
html.th-motion .th-hero .th-lead { animation-delay: 0.22s; }
html.th-motion .th-hero__actions { animation-delay: 0.32s; }
html.th-motion .th-hero__chips { animation-delay: 0.4s; }

html.th-motion .th-hero__title[data-mask="wipe"] {
    animation: th-wipe 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}

html.th-motion .th-hero-card {
    animation: th-rise-scale 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

@keyframes th-rise {
    from { opacity: 0; transform: translate3d(0, 1.4rem, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes th-rise-scale {
    from { opacity: 0; transform: translate3d(0, 2rem, 0) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes th-wipe {
    from { clip-path: inset(0 0 100% 0); opacity: 1; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

html.th-motion .th-hero-card[data-parallax] {
    transform-style: preserve-3d;
}

html.th-motion .th-detail-cover[data-mask],
html.th-motion .th-card img[data-mask],
html.th-motion .th-listing-hero__title[data-mask="wipe"] {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    html.th-motion,
    html.th-motion * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }

    html.th-motion [data-reveal],
    html.th-motion [data-mask] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
    }

    html.th-motion .th-hpin {
        height: auto !important;
    }

    html.th-motion .th-hpin__sticky {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }
}