/* Kuwal Store motion (P0b). transform/opacity (+ small blur on reveal) only.
   Start states exist ONLY under html.ks-motion (added by an inline head script, skipped for prefers-reduced-motion),
   so no-JS and reduced-motion users see everything immediately. Driven by assets/js/store/motion.js. */

/* ---------- Reveal ---------- */
html.ks-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--ks-rv-y, 24px), 0);
  transition: opacity var(--ks-dur-reveal) var(--ks-ease-out) var(--_d, 0ms), transform var(--ks-dur-reveal) var(--ks-ease-out) var(--_d, 0ms), filter var(--ks-dur-reveal) var(--ks-ease-out) var(--_d, 0ms);
}
html.ks-motion [data-reveal="fade"] { transform: none; }
html.ks-motion [data-reveal="scale"] { transform: scale(.92); }
html.ks-motion [data-reveal="left"] { transform: translate3d(calc(var(--ks-rv-x, 40px) * -1), 0, 0); }
html.ks-motion [data-reveal="right"] { transform: translate3d(var(--ks-rv-x, 40px), 0, 0); }
html.ks-motion [data-reveal="blur"] { transform: translate3d(0, 12px, 0); filter: blur(12px); }
html.ks-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
html.ks-motion [data-reveal].is-in:not(.is-done) { will-change: transform, opacity; }
/* failsafe: if motion.js never runs, show content after 3s */
html.ks-motion:not(.ks-motion-js) [data-reveal] { animation: ks-force-in 1ms linear 3s forwards; }
@keyframes ks-force-in { to { opacity: 1; transform: none; filter: none; } }


/* ---------- Reveal variants: mask (Apple headline) and pop ----------
   <span class="ks-mask"><span data-reveal="mask">Line text</span></span>  (one mask per line; lines stagger in DOM order) */
.ks-mask { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ks-mask.ks-mask--inline { display: inline-block; vertical-align: top; }
html.ks-motion [data-reveal="mask"] {
  display: block; transform: translate3d(0, 110%, 0); opacity: 0;
  transition: transform 900ms var(--ks-ease-out) var(--_d, 0ms), opacity 360ms linear var(--_d, 0ms);
}
html.ks-motion [data-reveal="pop"] {
  transform: translate3d(0, 12px, 0) scale(.88);
  transition: transform 700ms var(--ks-ease-spring) var(--_d, 0ms), opacity 400ms var(--ks-ease-out) var(--_d, 0ms);
}

/* ---------- Float (idle bob) ----------
   <div data-float="slow|med|fast" style="--float-delay:-2s">. Uses transform: put it on an INNER wrapper when the
   same element tree has data-reveal or data-parallax on the outer one (those also write transform). */
html.ks-motion [data-float] { --_fd: 5s; animation: ks-floaty var(--_fd) ease-in-out var(--float-delay, 0s) infinite alternate; }
html.ks-motion [data-float="slow"] { --_fd: 7s; }
html.ks-motion [data-float="fast"] { --_fd: 3.6s; }
html.ks-motion [data-float].is-offscreen { animation-play-state: paused; }
@keyframes ks-floaty { from { transform: translate3d(0, -6px, 0) rotate(-1.5deg); } to { transform: translate3d(0, 6px, 0) rotate(1.5deg); } }

/* ---------- Hover primitives (mouse only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .ks-hover-lift { transition: transform var(--ks-dur-2) var(--ks-ease-out), box-shadow var(--ks-dur-2) var(--ks-ease-out); }
  .ks-hover-lift:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--ks-sh-2); }
  .ks-hover-lift:active { transform: translate3d(0, -1px, 0); box-shadow: var(--ks-sh-1); }
  .ks-hover-zoom { overflow: hidden; }
  .ks-hover-zoom img, .ks-hover-zoom svg, .ks-hover-zoom picture { transition: transform 600ms var(--ks-ease-out); }
  .ks-hover-zoom:hover img, .ks-hover-zoom:hover svg { transform: scale(1.04); }
}

/* ---------- Touch press feedback (mobile_spec §2) ----------
   Default on touch-only devices for .ks-btn, .ks-chip, interactive cards; add .ks-press to anything else tappable. */
.ks-press { -webkit-tap-highlight-color: transparent; transition-property: transform, filter, box-shadow, background-color, border-color, color, opacity; transition-duration: 120ms; transition-timing-function: var(--ks-ease-out); }
.ks-press:active { transform: scale(.97); filter: brightness(.96); }
@media (hover: none) {
  .ks-btn, .ks-chip, .ks-card--interactive, a.ks-card, .ks-tabs__tab, .ks-link-arrow { -webkit-tap-highlight-color: transparent; }
  .ks-btn:active, .ks-chip:active, .ks-card--interactive:active, a.ks-card:active { transform: scale(.97); filter: brightness(.96); transition-duration: 120ms; }
  .ks-card--interactive:hover, a.ks-card:hover { transform: none; }
}

/* ---------- Loading shimmer: add .ks-shimmer to any block (transform-only sweep); .ks-skel-list stacks rows ---------- */
.ks-shimmer { position: relative; overflow: hidden; background: var(--ks-surface-2); color: transparent !important; border-radius: var(--ks-r-sm); min-height: 1em; }
.ks-shimmer > * { visibility: hidden; }
.ks-shimmer::after { content: ""; position: absolute; inset: 0; transform: translate3d(-100%, 0, 0); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: ks-sweep 1.3s var(--ks-ease) infinite; }
[data-theme="games"] .ks-shimmer::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); }
@keyframes ks-sweep { to { transform: translate3d(100%, 0, 0); } }
.ks-skel-list { display: flex; flex-direction: column; gap: var(--ks-s-3); }
.ks-skel-row { display: flex; align-items: center; gap: var(--ks-s-3); }
.ks-skel-row > .ks-shimmer:first-child { width: 64px; height: 64px; flex: none; border-radius: var(--ks-r-md); }
.ks-skel-row > .ks-shimmer:not(:first-child) { flex: 1; height: 44px; }

/* ---------- Rail pagination dots (JS builds .ks-rail-dots after a [data-rail-dots] rail; phones only) ---------- */
.ks-rail-dots { display: none; }
@media (max-width: 767px) {
  .ks-rail-dots { display: flex; justify-content: center; gap: 6px; padding-top: var(--ks-s-2); pointer-events: none; }
  .ks-rail-dots[hidden] { display: none; }
  .ks-rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ks-border-strong); opacity: .6; transition: transform var(--ks-dur-2) var(--ks-ease-spring), opacity var(--ks-dur-2) var(--ks-ease), background-color var(--ks-dur-2) var(--ks-ease); }
  .ks-rail-dots i.is-on { background: var(--ks-primary); opacity: 1; transform: scale(1.5); }
}

/* ---------- Parallax / tilt ---------- */
[data-parallax] { backface-visibility: hidden; }
[data-tilt] { transition: transform var(--ks-dur-3) var(--ks-ease-out); transform-style: preserve-3d; }
[data-tilt].is-tilting { transition: transform 120ms linear; will-change: transform; }

/* ---------- Scroll scenes ----------
   <section class="ks-scene" data-scene data-steps="3" style="--scene-len:280vh">
     <div class="ks-scene__sticky"> ...style with calc(var(--p) * ...) ... </div></section> */
[data-scene] { position: relative; --p: 0; }
@media (min-width: 1024px) { [data-scene] { min-height: min(var(--scene-len, 140vh), 150vh); } }
@media (max-width: 1023.98px) { [data-scene] { min-height: 0; } .ks-scene__sticky { position: relative !important; top: auto !important; height: auto !important; min-height: 0; padding-block: var(--ks-s-6); } }
html:not(.ks-motion) [data-scene] { --p: 1; min-height: 0; }
.ks-scene__sticky { position: sticky; top: var(--ks-header-h, 56px); height: calc(100vh - var(--ks-header-h, 56px)); height: calc(100svh - var(--ks-header-h, 56px)); overflow: hidden; display: flex; align-items: center; justify-content: center; }
html:not(.ks-motion) .ks-scene__sticky { position: static; height: auto; min-height: 0; padding-block: var(--ks-s-7); }

/* ---------- Marquee (CSS-only; JS wraps a track / duplicates for data-marquee="auto") ----------
   <div data-marquee><div class="ks-marquee__track"> ...items... ...same items again (aria-hidden)... </div></div> */
[data-marquee] { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ks-marquee__track { display: flex; align-items: center; width: max-content; animation: ks-marquee var(--ks-marquee-dur, 40s) linear infinite; }
.ks-marquee__track > * { flex: none; margin-right: var(--ks-marquee-gap, 32px); }
[data-marquee]:hover .ks-marquee__track, [data-marquee].is-paused .ks-marquee__track, [data-marquee]:focus-within .ks-marquee__track { animation-play-state: paused; }
@keyframes ks-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Cross-document view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: ks-vt-out var(--ks-dur-2) var(--ks-ease) both; }
  ::view-transition-new(root) { animation: ks-vt-in var(--ks-dur-2) var(--ks-ease-out) both; }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ks-ease-out); }
  ::view-transition-old(*):not(root), ::view-transition-new(*):not(root) { animation-duration: 420ms; }
}
@keyframes ks-vt-out { to { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes ks-vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* ---------- Utility animations ---------- */
.ks-float { animation: ks-float 6s var(--ks-ease) infinite alternate; }
@keyframes ks-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }
.ks-pop { animation: ks-pop var(--ks-dur-3) var(--ks-ease-spring) both; }
@keyframes ks-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ks *, html.ks *::before, html.ks *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-parallax], [data-tilt] { transform: none !important; }
  [data-scene] { --p: 1 !important; min-height: 0 !important; }
  .ks-scene__sticky { position: static !important; height: auto !important; }
  [data-marquee] { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ks-marquee__track { animation: none !important; }
  .ks-float, [data-float], .ks-shimmer::after { animation: none !important; }
  .ks-press:active, .ks-btn:active, .ks-chip:active, .ks-card--interactive:active, a.ks-card:active { transform: none !important; }
  .ks-hover-lift:hover, .ks-hover-zoom:hover img, .ks-hover-zoom:hover svg { transform: none !important; }
  .ks-marquee__track > [aria-hidden="true"] { display: none; }
}