/* MAT animated kit (APPLYKIT 2026-10-17) - pairs with anim.js. Colours only from kit.css tokens. */

/* rotating headline: every word sits in one grid cell, so the cell is as wide as the longest */
.a-rot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.a-rot-w { grid-area: 1 / 1; justify-self: center; white-space: nowrap; opacity: 0; transform: translateY(.6em);
  background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.a-rot-w:not([data-on]) { visibility: hidden; }
.a-rot-w[data-on] { opacity: 1; transform: none; }
.a-rot-w[data-out] { opacity: 0; transform: translateY(-.6em); }
.a-rot-static .a-rot-w { transition: none; }

/* tilt cards: a soft light follows the pointer */
.a-tilt { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; position: relative; }
.a-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(420px circle at var(--a-gx, 50%) var(--a-gy, 50%), rgba(var(--brand-rgb), .16), transparent 60%); }
.a-tilt:hover::after { opacity: 1; }

/* marquee */
.a-mq { display: flex; overflow: hidden; gap: var(--a-mq-gap, 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.a-mq-track { display: flex; flex: none; align-items: center; gap: var(--a-mq-gap, 48px); min-width: 100%; justify-content: space-around;
  animation: a-mq var(--a-mq-dur, 30s) linear infinite; }
.a-mq:hover .a-mq-track, .a-mq:focus-within .a-mq-track { animation-play-state: paused; }
.a-mq-item { flex: none; white-space: nowrap; color: var(--k-text-2); }
.a-mq-static { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
.a-mq-static .a-mq-track { animation: none; flex-wrap: wrap; justify-content: center; }
@keyframes a-mq { to { transform: translateX(calc(-100% - var(--a-mq-gap, 48px))); } }

/* vertical timeline */
.a-tl { list-style: none; margin: 0; padding: 0 0 0 32px; position: relative; }
.a-tl::before, .a-tl::after { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; }
.a-tl::before { background: var(--k-border-2); }
.a-tl::after { background: var(--brand-grad); transform-origin: top; transform: scaleY(var(--a-tl-fill, 0)); }
.a-tl > li { position: relative; padding: 0 0 28px; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.a-tl > li::before { content: ""; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--k-bg); border: 2px solid var(--k-border-3); transition: border-color .4s, box-shadow .4s; z-index: 1; }
.a-tl > li[data-a-in] { opacity: 1; transform: none; }
.a-tl > li[data-a-in]::before { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .15); }

/* backgrounds */
.a-bg-host { position: relative; isolation: isolate; overflow: hidden; }
.a-particles, .a-aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.a-aurora { background:
    radial-gradient(40% 55% at 20% 30%, rgba(var(--brand-rgb), .30), transparent 70%),
    radial-gradient(35% 50% at 80% 20%, rgba(var(--brand-2-rgb), .26), transparent 70%),
    radial-gradient(45% 45% at 55% 85%, rgba(var(--brand-rgb), .18), transparent 70%);
  filter: blur(30px); animation: a-aurora 18s ease-in-out infinite alternate; }
@keyframes a-aurora { 50% { transform: translate3d(-4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(3%, -2%, 0) scale(1.02); } }

/* smooth anchors only; no scroll-jacking (iOS momentum stays native) */
html.a-smooth { scroll-behavior: smooth; scroll-padding-top: var(--a-anchor-offset, 80px); }

@media (prefers-reduced-motion: reduce) {
  .a-rot-w, .a-tilt, .a-tl > li, .a-tl::after { transition: none !important; }
  .a-mq-track, .a-aurora { animation: none !important; }
  html.a-smooth { scroll-behavior: auto; }
}