/* ==========================================================================
   TeamTrek V3 — Motion
   One easing curve (--ease-brand) and four duration bands:
     micro .18s · ui .32s · reveal .56s · figure .8s
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes maskUp   { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUpSm { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroFrame{ from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes tt-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes tt-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tt-bar   { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes tt-ping  { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes marquee  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* The signal rail's newest value: a short rise and settle, not a bounce. */
@keyframes railLand {
  from { transform: translate3d(0, 8px, 0) scale(.97); }
  to   { transform: none; }
}

/* --------------------------------------------------------------------------
   Hero entrance — line masks + staggered fades, plays once on load
   -------------------------------------------------------------------------- */
.mask-line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.mask-line > span {
  display: block; will-change: transform;
  transform: translateY(112%);
  animation: maskUp .9s var(--ease-brand) forwards;
}
.hero-in { opacity: 0; animation: fadeUp var(--dur-reveal) var(--ease-brand) forwards; }
.hero-in--fade { animation-name: fadeIn; }

.d-06 { animation-delay: .06s; }
.d-14 { animation-delay: .14s; }
.d-24 { animation-delay: .24s; }
.d-38 { animation-delay: .38s; }
.d-48 { animation-delay: .48s; }
.d-58 { animation-delay: .58s; }
/* The trust row staggers item by item, so the eye lands on each point rather
   than on three arriving at once. */
.d-64 { animation-delay: .64s; }
.d-70 { animation-delay: .70s; }

/* --------------------------------------------------------------------------
   Scroll reveal — IntersectionObserver adds .is-visible
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-brand),
              transform var(--dur-reveal) var(--ease-brand);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="24"]    { transform: translateY(24px); }
[data-reveal="scale"] { transform: translateY(20px) scale(.985); }

/* Gives a two-column section a sense of the copy arriving from its own side
   rather than both halves rising together. */
[data-reveal="left"] { transform: translate3d(-24px, 8px, 0); }

/* A larger figure reads better arriving with a little depth than a lift. */
[data-reveal="figure"] {
  transform: translate3d(0, 28px, 0) scale(.975);
  transition-duration: var(--dur-figure);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Auto-stagger
   js/animations.js walks a [data-stagger] container once and writes a
   --reveal-delay onto each child, so a row of cards ripples in without every
   item carrying a hand-tuned inline delay. The step is set per container:
   data-stagger="80" = 80ms between children.
   -------------------------------------------------------------------------- */
[data-stagger] > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-brand),
              transform var(--dur-reveal) var(--ease-brand);
  transition-delay: var(--reveal-delay, 0s);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Off-screen animation pause
   Sections marked [data-anim-visible] hold their looping animations until
   they are actually near the viewport. js/animations.js toggles .is-offscreen.
   The privacy section alone carries 36 looping sparkline bars; leaving those
   running the whole time is work nobody can see.
   Defaults to running so the animations still play if the script never loads.
   -------------------------------------------------------------------------- */
[data-anim-visible].is-offscreen,
[data-anim-visible].is-offscreen *::before,
[data-anim-visible].is-offscreen *::after,
[data-anim-visible].is-offscreen * { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   Reduced motion — resolve everything to its final state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .mask-line > span,
  .hero-in,
  .hero__figure-inner { opacity: 1 !important; transform: none !important; animation: none !important; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .tab-enter > *,
  .tab-in { opacity: 1 !important; transform: none !important; animation: none !important; }

  .hero__grid,
  .marquee__track,
  .dot-live,
  .signal__spark span,
  .rail__row.is-current > .rail__row-val { animation: none !important; }

  [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .logo--animate .logo__bar { transform: none !important; }
  .rail__row { transform: none !important; }
  .rail__step.is-active,
  .rail__step.is-active .rail__step-dot { transform: none !important; }
  .how__step,
  .how__step-dot { transform: none !important; }
  .how__step.is-active .how__step-dot { margin-left: 0 !important; }
  .how__panel { transform: none !important; }

  .hero__figure,
  .hero__aux { transform: none !important; }
}