/* motion.css · shared motion kit for every site in Tum Kantawee's ecosystem (CI v1 §10.6.1)
 * Source of truth: Source file/_ecosystem/motion/ · copy into each site with ../sync.sh, never edit the copies.
 * Modelled on the DIY ECOM Mastermind page: staggered scroll reveals, headline line-up, underline sweep,
 * count-up numbers, marquee, soft FAQ, header line on scroll, mobile dock.
 *
 * Strength per brand: <html data-motion="calm|play|bold">
 *   calm = kantawee.com, ConsultingThai, LiveSquad, Leverage family (playful ~10%)
 *   play = DIY ECOM sites (stickers wiggle, cards pop)
 *   bold = Mastermind (longer travel, faster stagger)
 * Needs the one-line head snippet (see README.md) so hidden-until-revealed content never flashes.
 * Reduced motion (OS setting or ?motion=off) shows everything at once and stops loops. */

:root,
[data-motion="calm"] {
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
    --m-dist: 16px;
    --m-side: 24px;
    --m-scale: 0.97;
    --m-dur: 0.75s;
    --m-step: 70ms;
    --m-lift: -2px;
    --m-mark: var(--signal, #d7ff3a);
}

[data-motion="play"] {
    --m-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
    --m-dist: 28px;
    --m-side: 36px;
    --m-scale: 0.92;
    --m-dur: 0.8s;
    --m-step: 85ms;
    --m-lift: -4px;
}

[data-motion="bold"] {
    --m-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
    --m-dist: 36px;
    --m-side: 44px;
    --m-scale: 0.94;
    --m-dur: 0.85s;
    --m-step: 60ms;
    --m-lift: -3px;
}

/* ---------- reveal on scroll (motion.js adds .in) ---------- */
.js .rv {
    opacity: 0;
    transform: translate3d(0, var(--m-dist), 0);
    transition: opacity calc(var(--m-dur) * 0.9) var(--m-ease), transform var(--m-dur) var(--m-ease-snap);
    transition-delay: calc(var(--i, 0) * var(--m-step));
}
.js .rv--l { transform: translate3d(calc(var(--m-side) * -1), 0, 0); }
.js .rv--r { transform: translate3d(var(--m-side), 0, 0); }
.js .rv--s { transform: scale(var(--m-scale)); }
.js .rv.in { opacity: 1; transform: none; }

/* fail-safe: if motion.js never runs, show everything after 2.5s */
.js:not(.m-on) .rv,
.js:not(.m-on) .hx { animation: m-show 0s 2.5s forwards; }
@keyframes m-show { to { opacity: 1; transform: none; } }

/* ---------- hero entrance (plays once on load) ---------- */
.m-line { display: block; overflow: hidden; padding: 0.2em 0 0.12em; margin: -0.2em 0 -0.12em; }
.m-line > span { display: block; }
.js .m-line > span { transform: translateY(108%); animation: m-line-up 0.95s var(--m-ease) forwards; animation-delay: calc(0.15s + var(--d, 0) * 0.13s); }
.js .hx { opacity: 0; transform: translateY(calc(var(--m-dist) * 0.65)); animation: m-hx-in 0.8s var(--m-ease) forwards; animation-delay: calc(0.1s + var(--d, 0) * 0.1s); }
@keyframes m-line-up { to { transform: none; } }
@keyframes m-hx-in { to { opacity: 1; transform: none; } }

/* ---------- underline / marker sweep on one key word ---------- */
.mk {
    background-image: linear-gradient(transparent 62%, var(--m-mark) 62%, var(--m-mark) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.js .mk { background-size: 0% 100%; transition: background-size 0.9s var(--m-ease) 0.25s; }
.js .in .mk,
.js .mk.in,
.js .hx .mk { background-size: 100% 100%; }
.js .hx .mk { transition-delay: 0.9s; }

/* section-number rule and stat bars grow from the left */
.rule-grow::after { content: ""; display: inline-block; height: 2px; width: 3.5rem; margin-left: 0.8rem; vertical-align: middle; background: currentColor; transform-origin: left; }
.js .rule-grow::after { transform: scaleX(0); transition: transform 0.9s var(--m-ease) 0.15s; }
.js .in .rule-grow::after, .js .rule-grow.in::after { transform: scaleX(1); }
.bar-grow { position: relative; }
.bar-grow::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--m-bar, var(--m-mark)); transform-origin: left; }
.js .bar-grow::before { transform: scaleX(0); transition: transform 0.9s var(--m-ease); transition-delay: calc(var(--i, 0) * 90ms + 0.2s); }
.js .bar-grow.in::before { transform: scaleX(1); }

/* ---------- count-up numbers keep their width ---------- */
[data-count] { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- hover lift for cards and buttons ---------- */
.lift { transition: transform 0.25s var(--m-ease-snap), box-shadow 0.25s var(--m-ease); }
@media (hover: hover) {
    .lift:hover { transform: translateY(var(--m-lift)); }
}
.lift:active { transform: translateY(1px); }

/* ---------- marquee (motion.js duplicates the track content) ---------- */
.m-marquee { overflow: hidden; }
.m-marquee__track { display: flex; width: max-content; animation: m-marq var(--m-marq, 32s) linear infinite; }
.m-marquee:hover .m-marquee__track { animation-play-state: paused; }
@keyframes m-marq { to { transform: translateX(-50%); } }

/* ---------- FAQ opens softly ---------- */
details[open] > :not(summary) { animation: m-faq-in 0.45s var(--m-ease); }
@keyframes m-faq-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- header gets a line once the page scrolls ---------- */
[data-m-header] { transition: box-shadow 0.3s var(--m-ease), border-color 0.3s var(--m-ease); }
[data-m-header].scrolled { box-shadow: 0 1px 0 var(--m-rule, rgba(12, 29, 51, 0.12)); }

/* ---------- dock: one CTA always reachable on phones ---------- */
.m-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    transition: transform 0.35s var(--m-ease);
}
.m-dock[data-hidden] { transform: translateY(115%); }
@media (min-width: 62rem) { .m-dock { display: none; } }
body.has-dock { padding-bottom: 5rem; }
@media (min-width: 62rem) { body.has-dock { padding-bottom: 0; } }

/* ---------- play / bold only: stickers wiggle, pops overshoot ---------- */
[data-motion="play"] .wiggle,
[data-motion="bold"] .wiggle { animation: m-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes m-wiggle { 0%, 70%, 100% { transform: rotate(var(--tilt, -2deg)); } 78% { transform: rotate(calc(var(--tilt, -2deg) + 4deg)); } 86% { transform: rotate(calc(var(--tilt, -2deg) - 3deg)); } }
.js[data-motion="play"] .pop.in,
.js[data-motion="bold"] .pop.in { animation: m-pop 0.6s var(--m-ease-snap); }
@keyframes m-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { transform: none; } }

/* ---------- reduced motion: everything visible, nothing moves ---------- */
.rm *, .rm *::before, .rm *::after {
    animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important;
}
.rm .rv, .rm .hx, .rm .m-line > span { opacity: 1 !important; transform: none !important; }
.rm .mk { background-size: 100% 100% !important; }
.rm .m-marquee__track { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
    .js .rv, .js .hx, .js .m-line > span { opacity: 1; transform: none; }
    .js .mk { background-size: 100% 100%; }
    .m-marquee__track { animation: none; }
}