/**
 * Tokei Motion — animations d'entrée au scroll (style thèmes Shopify premium)
 * Usage : <div data-motion="fade-up" data-motion-delay="150">…</div>
 * Stagger auto : <div data-motion-stagger="90"> <div data-motion="fade-up">…
 * Les éléments ne sont masqués QUE si le JS est actif (html.tkmotion) → aucun
 * contenu invisible si le JS échoue, et rien ne bouge si prefers-reduced-motion.
 */

html.tkmotion [data-motion] {
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

html.tkmotion [data-motion="fade-up"]     { transform: translateY(28px); }
html.tkmotion [data-motion="fade-down"]   { transform: translateY(-28px); }
html.tkmotion [data-motion="fade-left"]   { transform: translateX(32px); }
html.tkmotion [data-motion="fade-right"]  { transform: translateX(-32px); }
html.tkmotion [data-motion="fade"]        { transform: none; }
html.tkmotion [data-motion="zoom-in"]     { transform: scale(0.94); }
html.tkmotion [data-motion="zoom-out-sm"] { transform: scale(1.06); }
html.tkmotion [data-motion="blur-in"]     { filter: blur(10px); transform: scale(1.02); }

html.tkmotion [data-motion].tk-inview {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    html.tkmotion [data-motion] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Bandeau défilant (marquee) — annonce continue façon Shopify
   ============================================================ */
.tk-marquee {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tk-marquee-track {
    display: inline-flex;
    align-items: center;
    animation: tk-marquee 28s linear infinite;
}
@keyframes tk-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tk-marquee-track { animation: none; }
}

/* ============================================================
   Full-bleed : sortir du conteneur max-w-7xl pour occuper 100vw
   (le html a overflow-x:clip, donc pas de scroll horizontal)
   ============================================================ */
.tk-fullbleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Indicateur de scroll du héro */
@keyframes tk-scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(8px); opacity: 1; }
}
.tk-scroll-hint { animation: tk-scroll-hint 2s ease-in-out infinite; }

/* Zoom lent continu sur les médias de héro (effet Ken Burns discret) */
@keyframes tk-slow-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
html.tkmotion .tk-slow-zoom { animation: tk-slow-zoom 18s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
    html.tkmotion .tk-slow-zoom { animation: none; }
}