/* Tally motion kit v1.0 — CSS half. Pair with tally.js.
   Everything is driven by tokens so a site can retune the feel in one place. */
:root {
  --t-dur: .9s;
  --t-ease: cubic-bezier(.22, .8, .18, 1);
  --t-rise: 28px;
  --t-stagger: 55ms;
  --t-delay: 0ms;
  --t-gate: currentColor;
}

/* ---- reveals ---- */
html.t-js [data-t="rise"],
html.t-js [data-t="fade"],
html.t-js [data-t="scale"],
html.t-js [data-t="blur"] {
  transition: opacity var(--t-dur) var(--t-ease) var(--t-delay),
              transform var(--t-dur) var(--t-ease) var(--t-delay),
              filter var(--t-dur) var(--t-ease) var(--t-delay);
}
html.t-js [data-t="rise"]      { opacity: 0; transform: translate3d(0, var(--t-rise), 0); }
html.t-js [data-t="fade"]      { opacity: 0; }
html.t-js [data-t="scale"]     { opacity: 0; transform: scale(.96); }
html.t-js [data-t="blur"]      { opacity: 0; filter: blur(14px); }
html.t-js [data-t="rise"].is-in,
html.t-js [data-t="fade"].is-in,
html.t-js [data-t="scale"].is-in,
html.t-js [data-t="blur"].is-in { opacity: 1; transform: none; filter: none; }

/* wipes clip an inner wrapper (tally.js adds .t-wipe) so the element itself
   stays fully measurable by IntersectionObserver */
.t-wipe { display: block; height: 100%; }
span.t-wipe { display: inline-block; height: auto; }
html.t-js [data-t^="wipe"] > .t-wipe { transition: clip-path var(--t-dur) var(--t-ease) var(--t-delay); }
html.t-js [data-t="wipe-up"] > .t-wipe    { clip-path: inset(100% 0 0 0); }
html.t-js [data-t="wipe-down"] > .t-wipe  { clip-path: inset(0 0 100% 0); }
html.t-js [data-t="wipe-right"] > .t-wipe { clip-path: inset(0 100% 0 0); }
html.t-js [data-t^="wipe"].is-in > .t-wipe { clip-path: inset(0 0 0 0); }

/* svg line drawing: give the path pathLength="1" */
html.t-js [data-t="draw"] path,
html.t-js [data-t="draw"] line,
html.t-js [data-t="draw"] polyline,
html.t-js [data-t="draw"] circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset calc(var(--t-dur) * 1.4) var(--t-ease) var(--t-delay);
}
html.t-js [data-t="draw"].is-in path,
html.t-js [data-t="draw"].is-in line,
html.t-js [data-t="draw"].is-in polyline,
html.t-js [data-t="draw"].is-in circle { stroke-dashoffset: 0; }

/* ---- split text ---- */
[data-t-split] .t-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-t-split] .t-wi { display: inline-block; }
html.t-js [data-t-split] .t-wi {
  transform: translate3d(0, 110%, 0);
  transition: transform var(--t-dur) var(--t-ease) calc(var(--t-delay) + var(--i) * var(--t-stagger));
}
html.t-js [data-t-split].is-in .t-wi { transform: none; }
html.t-js [data-t-split="chars"] .t-wi { transform: none; transition: none; }
[data-t-split="chars"] .t-c { display: inline-block; }
html.t-js [data-t-split="chars"] .t-c {
  transform: translate3d(0, 110%, 0);
  transition: transform calc(var(--t-dur) * .8) var(--t-ease) calc(var(--t-delay) + var(--i) * var(--t-stagger) * .5);
}
html.t-js [data-t-split="chars"].is-in .t-c { transform: none; }

/* ---- tally marks ---- */
[data-t-tally] { display: inline-block; line-height: 0; }
.t-tally { height: 1em; width: calc(1em * var(--t-tally-w, 1)); display: inline-block; vertical-align: -.12em; overflow: visible; }
.t-tally path {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
}
html.t-js .t-tally path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .32s cubic-bezier(.4, 0, .2, 1) calc(var(--t-delay) + var(--d));
}
html.t-js [data-t-tally].is-in .t-tally path { stroke-dashoffset: 0; }
.t-tally .t-gate { stroke: var(--t-gate); }

/* ---- marquee ---- */
[data-t-marquee] { overflow: hidden; white-space: nowrap; display: flex; }
.t-marquee-track { display: inline-flex; flex: none; align-items: center; will-change: transform; }

/* ---- progress helpers ---- */
[data-t-progress] { --p: 0; --ps: 0; }
.t-stack { position: sticky; top: 0; }

/* ---- reduced motion: everything is simply there ---- */
html.t-reduced [data-t],
html.t-reduced .t-wipe,
html.t-reduced [data-t-split] .t-wi,
html.t-reduced [data-t-split] .t-c,
html.t-reduced .t-tally path {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
  filter: none !important; transition: none !important; stroke-dashoffset: 0 !important;
}
html.t-reduced .t-marquee-track { transform: none !important; }
html.t-reduced [data-t-progress] { --p: 1; --ps: 1; }