/* ============================================================================
   AGENT SHOWCASE -> HOW IT WORKS -> FINAL CTA -> FOOTER. Motion + depth only.

   Scope: these four sections, nothing above them. Hero, Solutions and Sector
   Recognition are not touched by this file. No copy, layout, spacing or
   navigation changes — every rule below animates opacity / transform / filter
   / box-shadow / background only, so nothing here can shift layout or affect
   CLS.

   Timing follows the "marketing / explanatory" row of the duration table
   this project has been using, not the sub-300ms row for repeated UI
   controls: these are one-shot section entrances a visitor sees once, not
   buttons they press fifty times a day. Durations are therefore deliberately
   slower and easier to see than a typical UI transition, per direct request.
   Buttons and links inside these sections keep fast, UI-speed feedback
   (140-200ms) — the "make it slower" instruction is about section entrances,
   not about making buttons feel laggy to press.
   ============================================================================ */

/* --------------------------------------------------------------- HOW IT WORKS
   .agent is nested inside .paths in the markup (the guide is the answer to
   the second path), so .paths gets the outer background depth and its own
   entrance; .agent gets a second, slightly deeper tint so it reads as "a
   different kind of thing" rather than a third card in the same row — the
   distinction this section has needed since the Pass-1 backlog note. */
.paths {
  position: relative;
  isolation: isolate;
}
.paths::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    none;
}

.agent {
  position: relative;
  isolation: isolate;
}
.agent::before {
  content: "";
  position: absolute;
  inset: -4% -4%;
  z-index: -1;
  border-radius: 28px;
  pointer-events: none;
  background: none;
}

/* --------------------------------------------------------------- FINAL CTA
   A quiet radial wash and a hairline seam, in the same language as Meet
   Digital Flow and How It Works, so the page keeps one visual system instead
   of introducing a new one for the last section before the footer. */
.close {
  position: relative;
  isolation: isolate;
}
.close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none;
}
.close::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 48px));
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(242, 238, 230, .10) 18%, rgba(242, 238, 230, .10) 82%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

  /* ============================================================ HOW IT WORKS
     eyebrow -> heading -> lead -> two path cards -> conditions line. */
  .paths .eyebrow,
  .paths__lead,
  #paths-title,
  .paths .path,
  .paths__conditions {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
    transition:
      opacity .95s cubic-bezier(.22, .61, .36, 1),
      transform 1.05s cubic-bezier(.22, .61, .36, 1),
      filter .95s cubic-bezier(.22, .61, .36, 1);
  }
  .paths .path {
    transform: translateY(18px);
    filter: blur(6px);
    box-shadow: 0 1px 2px rgba(16, 32, 25, .04);
    transition:
      opacity 1.05s cubic-bezier(.22, .61, .36, 1),
      transform 1.2s cubic-bezier(.22, .61, .36, 1),
      filter 1.05s cubic-bezier(.22, .61, .36, 1),
      box-shadow .6s cubic-bezier(.22, .61, .36, 1),
      border-color .35s ease;
  }

  .paths.is-revealed .eyebrow,
  .paths.is-revealed .paths__lead,
  .paths.is-revealed #paths-title,
  .paths.is-revealed .path,
  .paths.is-revealed .paths__conditions {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  .paths.is-revealed .eyebrow            { transition-delay: 240ms; }
  .paths.is-revealed #paths-title        { transition-delay: 390ms; }
  .paths.is-revealed .paths__lead        { transition-delay: 540ms; }
  .paths.is-revealed .path:nth-of-type(1){ transition-delay: 710ms; }
  .paths.is-revealed .path:nth-of-type(2){ transition-delay: 860ms; }
  .paths.is-revealed .paths__conditions  { transition-delay: 1030ms; }

  @media (hover: hover) and (pointer: fine) {
    .paths.is-revealed .path:hover {
      transform:
        translateY(-3px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
      box-shadow: 0 20px 40px -28px rgba(16, 32, 25, .32);
      transition-duration: .35s, .4s, .35s, .4s, .3s;
    }
  }
  /* --tilt-x/--tilt-y are written by lower-sections-motion.js on fine
     pointers only, clamped to the same ~1.6deg used on the Meet Digital Flow
     cards, so the two card systems feel like one language. Perspective has
     to live on the grid (the parent), not the card itself, or the card's own
     rotation has no vanishing point to rotate against — same rule
     people-motion.css follows for .principles/li. */
  .paths .path { --tilt-x: 0deg; --tilt-y: 0deg; }
  .paths__grid { perspective: 900px; }

  /* Path CTAs get the same lift + press language as the Final CTA button,
     layered on top of the colour hover already in closing.css. */
  .path .btn, .agent .btn {
    transition:
      background-color .18s ease,
      color .18s ease,
      border-color .18s ease,
      transform .16s cubic-bezier(.22, .61, .36, 1);
  }
  @media (hover: hover) and (pointer: fine) {
    .path .btn:hover, .agent .btn:hover { transform: translateY(-2px); }
  }
  .path .btn:active, .agent .btn:active { transform: translateY(0) scale(.97); transition-duration: .09s; }

  /* -------------------------------------------------------- AGENT SHOWCASE
     Self-triggered off .agent's own position (see lower-sections-motion.js),
     not off .paths — the block is tall enough now that the two crossed the
     viewport at very different times. Copy and preview arrive on a gentle
     offset, then a single soft light sweep crosses the preview panel once —
     the "different kind of thing" cue, not a loop. */
  .agent .eyebrow,
  #agent-title,
  .agent__copy > p,
  .agent__act,
  .agent__preview,
  .agent__benefit,
  .agent__trust,
  .agent__closing {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
    transition:
      opacity .95s cubic-bezier(.22, .61, .36, 1),
      transform 1.05s cubic-bezier(.22, .61, .36, 1),
      filter .95s cubic-bezier(.22, .61, .36, 1);
  }
  .agent__preview {
    position: relative;
    overflow: hidden;
    transform: translateY(18px);
    filter: blur(6px);
    box-shadow: 0 1px 2px rgba(16, 32, 25, .04);
    transition:
      opacity 1.05s cubic-bezier(.22, .61, .36, 1),
      transform 1.2s cubic-bezier(.22, .61, .36, 1),
      filter 1.05s cubic-bezier(.22, .61, .36, 1),
      box-shadow .6s cubic-bezier(.22, .61, .36, 1);
  }
  /* the sweep itself: a soft diagonal highlight that crosses once and stops */
  .agent__preview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg,
      transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
    transform: translateX(-120%);
  }

  .agent.is-revealed .eyebrow      { opacity: 1; transform: none; filter: blur(0); transition-delay: 240ms; }
  .agent.is-revealed #agent-title  { opacity: 1; transform: none; filter: blur(0); transition-delay: 390ms; }
  .agent.is-revealed .agent__copy > p { opacity: 1; transform: none; filter: blur(0); transition-delay: 540ms; }
  .agent.is-revealed .agent__act   { opacity: 1; transform: none; filter: blur(0); transition-delay: 690ms; }
  .agent.is-revealed .agent__preview {
    opacity: 1; transform: none; filter: blur(0);
    box-shadow: 0 24px 46px -30px rgba(16, 32, 25, .34);
    transition-delay: 440ms;
  }
  .agent.is-revealed .agent__preview::after {
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
    transition-delay: 900ms;
    transform: translateX(120%);
  }

  /* Benefit cards land after the top area has settled, on their own 140ms
     stagger — a second beat, not a continuation of the copy column's rhythm. */
  .agent.is-revealed .agent__benefit,
  .agent.is-revealed .agent__trust,
  .agent.is-revealed .agent__closing {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  .agent.is-revealed .agent__benefit:nth-child(1) { transition-delay: 840ms; }
  .agent.is-revealed .agent__benefit:nth-child(2) { transition-delay: 980ms; }
  .agent.is-revealed .agent__benefit:nth-child(3) { transition-delay: 1120ms; }
  .agent.is-revealed .agent__benefit:nth-child(4) { transition-delay: 1260ms; }
  .agent.is-revealed .agent__trust    { transition-delay: 1400ms; }
  .agent.is-revealed .agent__closing  { transition-delay: 1540ms; }

  @media (hover: hover) and (pointer: fine) {
    .agent__benefit {
      transition: opacity .95s cubic-bezier(.22, .61, .36, 1),
        transform 1.05s cubic-bezier(.22, .61, .36, 1),
        filter .95s cubic-bezier(.22, .61, .36, 1),
        box-shadow .3s cubic-bezier(.22, .61, .36, 1),
        border-color .3s ease;
    }
    .agent.is-revealed .agent__benefit:hover {
      transform: translateY(-2px);
      border-color: rgba(242, 238, 230, .28);
      box-shadow: 0 16px 32px -24px rgba(16, 32, 25, .3);
      transition-duration: .3s, .3s, .3s, .3s, .25s;
    }
  }

  /* ================================================================ FINAL CTA */
  .close #close-title,
  .close__body,
  .close__actions .btn,
  .close__meta {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
    transition:
      opacity .95s cubic-bezier(.22, .61, .36, 1),
      transform 1.05s cubic-bezier(.22, .61, .36, 1),
      filter .95s cubic-bezier(.22, .61, .36, 1);
  }
  .close.is-revealed #close-title,
  .close.is-revealed .close__body,
  .close.is-revealed .close__actions .btn,
  .close.is-revealed .close__meta {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  .close.is-revealed #close-title          { transition-delay: 240ms; }
  .close.is-revealed .close__body          { transition-delay: 410ms; }
  .close.is-revealed .close__actions .btn  { transition-delay: 590ms; }
  .close.is-revealed .close__meta          { transition-delay: 740ms; }

  /* The final CTA button gets a slightly more deliberate settle than a
     default button, since it is the page's single most important press —
     still well inside UI speed once revealed, not part of the slow entrance. */
  .close .close__actions .btn {
    transition:
      opacity .95s cubic-bezier(.22, .61, .36, 1),
      transform .2s cubic-bezier(.22, .61, .36, 1),
      filter .95s cubic-bezier(.22, .61, .36, 1),
      background-color .18s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .close.is-revealed .close__actions .btn:hover { transform: translateY(-2px); }
  }
  .close.is-revealed .close__actions .btn:active { transform: translateY(0) scale(.98); }

  /* ================================================================== FOOTER
     Infrastructure, deliberately minimal: a single quiet fade, no depth
     treatment, no continuous motion. It should feel present, not designed. */
  .foot__inner,
  .foot__discreet {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .85s cubic-bezier(.22, .61, .36, 1),
      transform .9s cubic-bezier(.22, .61, .36, 1);
  }
  /* The mailto link had a static colour and no hover state at all — the one
     genuinely missing interaction in this section. A one-line underline fade,
     nothing louder; the footer stays quiet. */
  .foot a { transition: opacity .18s ease; }
  @media (hover: hover) and (pointer: fine) {
    .foot a:hover { opacity: .78; }
  }
  .foot.is-revealed .foot__inner,
  .foot.is-revealed .foot__discreet {
    opacity: 1;
    transform: none;
  }
  .foot.is-revealed .foot__inner    { transition-delay: 240ms; }
  .foot.is-revealed .foot__discreet { transition-delay: 360ms; }
}

/* Keyboard parity with the path hover state above. */
.paths .path:focus-within {
  box-shadow: 0 20px 40px -28px rgba(16, 32, 25, .32);
}

/* The preview panel had a :focus-within treatment but no matching :hover —
   a mouse visitor got nothing, a keyboard visitor got a shadow. Same lift +
   shadow language as the path cards, static (no tilt): it is a content
   showcase, not a pressable card. */
.agent__preview:focus-within,
.agent__preview:hover {
  box-shadow: 0 30px 54px -30px rgba(16, 32, 25, .4);
}
@media (prefers-reduced-motion: no-preference) {
  .agent__preview { transition: box-shadow .35s cubic-bezier(.22, .61, .36, 1), transform .35s cubic-bezier(.22, .61, .36, 1); }
  @media (hover: hover) and (pointer: fine) {
    .agent__preview:hover { transform: translateY(-2px); }
  }
}

/* -------------------------------------------------------------- reduced motion
   Every element lands at its final, fully visible state immediately. No
   transform, no blur, no sweep, no hover travel. */
@media (prefers-reduced-motion: reduce) {
  .paths .eyebrow, .paths__lead, #paths-title, .paths .path, .paths__conditions,
  .agent .eyebrow, #agent-title, .agent__copy > p, .agent__act, .agent__preview,
  .agent__benefit, .agent__trust, .agent__closing,
  .close #close-title, .close__body, .close__actions .btn, .close__meta,
  .foot__inner, .foot__discreet {
    opacity: 1; transform: none; filter: none;
  }
  .agent__preview::after { display: none; }
}