/* ==========================================================================
   Exoframe Labs — motion.css
   Keyframes + motion tokens applied. Enters use --ease-out with a 40ms
   stagger via --i. Only sparkle / badge / toast overshoot (--ease-pop).
   With motion off every duration is 0ms (tokens.css) and loops stop here.
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.62) rotate(45deg); opacity: .55; }
}

@keyframes spark-pop {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.6); opacity: .6; }
}

@keyframes chip-pop {
  0% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@keyframes badge-pop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -150% 0, 0 0; }
  100% { background-position: 250% 0, 0 0; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes enter-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(.96); }
    to { opacity: 1; transform: none; }
  }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(var(--dx, 0px)) scale(1); }
  to { opacity: 0; transform: translateX(var(--dx, 0px)) scale(.94); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes modal-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(4px) scale(.97); }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes sheet-out {
  from { transform: translateY(var(--sheet-dy, 0px)); }
  to { transform: translateY(100%); }
}

@keyframes tile-in {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@keyframes tile-out {
  to { opacity: 0; transform: scale(.9); }
}

@keyframes trail {
  from { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--tx), calc(var(--ty) - 14px)) scale(.2) rotate(90deg); }
}

/* ---- Applied --------------------------------------------------------- */
.twinkle {
  animation: twinkle var(--d-twinkle) var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 220ms);
  transform-origin: center;
  transform-box: fill-box;
}
.loader .spark { animation: twinkle var(--d-twinkle) var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.loader .spark:nth-child(2) { animation-delay: 220ms; }
.loader .spark:nth-child(3) { animation-delay: 440ms; }

.pop-in { animation: spark-pop var(--d-base) var(--ease-pop) both; }
.badge.is-popping { animation: badge-pop var(--d-base) var(--ease-pop) both; }

/* Scroll-triggered enters: hidden only once JS confirms it will reveal */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--d-stagger));
}

/* ---- Motion off: stop loops, keep press as an instant state ------------ */
:root[data-motion="off"] .twinkle,
:root[data-motion="off"] .loader .spark,
:root[data-motion="off"] .tile--soon .tile__soon-mark,
:root[data-motion="off"] .badge__dot,
:root[data-motion="off"] .skel,
:root[data-motion="off"] .marquee__track,
:root[data-motion="off"] .spinner { animation: none; }
:root[data-motion="off"] .spinner { border-right-color: color-mix(in srgb, currentColor 30%, transparent); }
:root[data-motion="off"] .marquee { overflow-x: auto; scrollbar-width: none; }
:root[data-motion="off"] .marquee__group[aria-hidden="true"] { display: none; }
:root[data-motion="off"] .tile__trail { display: none; }
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after,
:root[data-motion="off"] ::backdrop {
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) .twinkle,
  :root:not([data-motion]) .loader .spark,
  :root:not([data-motion]) .badge__dot,
  :root:not([data-motion]) .skel,
  :root:not([data-motion]) .marquee__track,
  :root:not([data-motion]) .spinner { animation: none; }
  :root:not([data-motion]) .marquee__group[aria-hidden="true"] { display: none; }
}