/* ==========================================================================
   Agility Inc. — extended motion layer (home page led)
   Everything here is additive and every effect resolves to a static,
   correct state under prefers-reduced-motion.
   ========================================================================== */

/* ---- 1. Hero: a light sweep ACROSS the headline ------------------------
   Deliberately an overlay, not a recolour. Earlier this used
   background-clip:text with color:transparent, which leaves the H1 invisible
   if the animation never completes. The headline now always paints normally
   and the sheen rides on top of it. */
.hero .d1{position:relative}
.hero .d1 .sweep{
  position:absolute;inset:-6% 0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,
    transparent 38%,
    color-mix(in srgb,var(--flame-3) 26%,transparent) 47%,
    color-mix(in srgb,#fff 34%,transparent) 50%,
    color-mix(in srgb,var(--flame-3) 26%,transparent) 53%,
    transparent 62%);
  background-size:260% 100%;
  background-position:130% 0;
  /* screen treats fully transparent as neutral, so the headline keeps its
     own colour everywhere the band is not passing */
  mix-blend-mode:screen;opacity:0;
}
.hero .d1 .sweep.lit{animation:heroSheen 1.9s cubic-bezier(.4,0,.2,1) .5s both}
@keyframes heroSheen{
  0%{background-position:130% 0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{background-position:-45% 0;opacity:0}
}

/* ---- 2. Hero: rotating specialism line -------------------------------- */
.now-placing{
  display:flex;align-items:center;gap:.75em;flex-wrap:wrap;
  margin-top:26px;font-size:.95rem;color:var(--muted);letter-spacing:-.005em;
}
.now-placing .live{
  position:relative;display:inline-flex;align-items:center;gap:.55em;flex:none;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-text);
}
.now-placing .live i{
  width:7px;height:7px;border-radius:50%;background:var(--flame-2);flex:none;position:relative;
}
.now-placing .live i::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:livePing 2.2s var(--e-io) infinite;
}
@keyframes livePing{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(3.2);opacity:0}}

.rotator{
  position:relative;display:inline-block;height:1.5em;overflow:hidden;
  /* --rw is measured from the longest item at runtime, so nothing clips */
  min-width:min(var(--rw,22ch),100%);
  vertical-align:bottom;color:var(--fg);font-weight:700;
}
.rotator span{
  position:absolute;left:0;top:0;white-space:nowrap;
  transform:translateY(110%);opacity:0;
  transition:transform .55s var(--e-out),opacity .4s var(--e-out);
}
.rotator span.in{transform:translateY(0);opacity:1}
.rotator span.out{transform:translateY(-110%);opacity:0}

/* ---- 3. Hero settles back as you scroll past it ------------------------ */
.hero-inner{will-change:transform,opacity}

/* ---- 5. Section dividers that draw across ------------------------------ */
.divider{position:relative;height:1px;background:var(--line-2);overflow:visible}
.divider::after{
  content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--flame),var(--flame-3),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--e-out);
}
.divider.is-in::after{transform:scaleX(1)}

/* ---- 6. Parallax depth on stacked cards --------------------------------
   The offset is a custom property, not an inline transform, so the card's
   own hover lift still composes instead of being overridden. */
[data-depth]{will-change:transform}
.card[data-depth]{transform:translate3d(0,var(--dy,0px),0)}
.card[data-depth]:hover{transform:translate3d(0,calc(var(--dy,0px) - 5px),0)}

/* ---- 7. Live pulse on the hero proof figures --------------------------- */
.hero-foot-item{position:relative}
.hero-foot-item.pulse b::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--flame-2);margin-left:8px;vertical-align:middle;
  animation:softPulse 2.4s var(--e-io) infinite;
}
@keyframes softPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---- 8. Panels: arrow travels on hover --------------------------------- */
.panel .panel-foot .arrow-link{position:relative;overflow:hidden;padding-right:2px}
.panel:hover .arrow-link svg{animation:arrowRun .7s var(--e-out)}
@keyframes arrowRun{
  0%{transform:translateX(0)}
  45%{transform:translateX(14px);opacity:0}
  46%{transform:translateX(-14px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}

/* ---- 9. Card lift with a light 3D tilt --------------------------------- */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d;transition:transform .4s var(--e-out)}
  .tilt-inner{transform:translateZ(18px)}
}

/* ---- 10. Chart values count while their bars grow ---------------------- */
.bar-val{transition:color .3s}
.chart.is-in .bar-val{color:var(--fg)}

/* ---- 11. Ticker gets a subtle speed change on hover -------------------- */
.ticker-track{animation-timing-function:linear}

/* ---- reduced motion: everything resolves, nothing loops ---------------- */
/* the sweep is a highlight: it only reads on the dark ground */
html[data-mode="light"] .hero .d1 .sweep{display:none}

@media (prefers-reduced-motion:reduce){
  .hero .d1 .sweep{display:none}
  .rotator{height:auto;overflow:visible}
  .rotator span{position:static;transform:none;opacity:1}
  .rotator span:not(.in){display:none}
  .divider::after{transform:scaleX(1);transition:none}
  .now-placing .live i::after,.hero-foot-item.pulse b::after{animation:none}
  [data-depth],.card[data-depth],.card[data-depth]:hover{transform:none!important}
  .hero-inner{transform:none!important;opacity:1!important}
}

/* ==========================================================================
   12. The headline comparison row — the one number that should land
   ========================================================================== */
.vs-row.vs-hero{
  position:relative;
  margin:14px calc(clamp(12px,2vw,22px) * -1);
  padding:clamp(20px,2.6vw,28px) clamp(12px,2vw,22px);
  border:1px solid color-mix(in srgb,var(--flame) 50%,transparent);
  border-radius:16px;
  background:
    radial-gradient(120% 180% at 100% 50%,color-mix(in srgb,var(--flame) 16%,transparent),transparent 62%),
    color-mix(in srgb,var(--flame) 7%,transparent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--flame) 40%,transparent);
}
.chart.is-in .vs-row.vs-hero{animation:vsHalo 3.4s var(--e-io) 1.1s infinite}
@keyframes vsHalo{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--flame) 34%,transparent)}
  50%{box-shadow:0 0 30px 3px color-mix(in srgb,var(--flame) 30%,transparent)}
}
.vs-row.vs-hero,.vs-row.vs-hero + .vs-row,.vs-row.vs-hero:last-child{border-top-width:1px;border-bottom-width:1px}
.vs-row.vs-hero .vs-name{font-weight:700;font-size:1.02rem}
.vs-row.vs-hero .vs-figure{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.vs-row.vs-hero .bar-track{background:color-mix(in srgb,var(--fg) 16%,transparent);height:18px!important}
/* the bar is genuinely tiny at this scale, so give it a glowing cap
   that reads as "almost nothing" on purpose rather than as a rendering fault */
.vs-row.vs-hero .bar-fill{
  min-width:14px;border-radius:8px;
  background:linear-gradient(90deg,var(--flame),var(--flame-3));
}
.chart.is-in .vs-row.vs-hero .bar-fill{animation:vsGlow 2.6s var(--e-io) 1.5s infinite}
@keyframes vsGlow{
  0%,100%{box-shadow:0 0 12px 1px color-mix(in srgb,var(--flame) 65%,transparent)}
  50%{box-shadow:0 0 24px 5px color-mix(in srgb,var(--flame-3) 95%,transparent)}
}

/* ==========================================================================
   13. Agility wordmark inside the comparison table
   ========================================================================== */
.cmp th.cmp-brand{vertical-align:middle}
.cmp-logo{height:30px;width:auto;display:block}
.cmp-logo.light{display:none}
[data-theme="dark"] .cmp-logo.light{display:block}
[data-theme="dark"] .cmp-logo.dark{display:none}

/* ==========================================================================
   15. FTS scrubber: an animated icon per step, in place of the big number
   ========================================================================== */
.scrub-icons{position:relative;width:min(58%,220px);aspect-ratio:1;display:grid;place-items:center}
.scrub-ico{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(.7) translateY(10px);
  transition:opacity .45s var(--e-out),transform .55s var(--e-spring);
}
.scrub-ico.on{opacity:1;transform:none}
.scrub-ico svg{width:100%;height:100%;overflow:visible}
.scrub-ico svg *{
  fill:none;stroke:var(--flame);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke;
}
.scrub-ico svg .fill{fill:var(--flame);stroke:none}
.scrub-ico svg .soft{stroke:color-mix(in srgb,var(--flame) 38%,transparent)}

/* each icon animates only while its step is the active one */
.scrub-ico.on [data-s="draw"]{stroke-dasharray:48;animation:sDraw 1s var(--e-out) .2s both}
.scrub-ico.on [data-s="scan"]{animation:sScan 2.4s var(--e-io) infinite}
.scrub-ico.on [data-s="pulse"]{animation:sPulse 2.2s var(--e-io) infinite}
.scrub-ico.on [data-s="tick"]{stroke-dasharray:20;animation:sDraw .7s var(--e-out) .45s both}
.scrub-ico.on [data-s="nod"]{animation:sNod 2.6s var(--e-io) infinite}
.scrub-ico.on [data-s="lift"]{animation:sLift 2.6s var(--e-io) infinite}
.scrub-ico.on [data-s="fly"]{animation:sFly 3s var(--e-io) infinite}
.scrub-ico.on [data-s="ring"]{animation:sRing 2.4s var(--e-io) infinite}

@keyframes sDraw{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
@keyframes sScan{0%,100%{transform:translateY(-22%)}50%{transform:translateY(22%)}}
@keyframes sPulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.06)}}
@keyframes sNod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}
@keyframes sFly{0%{transform:translate(-14%,6%);opacity:0}20%,70%{opacity:1}100%{transform:translate(16%,-10%);opacity:0}}
@keyframes sRing{0%,100%{transform:scale(.82);opacity:.3}50%{transform:scale(1.1);opacity:.8}}

@media (prefers-reduced-motion:reduce){
  .scrub-ico{transition:none}
  .scrub-ico svg *{animation:none!important;stroke-dasharray:none!important}
}