/* =========================================================
   SPOT CORPORATION — Motion tokens & utilities
   ---------------------------------------------------------
   Mirrors js/motion.js (durations there are in seconds). Change both
   together. Rules: CLAUDE.md « Motion ».

   Under prefers-reduced-motion: reduce every duration token drops to
   0ms and every travel distance to 0, so anything built on these
   tokens is reduced-motion safe without a rule of its own.
   ========================================================= */
:root{
  --m-instant: 120ms;
  --m-fast: 180ms;
  --m-base: 240ms;
  --m-slow: 400ms;
  --m-slower: 700ms;

  --m-ease: cubic-bezier(.22,1,.36,1);          /* enter / settle — the house curve */
  --m-ease-in-out: cubic-bezier(.65,0,.35,1);   /* A → B on screen */
  --m-ease-emphasized: cubic-bezier(.16,.84,.32,1); /* hero, one per screen */
  --m-ease-exit: cubic-bezier(.4,0,1,1);        /* leaving, shorter than entering */

  --m-nudge: 4px;
  --m-small: 12px;
  --m-medium: 24px;

  --m-press-scale: .97;
  --m-hover-lift: -2px;
}
@media (prefers-reduced-motion: reduce){
  :root{
    --m-instant: 0ms; --m-fast: 0ms; --m-base: 0ms; --m-slow: 0ms; --m-slower: 0ms;
    --m-nudge: 0px; --m-small: 0px; --m-medium: 0px;
    --m-press-scale: 1; --m-hover-lift: 0px;
  }
}

/* ---------- Reveal (js: SpotMotion.reveal) ----------
   Only elements JS has marked .m-pending are hidden — never by
   markup alone, so a page without JS is complete. */
.m-pending{ opacity:0; }

/* ---------- Hover / press ---------- */
.m-lift{ transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease); }
@media (hover:hover){ .m-lift:hover{ transform: translateY(var(--m-hover-lift)); } }
.m-press{ transition: transform var(--m-instant) var(--m-ease); }
.m-press:active{ transform: scale(var(--m-press-scale)); }

/* ---------- Enter (modal, page, panel) ---------- */
@keyframes m-fade-up{ from{ opacity:0; transform: translateY(var(--m-small)); } to{ opacity:1; transform:none; } }
@keyframes m-scale-in{ from{ opacity:0; transform: scale(.96); } to{ opacity:1; transform:none; } }
@keyframes m-fade{ from{ opacity:0; } to{ opacity:1; } }
.m-enter{ animation: m-fade-up var(--m-slow) var(--m-ease) both; }
.m-enter-scale{ animation: m-scale-in var(--m-base) var(--m-ease) both; }
.m-enter-fade{ animation: m-fade var(--m-base) var(--m-ease) both; }

/* ---------- Marquee (js: SpotMotion.marquee pauses it) ----------
   <div class="m-marquee"><div class="m-marquee-track">…content twice…</div></div> */
.m-marquee{ overflow:hidden; }
.m-marquee-track{ display:flex; width:max-content; animation: m-marquee var(--m-marquee-duration, 32s) linear infinite; }
.m-marquee:hover .m-marquee-track,
.m-marquee:focus-within .m-marquee-track,
.m-marquee.m-paused .m-marquee-track{ animation-play-state: paused; }
@keyframes m-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .m-marquee-track{ animation: none; } }

/* ---------- Carousel / ad panel (js: SpotMotion.carousel) ---------- */
[data-carousel]{ position:relative; }
[data-carousel] [data-slide][hidden]{ display:none !important; }
[data-carousel-dots]{ display:flex; gap:8px; justify-content:center; }
.m-dot{ width:8px; height:8px; padding:0; border-radius:50%; border:0; background: currentColor; opacity:.3;
  transition: opacity var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease); cursor:pointer; }
.m-dot[aria-current="true"]{ opacity:1; transform: scale(1.25); }
.m-dot:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* ---------- Tilt (js: SpotMotion.tilt) ---------- */
.m-tilt{ transform-style: preserve-3d; will-change: transform; }