/* ==========================================================================
   KOBIL — Homepage: "AI will act. Trust must come first."
   Figma: D-Homepage → 6019:111825 (mobile 6203:46532)

   Net-new. Copy column left, photo right with the Human → AI Agent →
   Action → Approval → Audit Trail flow bar overlapping its bottom edge —
   both exported flat from Figma (the bar is a screenshot layer in the
   design itself, node 6019:111835).
   ========================================================================== */

.sec-ai-trust {
  background: var(--white);
  padding: var(--w96) 0 var(--w120);
}

.sec-ai-trust__inner {
  display: grid;
  grid-template-columns: minmax(0, var(--w578)) minmax(0, 1fr);
  align-items: center;
  gap: var(--w100);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--w80);
}

.sec-ai-trust__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-ai-trust__title {
  margin-top: var(--w20);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.15;
  color: var(--navy);
}

.sec-ai-trust__title-accent {
  display: block;
  background-image: linear-gradient(90deg, #696ef5 0%, #ca80f4 55%, #ffc4a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ca80f4;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.sec-ai-trust__lead {
  margin-top: var(--w20);
  max-width: var(--w520);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

.sec-ai-trust__quote {
  margin-top: var(--w40);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--w32);
  line-height: 1.25;
  color: var(--navy);
}

/* ---- Photo + flow bar ---- */

.sec-ai-trust__media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: var(--w593);
  /* Breathing room for the flow bar hanging below the photo. */
  padding-bottom: var(--w40);
}

.sec-ai-trust__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--w24);
}

.sec-ai-trust__flow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  width: 88%;
  height: auto;
  border-radius: var(--w14);
  box-shadow: 0 14px 34px rgba(17, 36, 74, 0.16);
}

/* ---- Trust-chain card (inline SVG, Figma 6940:48133). The labels are real
   <text> so they render in the page font instead of baked outlines. ---- */

.sec-ai-trust__flow text {
  font: 600 13px var(--font-sans);
  fill: #11244a;
}

/* The chain — balls AND their captions — streams LEFT TO RIGHT, the direction
   the process reads: toward the Audit-Trail end. The wrap is a full label
   sequence (5 x 98 = 490 units): two sequences are drawn (10 stations), and
   sliding from -490 to 0 puts the second sequence exactly where the first
   ends up, so the loop is seamless. #aith-fade-mask dissolves the stations at
   the thin line's own ends instead of letting the card edge cut them off.
   490 units / 19.6s = 25 u/s. */
.aith-chain {
  animation: aith-chain 19.6s linear infinite;
}

@keyframes aith-chain {
  from { transform: translateX(-490px); }
  to { transform: translateX(0); }
}

/* The dashed verification ring sweeps the card RIGHT TO LEFT, against the
   stream, catching every passing ball. It lives INSIDE .aith-chain, so a
   dwell simply holds a chain-space offset and rides the belt with its ball;
   each hop steps -98 to the ball behind — landings are exact by
   construction, every offset a multiple of the 98 ball pitch.

   The sweep runs edge to edge: the cycle opens with the ring on the +98
   ball, which the -17.72s phase puts at x 505 — just past the right end of
   the line, where #aith-fade-mask hides it — so the first hop is a leap IN
   through the right edge onto the rightmost catchable ball (x 416.8). Nine
   dwells later (46.55 net leftward each) the last leap lands at x 44.4,
   INSIDE the line-start fade, where the ring dissolves — no mid-line
   vanishing act. The reset back to +98 happens at opacity 0, and the fade
   back to 1 (99-100%) also sits behind the right-edge mask, so neither is
   ever seen. First-catch rides end at 458.5, clear of the exit fade. */
.aith-ring {
  animation: aith-ring-travel 19.6s linear infinite;
  animation-delay: -17.72s;
}

@keyframes aith-ring-travel {
  /* leap in through the right edge, then: ride one ball, leap to the next */
  0% { transform: translateX(98px); opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  2% { transform: translateX(0); }
  10.5% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  12.5% { transform: translateX(-98px); }
  21% { transform: translateX(-98px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  23% { transform: translateX(-196px); }
  31.5% { transform: translateX(-196px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  33.5% { transform: translateX(-294px); }
  42% { transform: translateX(-294px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  44% { transform: translateX(-392px); }
  52.5% { transform: translateX(-392px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  54.5% { transform: translateX(-490px); }
  63% { transform: translateX(-490px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  65% { transform: translateX(-588px); }
  73.5% { transform: translateX(-588px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  75.5% { transform: translateX(-686px); }
  84% { transform: translateX(-686px); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
  86% { transform: translateX(-784px); opacity: 1; }
  /* landed inside the line-start fade — dissolve right there */
  88.5% { opacity: 0; }
  96% { transform: translateX(-784px); }
  /* invisible reset back past the right edge, re-materialise behind the mask */
  99% { transform: translateX(98px); opacity: 0; }
  100% { transform: translateX(98px); opacity: 1; }
}

/* Two circle-level animations: the slow dash crawl that reads as "scanning"
   (one dash cycle is 7.85 units — circumference 94.25 / 12 — so a full-cycle
   multiple keeps the loop seamless), and a small zoom each time the ring
   lands on a ball. The landings are no longer evenly spaced across the
   cycle (the last-to-first gap includes the invisible reset), so the zoom
   runs at the full 19.6s period with one pulse keyframed 0.9% after each of
   the nine landings, sharing the travel animation's -17.72s delay.
   transform-box makes the scale pivot on the ring's own centre instead of
   the SVG origin. */
.aith-ring circle {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    aith-ring-spin 8s linear infinite,
    aith-ring-zoom 19.6s linear infinite;
  animation-delay: 0s, -17.72s;
}

@keyframes aith-ring-spin {
  to { stroke-dashoffset: -78.5; }
}

@keyframes aith-ring-zoom {
  /* one pulse per landing: up 0.9% (0.18s), settle by +3.1% (0.6s) */
  0% { transform: scale(1); }
  2% { transform: scale(1); }
  2.9% { transform: scale(1.22); }
  5.1% { transform: scale(1); }
  12.5% { transform: scale(1); }
  13.4% { transform: scale(1.22); }
  15.6% { transform: scale(1); }
  23% { transform: scale(1); }
  23.9% { transform: scale(1.22); }
  26.1% { transform: scale(1); }
  33.5% { transform: scale(1); }
  34.4% { transform: scale(1.22); }
  36.6% { transform: scale(1); }
  44% { transform: scale(1); }
  44.9% { transform: scale(1.22); }
  47.1% { transform: scale(1); }
  54.5% { transform: scale(1); }
  55.4% { transform: scale(1.22); }
  57.6% { transform: scale(1); }
  65% { transform: scale(1); }
  65.9% { transform: scale(1.22); }
  68.1% { transform: scale(1); }
  75.5% { transform: scale(1); }
  76.4% { transform: scale(1.22); }
  78.6% { transform: scale(1); }
  86% { transform: scale(1); }
  86.9% { transform: scale(1.22); }
  89.1% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* The comet on the thin line: 96 units long, thin at both tips and 7.8
   thick in the middle, its colour ramping from a transparent tail to the
   saturated leading (right) head. It travels left to right — one action
   streaming Human → Audit Trail. Drawn fully clear of the line's left end
   (-101..-5) and translated +600 units, so it both starts and ends
   completely outside the 35..489 band — #aith-fade-mask handles the fade in
   and out, which is why there are no opacity keyframes here and no jump at
   the loop point. 600 units over 5.1s keeps the previous speed.
   The gradient is userSpaceOnUse, so it rides the transform. */
.aith-comet {
  animation: aith-comet 5.1s linear infinite;
}

@keyframes aith-comet {
  to { transform: translateX(600px); }
}

@media (prefers-reduced-motion: reduce) {
  .aith-ring,
  .aith-ring circle,
  .aith-comet,
  .aith-chain {
    animation: none;
  }

  /* Rest state: the belt parked on its first sequence (Human through Audit
     Trail in view), the ring sitting on the centre Action ball (850 - 588 =
     262), no comet. */
  .aith-ring { transform: translateX(-588px); }
  .aith-comet { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .sec-ai-trust__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-ai-trust__media {
    justify-self: center;
  }

  .sec-ai-trust {
    padding: var(--m56) 0 var(--m60);
  }

  .sec-ai-trust__inner {
    padding: 0 var(--m24);
    gap: var(--m36);
  }

  .sec-ai-trust__title {
    font-size: var(--m34);
  }

  .sec-ai-trust__lead {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-ai-trust__quote {
    margin-top: var(--m28);
    font-size: var(--m24);
  }
}