/* TM Motion Kit — zero-dependency motion. Copy, don't link.
   Animated rules live only in prefers-reduced-motion: no-preference.
   Default (reduced motion, or no JS) is the final visible state. */

:root {
  --tm-out: var(--ease-soft);
  --tm-move: var(--ease-snappy);
  --tm-reveal-delay: 0ms;
}

[data-reveal],
[data-rise] {
  opacity: 1;
  transform: none;
}

[data-rule] {
  transform: scaleX(1);
  transform-origin: left;
}

.dot {
  background: var(--gold);
}

[data-kenburns] {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.06);
  transform-origin: 50% 50%;
}

[data-sticky-cta] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  transform: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

[data-marquee] {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

[data-marquee-track] {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
}

[data-marquee].tm-marquee-static [data-marquee-track],
[data-marquee].tm-marquee-static {
  display: flex;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
  html.tm-motion [data-reveal]:not(.tm-in) {
    opacity: 0;
    transform: translateY(12px);
  }

  html.tm-motion [data-reveal].tm-in,
  html.tm-motion [data-rise].tm-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-soft) var(--tm-out) var(--tm-reveal-delay),
      transform var(--dur-soft) var(--tm-out) var(--tm-reveal-delay);
  }

  html.tm-motion [data-rise]:not(.tm-in) {
    opacity: 0;
    transform: translateY(12px);
  }

  html.tm-motion [data-rule]:not(.tm-in) {
    transform: scaleX(0);
  }

  html.tm-motion [data-rule].tm-in {
    transform: scaleX(1);
    transition: transform var(--dur-snappy) var(--tm-move) var(--tm-reveal-delay);
  }

  html.tm-motion [data-dots] .dot:not(.tm-fill) {
    background: transparent;
  }

  html.tm-motion [data-dots] .dot.tm-fill {
    background: var(--gold);
    transition: background var(--dur-snappy) var(--tm-move);
  }

  html.tm-motion [data-magnet] {
    transition: transform var(--dur-snappy) var(--tm-move);
  }

  html.tm-motion [data-lift] {
    transition:
      transform var(--dur-snappy) var(--tm-out),
      box-shadow var(--dur-snappy) var(--tm-out);
  }

  html.tm-motion [data-lift][data-reveal].tm-in {
    transition:
      opacity var(--dur-soft) var(--tm-out) var(--tm-reveal-delay),
      transform var(--dur-snappy) var(--tm-out),
      box-shadow var(--dur-snappy) var(--tm-out);
  }

  @media (hover: hover) and (pointer: fine) {
    html.tm-motion [data-lift]:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(15, 42, 68, 0.14);
    }
  }

  html.tm-motion [data-kenburns]:not(.tm-kb-final) {
    transform: scale(1);
  }

  html.tm-motion [data-kenburns].tm-kb-run {
    animation: tm-kenburns 10s var(--tm-move) forwards;
  }

  html.tm-motion [data-kenburns].tm-kb-run:not(.tm-kb-on) {
    animation-play-state: paused;
  }

  html.tm-motion [data-sticky-cta]:not(.tm-sticky-in) {
    transform: translateY(100%);
    pointer-events: none;
  }

  html.tm-motion [data-sticky-cta].tm-sticky-in {
    transform: none;
    transition: transform var(--dur-soft) var(--tm-out);
  }

  html.tm-motion [data-marquee].tm-marquee-run [data-marquee-track] {
    width: max-content;
    animation: tm-marquee 28s linear infinite;
  }

  html.tm-motion [data-marquee].tm-marquee-run:hover [data-marquee-track],
  html.tm-motion [data-marquee].tm-marquee-run:focus-within [data-marquee-track] {
    animation-play-state: paused;
  }

  html.tm-motion .timeline[data-today] li[data-current] .dot {
    animation: tm-today 2s var(--ease-soft) infinite;
  }

  @keyframes tm-today {
    0%, 100% { box-shadow: 0 0 0 0 rgba(194, 161, 90, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(194, 161, 90, 0); }
  }

  @keyframes tm-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
  }

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

html.tm-motion-off [data-reveal],
html.tm-motion-off [data-reveal]:not(.tm-in),
html.tm-motion-off [data-rise],
html.tm-motion-off [data-rise]:not(.tm-in) {
  opacity: 1;
  transform: none;
}

html.tm-motion-off [data-rule] {
  transform: scaleX(1);
}

html.tm-motion-off [data-dots] .dot {
  background: var(--gold);
}

html.tm-motion-off [data-sticky-cta],
html.tm-motion-off [data-sticky-cta]:not(.tm-sticky-in) {
  transform: none;
  pointer-events: auto;
}

html.tm-motion-off [data-kenburns] {
  transform: scale(1.06);
}

html.tm-motion-off [data-marquee-track] {
  flex-wrap: wrap;
  width: auto;
}