/* ===========================================================================
   agents-stage.css

   The scroll stage on the agents index. Every rule is .ag- prefixed and the
   file is enqueued only for the page slug "agents", so no other template pays
   for it.

   Colour comes entirely from the theme tokens, so the page is white in the
   light theme and ink in the dark one without a second set of values.
   =========================================================================== */

.ag {
  --ag-h:      calc(100svh - var(--header-h, 77px));
  --ag-por:    clamp(260px, min(42vw, 70svh), 620px);
  --ag-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ag-rail-w: 40px;
  position: relative;
}

/* -- scroll snapping -------------------------------------------------------
   Applied to the scrollport, which is the root element, and only while a
   stage is on the page. The class is also set from JS for engines without
   :has() so the behaviour does not depend on one selector.                  */
html.ag-snap,
html:has(.ag) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-h, 77px);
  /* the theme sets scroll-behavior: smooth on html for the whole site. With
     mandatory snapping that let one flick animate straight past several
     agents, so this page opts out and lets the snap do the travelling. */
  scroll-behavior: auto;
}

.ag-hero {
  scroll-snap-align: start;
  scroll-margin-top: var(--header-h, 77px);
}

.ag-panel,
.ag-close {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* the footer is not part of the story but it still has to be reachable */
html.ag-snap .site-footer,
html:has(.ag) .site-footer {
  scroll-snap-align: start;
}

/* ============================ HERO ============================ */
.ag-hero {
  min-height: var(--ag-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: clamp(56px, 12svh, 130px);
  padding-bottom: clamp(60px, 9svh, 96px);
  padding-inline: var(--gutter);
  position: relative;
  box-sizing: border-box;
}

.ag-hero-inner {
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
}

.ag-kicker {
  font-size: clamp(12.5px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin: 0 0 clamp(14px, 2svh, 22px);
}

.ag-hero-title {
  font-size: clamp(40px, min(6.5vw, 8.8svh), 90px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--on-ink);
  margin: 0 auto clamp(16px, 2.4svh, 26px);
  max-width: 22ch;
  text-wrap: balance;
}

.ag-hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, #FD151B 0%, #FF9201 45%, #38BDF8 85%, #074CE7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}

:root[data-theme="light"] .ag-hero-title em {
  background: linear-gradient(96deg, var(--blue) 0%, #2563EB 50%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.ag-hero-lede {
  font-size: clamp(16.5px, min(1.45vw, 2.2svh), 21px);
  line-height: 1.58;
  color: var(--on-ink-2);
  max-width: 66ch;
  margin: 0 auto clamp(24px, 3.6svh, 38px);
  text-wrap: pretty;
}

.ag-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}


.ag-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4svh, 44px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--on-ink-3);
}
.ag-scroll-word {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ag-scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--on-ink-3));
  transform-origin: top center;
  animation: ag-hint 2.4s var(--ag-ease) infinite;
}
.ag-scroll-hint:hover { color: var(--on-ink-1); }

@keyframes ag-hint {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ======================= PORTRAIT STAGE =======================
   One fixed stage for all ten. Only opacity and transform change between
   agents, so the browser never re-lays out while the page is scrolling.     */
.ag-stage {
  position: fixed;
  top: var(--header-h, 77px);
  left: 0;
  width: 45%;
  height: var(--ag-h);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  /* asymmetric on purpose: arriving is a fade the eye should notice, leaving
     has to be gone before the hero or the closing panel is in view */
  transition: opacity 190ms var(--ag-ease);
}
.ag-stage.is-live {
  opacity: 1;
  transition-duration: 560ms;
}

.ag-stage-inner {
  position: relative;
  width: var(--ag-por);
  height: var(--ag-por);
}

.ag-por {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(0.965);
  transition: opacity 620ms var(--ag-ease), transform 620ms var(--ag-ease);
}
.ag-por.is-on {
  opacity: 1;
  transform: scale(1);
}

.ag-por img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateZ(0);
  will-change: transform;
}

/* a soft ground behind the cut out so the navy suit does not sink into the
   dark theme, and so the light theme gets a little depth */
.ag-por-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--ag-halo, rgba(56, 189, 248, 0.10)), transparent 62%);
}
:root[data-theme="light"] .ag-por-halo { --ag-halo: rgba(7, 76, 231, 0.09); }

/* One breath, and nothing else. An earlier version tilted and bounced the
   portrait on arrival and the user read it as shaking, so there is no
   rotation and no bob anywhere: just a slow, shallow rise and fall that has
   to be looked for to be seen.
   Applied to .ag-por as a composited container layer so the browser scales
   the rendered texture rather than re-rasterizing the cut-out edge every frame. */
.ag-por.is-on,
.ag-por.is-greeting {
  animation: ag-breathe 9s ease-in-out 700ms infinite;
}

@keyframes ag-breathe {
  0%, 100% { transform: scale(1);      }
  50%      { transform: scale(1.0085); }
}
/* ---------------------- WHAT EACH ONE SAYS ----------------------
   Two shapes, chosen by what the agent actually does rather than at random:
   the four that address a person get a speech bubble with a tail, the six
   that watch, weigh or report get a thought cloud with its trail of circles.
   Every one carries its own glyph, which draws itself before the line lands.
   Colour never varies: one accent, because a colour per agent is the rainbow
   admin console look this page exists to avoid.                            */
/* the wrapper is what sits on the portrait; the trail hangs off its bottom
   edge, so it follows the cloud whether the line runs to one line or two */
.ag-hi-wrap {
  position: absolute;
  z-index: 3;
  top: 9%;
  right: -8%;
  max-width: 78%;
}

.ag-hi {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  box-shadow: 0 14px 34px -18px var(--card-shadow, rgba(0, 0, 0, 0.6));
  color: var(--on-ink);
  font-size: clamp(12.5px, 1.05vw, 15px);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transform-origin: 100% 100%;
  transition: opacity 320ms var(--ag-ease), transform 420ms var(--ag-ease);
}
:root[data-theme="light"] .ag-hi { background: var(--paper-card); }

.ag-hi-speech  { border-radius: 16px 16px 4px 16px; }
.ag-hi-thought { border-radius: 20px; }

.ag-por.is-greeting .ag-hi {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 380ms;
}

/* the thought cloud's trail: two circles that pop before the cloud itself,
   so the thought reads as forming rather than arriving */
.ag-hi-trail {
  position: absolute;
  bottom: -15px;
  right: 12px;
  width: 24px;
  height: 20px;
}
.ag-hi-trail i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  opacity: 0;
  transform: scale(0.4);
}
:root[data-theme="light"] .ag-hi-trail i { background: var(--paper-card); }
.ag-hi-trail i:nth-child(1) { width: 9px; height: 9px; top: 0;    right: 11px; }
.ag-hi-trail i:nth-child(2) { width: 5px; height: 5px; top: 11px; right: 1px;  }

.ag-por.is-greeting .ag-hi-trail i {
  animation: ag-pop 420ms var(--ag-ease) 1 forwards;
}
.ag-por.is-greeting .ag-hi-trail i:nth-child(1) { animation-delay: 170ms; }
.ag-por.is-greeting .ag-hi-trail i:nth-child(2) { animation-delay: 80ms;  }

@keyframes ag-pop {
  from { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1); }
}

/* the glyph draws itself, the way the icons on the agent pages do */
.ag-hi-glyph {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent-text, var(--blue-light));
  opacity: 0;
}
.ag-hi-glyph > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ag-por.is-greeting .ag-hi-glyph {
  animation: ag-glyph-in 220ms var(--ag-ease) 520ms 1 forwards;
}
.ag-por.is-greeting .ag-hi-glyph > * {
  animation: ag-draw 760ms var(--ag-ease) 560ms 1 forwards;
}
.ag-por.is-greeting .ag-hi-glyph > *:nth-child(2) { animation-delay: 700ms; }
.ag-por.is-greeting .ag-hi-glyph > *:nth-child(3) { animation-delay: 820ms; }
.ag-por.is-greeting .ag-hi-glyph > *:nth-child(4) { animation-delay: 930ms; }

@keyframes ag-glyph-in { to { opacity: 1; } }
@keyframes ag-draw     { to { stroke-dashoffset: 0; } }

/* and then it speaks */
.ag-hi-text {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 620ms var(--ag-ease);
}
.ag-por.is-greeting .ag-hi-text {
  clip-path: inset(0 0 0 0);
  transition-delay: 980ms;
}


/* =========================== PANELS =========================== */
.ag-panel {
  min-height: var(--ag-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
}

.ag-panel-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
}

.ag-copy {
  padding-left: clamp(16px, 3vw, 56px);
  padding-right: var(--ag-rail-w);
  max-width: 44rem;
}

/* -- the reveal, in the order the eye should take it -- */
.ag-name,
.ag-role,
.ag-line,
.ag-cta {
  opacity: 0;
  transition-timing-function: var(--ag-ease);
  transition-property: opacity, transform, filter;
}

.ag-name {
  margin: 0 0 var(--s4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(32px);
  transition-duration: 760ms;
}
.ag-name-persona {
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--on-ink);
}
.ag-name-product {
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--on-ink-2);
}

.ag-role {
  margin: 0 0 var(--s6);
  align-self: flex-start;
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-line);
  background: var(--ink-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  transition-duration: 560ms;
  transition-delay: 140ms;
}

.ag-lede { margin: 0 0 var(--s7); }

.ag-line {
  margin: 0 0 var(--s3);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.62;
  color: var(--on-ink-1);
  max-width: 46ch;
  text-wrap: pretty;
  transform: translateY(18px);
  transition-duration: 700ms;
  transition-delay: calc(260ms + var(--n, 0) * 110ms);
}
.ag-line:last-child { margin-bottom: 0; }

.ag-cta {
  margin: 0;
  filter: blur(7px);
  transform: translateY(10px);
  transition-duration: 700ms;
  transition-delay: 500ms;
}

.ag-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--accent-text, var(--on-ink));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap 260ms var(--ag-ease), border-color 260ms var(--ag-ease);
}
.ag-link:hover {
  gap: 15px;
  border-bottom-color: currentColor;
}

/* live state: everything lands on its own beat */
.ag-panel.is-live .ag-name { opacity: 1; transform: translateY(0); }
.ag-panel.is-live .ag-role { opacity: 1; }
.ag-panel.is-live .ag-line { opacity: 1; transform: translateY(0); }
.ag-panel.is-live .ag-cta  { opacity: 1; transform: translateY(0); filter: blur(0); }

/* =========================== CLOSE =========================== */
.ag-close {
  min-height: var(--ag-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s8) var(--gutter);
  border-top: 1px solid var(--ink-line);
}
.ag-close-inner { max-width: 720px; }
.ag-close h2 {
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--on-ink);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
.ag-close p {
  font-size: clamp(15.5px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--on-ink-2);
  margin: 0 auto var(--s7);
  max-width: 54ch;
}
.ag-close-cta {
  display: flex;
  gap: var(--s4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ====================== SHORT VIEWPORTS ======================
   A 1080p screen at 125% leaves about 730 CSS pixels of height. Everything
   below tightens the stage so a panel still fits without a scrollbar.       */
@media (max-height: 860px) {
  .ag { --ag-por: clamp(240px, min(38vw, 62svh), 480px); }
  .ag-name-persona { font-size: clamp(34px, 4.4vw, 58px); }
  .ag-role { margin-bottom: var(--s5); }
  .ag-lede { margin-bottom: var(--s6); }
  .ag-hero-title { font-size: clamp(34px, 5vw, 62px); }
  .ag-hero-lede { margin-bottom: var(--s6); }
}

@media (max-height: 700px) {
  .ag { --ag-por: clamp(210px, min(34vw, 56svh), 400px); }
  .ag-name-persona { font-size: clamp(30px, 3.8vw, 46px); }
  .ag-line { font-size: clamp(15px, 1.2vw, 17px); }
  .ag-lede { margin-bottom: var(--s5); }
  .ag-scroll-hint { display: none; }
}

/* ============================ TABLET ============================ */
@media (max-width: 1180px) {
  .ag { --ag-rail-w: 16px; }
}

/* ============================ MOBILE ============================
   The stage moves to the top of the panel and the copy sits underneath it,
   so there is still one portrait crossfading rather than ten images.        */
@media (max-width: 900px) {
  .ag {
    --ag-stage-h: 42svh;
    --ag-por: min(33svh, 66vw);
    --ag-rail-w: 0px;
  }

  .ag-stage {
    width: 100%;
    height: var(--ag-stage-h);
    align-items: flex-end;
  }

  .ag-panel-inner { grid-template-columns: 1fr; }
  .ag-slot { height: var(--ag-stage-h); }

  .ag-copy {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    max-width: none;
  }
  .ag-name { align-items: center; }
  .ag-lede { margin-bottom: var(--s6); }
  .ag-line { margin-inline: auto; }
  .ag-role { align-self: center; margin-bottom: var(--s5); }
  .ag-cta { display: flex; justify-content: center; }

  .ag-hi-wrap {
    top: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: -moz-max-content;
    width: max-content;
    max-width: min(92vw, 360px);
    pointer-events: none;
  }

  .ag-hi {
    padding: 8px 14px;
    font-size: clamp(12px, 3.2vw, 13.5px);
    gap: 7px;
    box-shadow: 0 10px 24px -10px var(--card-shadow, rgba(0, 0, 0, 0.5));
    transform-origin: 50% 100%;
    white-space: nowrap;
  }

  .ag-hi-glyph {
    width: 15px;
    height: 15px;
  }

  .ag-hi-speech {
    border-radius: 14px 14px 4px 14px;
  }

  .ag-hi-thought {
    border-radius: 18px;
  }

  .ag-hi-trail {
    bottom: -11px;
    right: 28px;
  }

  .ag-hi-trail i:nth-child(1) {
    width: 7px;
    height: 7px;
    top: 0;
    right: 7px;
  }

  .ag-hi-trail i:nth-child(2) {
    width: 4px;
    height: 4px;
    top: 7px;
    right: 0;
  }
}

/* a short phone, and any phone in landscape: the portrait gives up the room
   the copy needs, so a panel still fits the screen it snaps to */
@media (max-width: 900px) and (max-height: 780px) {
  .ag {
    --ag-stage-h: 34svh;
    --ag-por: min(26svh, 52vw);
  }
  .ag-name-persona { font-size: clamp(27px, 7.4vw, 38px); }
  .ag-name-product { font-size: 14px; }
  .ag-role { margin-bottom: var(--s4); }
  .ag-line { font-size: 15px; line-height: 1.5; margin-bottom: var(--s2); }
  .ag-lede { margin-bottom: var(--s5); }
}

@media (max-width: 900px) and (max-height: 700px) {
  .ag { --ag-stage-h: 30svh; --ag-por: min(22svh, 44vw); }
  .ag-name { margin-bottom: var(--s3); }
  .ag-role { display: none; }
  .ag-lede { margin-bottom: var(--s4); }
}

/* a phone turned on its side has width to spare and no height at all, so the
   portrait goes back beside the copy rather than above it */
@media (min-width: 520px) and (max-width: 900px) and (max-height: 700px) and (orientation: landscape) {
  .ag {
    --ag-stage-h: var(--ag-h);
    --ag-por: min(58svh, 30vw);
  }
  .ag-stage { width: 38%; align-items: center; }
  .ag-panel-inner { grid-template-columns: 38% 62%; }
  .ag-slot { height: auto; }
  .ag-copy { text-align: left; padding-left: var(--s5); padding-right: 40px; }
  .ag-name { align-items: flex-start; }
  .ag-role { display: inline-block; align-self: flex-start; margin-bottom: var(--s3); }
  .ag-line { margin-inline: 0; }
  .ag-cta { justify-content: flex-start; }
  .ag-hi-wrap {
    top: 2%;
    bottom: auto;
    left: auto;
    right: -12%;
    transform: none;
    max-width: 88%;
  }
  .ag-hi {
    transform-origin: 100% 100%;
    white-space: normal;
  }
}

/* the shortest landscape phones: the copy has to come down to the height the
   screen actually has, or the panel stops fitting the snap it lands on */
@media (max-height: 480px) and (orientation: landscape) {
  .ag { --ag-por: min(52svh, 27vw); }
  .ag-name { margin-bottom: var(--s2); gap: 2px; }
  .ag-name-persona { font-size: clamp(22px, 4.4vw, 34px); }
  .ag-name-product { font-size: 12.5px; }
  .ag-role { display: none; }
  .ag-line { font-size: 13.5px; line-height: 1.42; margin-bottom: 6px; max-width: 42ch; }
  .ag-lede { margin-bottom: var(--s3); }
  .ag-link { min-height: 32px; font-size: 14px; }
  .ag-hero-title { font-size: clamp(26px, 4.4vw, 38px); }
  .ag-hero-lede { font-size: 14px; margin-bottom: var(--s5); }
  .ag-kicker { margin-bottom: var(--s3); }
  .ag-close h2 { font-size: clamp(20px, 2.8vw, 30px); margin-bottom: var(--s2); }
  .ag-close p { font-size: 13.5px; line-height: 1.5; margin-bottom: var(--s3); }
  .ag-hero, .ag-close { padding-block: var(--s4); }
  .ag-close-cta { gap: var(--s3); }
}

@media (max-width: 560px) {
  .ag-panel, .ag-hero, .ag-close { padding-inline: var(--s5); }
  .ag-close-cta .btn { width: 100%; }
}

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
  html.ag-snap,
  html:has(.ag) { scroll-snap-type: none; }

  .ag-name, .ag-role, .ag-line, .ag-cta {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .ag-por.is-on img,
  .ag-por.is-greeting img { animation: none; }
  .ag-scroll-line { animation: none; }
  .ag-hi, .ag-por.is-greeting .ag-hi { transition: none; }
  .ag-hi-text { clip-path: none; }
  .ag-hi-trail i { opacity: 1; transform: none; animation: none; }
  .ag-hi-glyph { opacity: 1; }
  .ag-hi-glyph > * { stroke-dashoffset: 0; animation: none; }
  .ag-por { transition-duration: 200ms; }
}