/* Yalla2x v4 motion (docs/motion/MOTION-AND-LAYOUT-SPEC.md, parts A and B): tokens, the hidden and entering states of
   the engine (js/motion.js), the hero keyframes, hover and press, the marquee, the rails' markers, the CTA glow, the
   footer, print and reduced motion. Loaded after site.css and sections.css, before the page CSS.
   The state contract (B2): hidden states exist only under html.m-on (js/motion-boot.js) and only on elements that are
   not .m-in yet; transitions exist only while .m-in:not(.m-done); no rule here gives .m-in or .m-done a final value, so
   the final state is always the component's own CSS (its hover lift included). Only opacity, transform and (heading
   words and hero lines only) filter move. Under prefers-reduced-motion html never gets m-on, so nothing here hides or
   moves anything; the hero keyframes sit inside (prefers-reduced-motion: no-preference) in the page files. */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* quint-out: every entrance and settle */
  --m-ease-io: cubic-bezier(0.65, 0, 0.35, 1);     /* state changes that run both ways */
  --m-t-xs: 120ms;
  --m-t-s: 240ms;
  --m-t-m: 480ms;
  --m-t-l: 720ms;
  --m-t-xl: 1100ms;
  --m-t-xxl: 1400ms;
  --m-rise: 48px;
  --m-blur: 6px;
  --m-blur-hero: 8px;
}
@media (max-width: 767px) {
  :root { --m-rise: 32px; --m-blur: 0px; --m-blur-hero: 4px; }
}

/* ---------- hero keyframes (M1; used by pages/home.css and pages/inner-hero.css) ---------- */
@keyframes m-line { from { opacity: 0.12; transform: translate3d(0, 0.3em, 0); filter: blur(var(--m-blur-hero)); } }
@keyframes m-lag { from { transform: translate3d(0, 0.35em, 0); } }
@keyframes m-fade { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes m-slide { from { opacity: 0; transform: translate3d(-12px, 0, 0); } }
@keyframes m-settle { from { transform: scale(1.04); } }
@keyframes m-appear { from { opacity: 0; } }
@keyframes m-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- durations by kind (each element sets its own, so nothing is inherited by accident) ---------- */
:is([data-motion], .reveal, .m-item, .m-content) { --m-dur: var(--m-t-l); }
:is([data-motion="fade"], [data-motion="slide"], [data-motion="scale"], .m-content, .m-item[data-m-each="fade"], .m-item[data-m-each="slide"]) { --m-dur: var(--m-t-m); }
:is([data-motion="pop"], .m-item[data-m-each="pop"]) { --m-dur: var(--m-t-s); }
[data-motion="draw"] { --m-dur: var(--m-t-xl); }

/* ---------- 1. hidden states ---------- */
.m-on :is([data-motion="fade"], [data-motion="rise"], [data-motion="panel"], [data-motion="slide"], [data-motion="pop"], [data-motion="scale"], .reveal):not(.m-in),
.m-on :is([data-motion="words"], [data-motion="lines"]):not(.m-split):not(.m-in),
.m-on .m-item:not(.m-in), .m-on .m-content:not(.m-in) { opacity: 0; }
/* a picture inside a card: the card fades, only its picture settles */
.m-on .m-host [data-motion="scale"]:not(.m-in) { opacity: 1; }

.m-on :is([data-motion="rise"], [data-motion="panel"], .reveal, .m-item[data-m-each="rise"], .m-item[data-m-each="panel"]):not(.m-in) { transform: translate3d(0, var(--m-rise), 0); }
.m-on :is([data-motion="fade"], .m-item[data-m-each="fade"], .m-content):not(.m-in) { transform: translate3d(0, 16px, 0); }
.m-on :is([data-motion="slide"], .m-item[data-m-each="slide"]):not(.m-in) { transform: translate3d(-12px, 0, 0); }
.m-on :is([data-motion="pop"], .m-item[data-m-each="pop"]):not(.m-in) { transform: scale(0.92); }
.m-on .ftr .m-item:not(.m-in) { transform: translate3d(0, 24px, 0); }
.m-on [data-motion="scale"]:not(.m-in) :is(img, video) { transform: scale(1.08); }
.m-on [data-motion="draw"]:not(.m-in) { transform: scaleX(0); }
.m-on [data-motion="draw"][data-motion-axis="y"]:not(.m-in) { transform: scaleY(0); }
[data-motion="draw"] { transform-origin: left center; }
[data-motion="draw"][data-motion-origin="end"] { transform-origin: right center; }
[data-motion="draw"][data-motion-axis="y"] { transform-origin: center top; }
[data-motion="draw"][data-motion-axis="y"][data-motion-origin="end"] { transform-origin: center bottom; }

/* split words (M2, M3): each word is a box (a transform is ignored on an inline span), also after the entrance */
.m-split .m-w { display: inline-block; }
.m-split > .sr, .m-split > :is(h2, p) > .sr { -webkit-user-select: none; user-select: none; }   /* a copy gets the visible words once */
.m-on .m-split:not(.m-in) .m-w { opacity: 0; transform: translate3d(0, 0.3em, 0); filter: blur(var(--m-blur)); }
.m-on [data-motion="lines"].m-split:not(.m-in) .m-w { transform: translate3d(0, 12px, 0); filter: none; }

/* count (M8): the final number keeps the width at opacity 0, the live number sits over it */
.m-count { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.m-count__ghost { opacity: 0; }
.m-count__live { position: absolute; left: 0; top: 0; white-space: nowrap; }

/* bars and ticks (M9) */
[data-motion="bars"] > i { transform-origin: center bottom; }
.m-on [data-motion="bars"]:not(.m-in) > i { transform: scaleY(0); }
:where([data-motion="ticks"]) { position: relative; }
[data-motion="ticks"]::after {
  content: ""; position: absolute; inset: -1px; background: var(--m-cover, var(--panel)); pointer-events: none;
  transform: scaleX(0); transform-origin: right center;
}
.m-on [data-motion="ticks"]:not(.m-in)::after { transform: none; }

/* glow (M17) and the gradient tile's own glow (SL-02): only the ::before layer moves */
.m-on [data-motion="glow"]:not(.m-in)::before,
.m-on .sl-tile--gradient.m-item:not(.m-in)::before { opacity: 0; transform: scale(0.85); }

/* rails' markers (M10): grey until the rail passes them */
.m-on [data-motion-marker]:not(.m-lit)::after { background-color: var(--m-mark-off, #fff); border-color: var(--line-2); }

/* CTA links (M10): the underline draws once the link is in */
.m-on .cta .alink:not(.m-in)::after { transform: scaleX(0); }

/* ---------- 2. transitions, only while entering ---------- */
.m-in:not(.m-done) {
  transition: opacity var(--m-dur, 480ms) var(--m-ease) var(--m-delay, 0ms), transform var(--m-dur, 480ms) var(--m-ease) var(--m-delay, 0ms);
}
.m-in:not(.m-done):is([data-motion="fade"], [data-motion="slide"], [data-motion="rise"], [data-motion="panel"], [data-motion="pop"], [data-motion="scale"], .reveal, .m-item) { will-change: transform, opacity; }
.m-split.m-in:not(.m-done) .m-w {
  transition: opacity var(--m-t-m) var(--m-ease) calc(var(--m-delay, 0ms) + var(--d, 0ms)),
    transform var(--m-t-m) var(--m-ease) calc(var(--m-delay, 0ms) + var(--d, 0ms)),
    filter var(--m-t-m) var(--m-ease) calc(var(--m-delay, 0ms) + var(--d, 0ms));
}
[data-motion="scale"].m-in:not(.m-done) :is(img, video) { transition: transform var(--m-t-xl) var(--m-ease) var(--m-delay, 0ms); }
.sl-rail__line.m-in:not(.m-done) { transition-timing-function: linear; }   /* a process rail reaches its markers at even intervals */
[data-motion="bars"].m-in:not(.m-done) > i { transition: transform var(--m-t-l) var(--m-ease) calc(var(--m-delay, 0ms) + var(--d, 0ms)); }
[data-motion="ticks"].m-in:not(.m-done)::after { transition: transform var(--m-t-l) var(--m-ease) var(--m-delay, 0ms); }
:is([data-motion="glow"], .sl-tile--gradient).m-in:not(.m-done)::before {
  transition: opacity var(--m-t-xl) var(--m-ease) var(--m-delay, 0ms), transform var(--m-t-xl) var(--m-ease) var(--m-delay, 0ms);
}
[data-motion-marker].m-lit::after { transition: background-color var(--m-t-s) var(--m-ease) var(--m-mark, 0ms), border-color var(--m-t-s) var(--m-ease) var(--m-mark, 0ms); }
.cta .alink.m-in:not(.m-done)::after { transition: transform var(--m-t-l) var(--m-ease) calc(var(--m-delay, 0ms) + 240ms); }

/* 4. a state change or keyboard focus: the final state in the same frame */
.m-instant, .m-instant * { transition: none !important; }

/* the end-of-page sentinel (js/motion.js): 1px, without adding to the page's height */
.m-end { height: 1px; margin-top: -1px; pointer-events: none; }
/* an in-page link's target that is focused only so the next Tab starts there (M19) */
.m-target:focus { outline: none; }

/* ---------- marquee (M11; layout in sections.css SL-12) ---------- */
.m-on .sl-marquee.m-run .sl-marquee__track { animation: m-marquee var(--m-marquee-dur, 40s) linear infinite; }
/* the pause states must outrank the rule above: its animation shorthand resets the play state to running */
.m-on .sl-marquee.m-run:is(.is-off, .is-paused, :hover, :focus-within) .sl-marquee__track { animation-play-state: paused; }

/* ---------- hover and press (M15), magnetic return (M16), accordion icon (M13) ---------- */
@media (prefers-reduced-motion: no-preference) {
  :is(a.card, a.mcard, a.post, a.sl-tile) {
    position: relative;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform var(--m-t-s) var(--ease);
  }
  :is(a.card, a.mcard, a.post, a.sl-tile)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;   /* an outer shadow paints only outside the card */
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.28); opacity: 0; transition: opacity var(--m-t-s) var(--ease);
  }
  :is(a.card, a.mcard, a.post, a.sl-tile):focus-visible { transform: translate3d(0, -4px, 0); }
  :is(a.card, a.mcard, a.post, a.sl-tile):focus-visible::after { opacity: 1; }
  .btn:active {
    transform: scale(0.97);
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform var(--m-t-xs) var(--ease);
  }
  .m-mag-back { transition: translate 400ms var(--m-ease); }
  .acc__icon::before, .acc__icon::after { transition-timing-function: var(--m-ease-io); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is(a.card, a.mcard, a.post, a.sl-tile):hover { transform: translate3d(0, -4px, 0); }
  :is(a.card, a.mcard, a.post, a.sl-tile):hover::after { opacity: 1; }
  :is(a.card, a.mcard, a.post, a.sl-tile):active { transform: translate3d(0, -2px, 0); transition-duration: 0.3s, 0.3s, var(--m-t-xs); }
}

/* ---------- print: everything shows ---------- */
@media print {
  .m-on :is([data-motion], .reveal, .m-item, .m-content), .m-on :is([data-motion], .reveal, .m-item, .m-content) * {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .sl-marquee__track { animation: none !important; }
}