/* ============================================================
 * "Meet your agents" section
 * ------------------------------------------------------------
 * 2x2 grid of agent portrait cards. Each card is a clean
 * two-column split:
 *   - LEFT half: solid dark text panel (icon + name + role +
 *     description + feature bullets). No image bleeds in here,
 *     so type stays legible.
 *   - RIGHT half: the agent's portrait, full-bleed, cropped
 *     `cover`. No gradient overlay on top — the portrait is
 *     the visual; we don't tint it down.
 *
 * Per-agent theme color is driven by `--agent-accent` set on
 * each card via inline `style="--agent-accent: #..."`. It
 * tints the role label, icon ring, and feature-bullet glyphs.
 *
 * Below 860px the 2x2 grid collapses to 1-col. Below 520px the
 * card itself flips to text-on-top / image-on-bottom so the
 * text column doesn't get squeezed below a usable width.
 * ============================================================ */

.meet-agents-section {
  padding: 5rem 0 4rem;
}

.meet-agents-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.meet-agents-section .section-title {
  text-align: center;
  margin-bottom: 0.75rem;
}

.meet-agents-lead {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.meet-agents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

/* ---------- Card chrome ---------- */

.agent-card {
  /* Per-card override via inline style; fallback for safety. */
  --agent-accent: #4f9cff;
  --agent-accent-soft: color-mix(in srgb, var(--agent-accent) 55%, transparent);

  position: relative;
  display: grid;
  /* 52% text / 48% image — the text panel needs enough room for
     long names (LEONARDO) and the 5-item feature list without
     clipping. Image still gets nearly half the card. */
  grid-template-columns: 52% 48%;
  /* No fixed aspect ratio. The grid auto-equalizes each row's
     height to the tallest card in that row, so all 4 stay
     visually aligned without us clipping content. */
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: #08080a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Must include the reveal properties (opacity, filter, clip-path) here:
     this rule's `transition` replaces the one declared on `.reveal`, so any
     property left off snaps instead of animating. Result before the fix:
     cards faded in without the blur/fade that the rest of the site uses.
     `--reveal-*` vars come from `.site-extended` and fall back to local
     values for non-reveal contexts. */
  transition:
    transform var(--reveal-duration, 0.5s) var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.4s ease,
    opacity var(--reveal-duration, 0.5s) var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    filter calc(var(--reveal-duration, 0.5s) * 1.08) var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    clip-path calc(var(--reveal-duration, 0.5s) * 0.95) var(--reveal-ease, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: var(--reveal-delay, 0s);
}

.agent-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--agent-accent) 25%, rgba(255, 255, 255, 0.06));
}

/* ---------- Left column: text panel ---------- */

.agent-card-content {
  display: flex;
  flex-direction: column;
  padding: 1.85rem 1.75rem;
  background: #08080a;
  /* Subtle accent-colored glow at the bottom of the text panel
     so the card carries the agent's color even at a glance. */
  background-image: radial-gradient(
    ellipse at 20% 110%,
    color-mix(in srgb, var(--agent-accent) 12%, transparent) 0%,
    transparent 65%
  );
}

.agent-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--agent-accent);
  border: 1.5px solid color-mix(in srgb, var(--agent-accent) 65%, transparent);
  background: color-mix(in srgb, var(--agent-accent) 8%, transparent);
  margin-bottom: 1.2rem;
}

.agent-card-icon svg {
  width: 16px;
  height: 16px;
}

.agent-card-name {
  /* Scales with viewport so long names (LEONARDO) don't bleed
     past the column on narrow laptops. */
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin: 0 0 0.3rem;
  line-height: 1;
  color: var(--text-primary);
}

.agent-card-role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--agent-accent);
  margin: 0 0 1.1rem;
}

/* Maturity tag for agents that aren't battle-tested yet (Eco, Snow, Leonardo).
   Sits under the name, kept neutral so it reads as a status rather than competing
   with the per-agent accent color. */
.agent-card-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin: 0 0 0.85rem;
  padding: 0.18rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.agent-card-description {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 1.1rem;
}

.agent-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.agent-card-features li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.agent-card-features li svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--agent-accent);
  opacity: 0.85;
}

/* ---------- Right column: image panel ---------- */

.agent-card-image-wrap {
  position: relative;
  overflow: hidden;
}

.agent-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centered so the agent's face/torso is the focal point.
     The portraits are pre-composed for this crop. */
  object-position: center center;
  user-select: none;
  display: block;
}

/* Soft vignette at the boundary so the hard edge between dark
   text panel and the image doesn't read as a jagged seam. Very
   short gradient — bleeds maybe 30px into the image. */
.agent-card-image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 8, 10, 0.85) 0%,
    rgba(8, 8, 10, 0.35) 6%,
    transparent 14%
  );
  pointer-events: none;
}


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

/* Around laptop width, the text column wants slightly tighter
   padding so bullet labels don't word-wrap awkwardly. */
@media (max-width: 1100px) {
  .agent-card-content {
    padding: 1.65rem 1.5rem;
  }
}

/* Tablet: 2x2 grid → single column. Cards keep their internal
   text/image split since they're full width. */
@media (max-width: 860px) {
  .meet-agents-grid {
    grid-template-columns: 1fr;
  }
  .agent-card {
    /* Wider cards at this size — text panel can shrink back to
       a balanced 45% since the absolute width is bigger. */
    grid-template-columns: 45% 55%;
    min-height: 380px;
  }
}

/* Phone: stack text above image so the text panel gets the full
   card width and the portrait fills the bottom band. */
@media (max-width: 520px) {
  .agent-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 220px;
    min-height: 0;
  }
  .agent-card-content {
    padding: 1.5rem 1.4rem;
    background-image: none;
  }
  .agent-card-name {
    font-size: 1.7rem;
  }
  .agent-card-role {
    font-size: 0.62rem;
    margin-bottom: 0.9rem;
  }
  .agent-card-image-wrap::before {
    background: linear-gradient(
      to bottom,
      rgba(8, 8, 10, 0.85) 0%,
      rgba(8, 8, 10, 0.35) 8%,
      transparent 16%
    );
  }
  .agent-card-image {
    object-position: center 25%;
  }
}

/* ============================================================
 * "Thinking" rotation effect
 * ------------------------------------------------------------
 * One card at a time is marked `.agent-card--thinking` by JS,
 * which fades in a conic-gradient border that spins around the
 * card's perimeter in the agent's accent color. While active,
 * the card's video plays; when it rotates off, the video pauses
 * and the border fades out.
 *
 * Same visual recipe the AI runtime showcase uses for its
 * worker cards (conic-gradient + WebKit mask trick to reveal
 * only the border padding) — kept here as a standalone copy so
 * the landing page doesn't depend on the showcase's CSS.
 * ============================================================ */

.agent-card-thinking-border {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  overflow: hidden;
  opacity: 0;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--agent-accent) 38%, transparent));
  /* Mask trick: render the conic gradient inside the box, but
     only show the 2px ring around the edge — the inner fill is
     punched out by the XOR composite. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity 520ms ease, filter 520ms ease;
}

.agent-card-thinking-border::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 58deg,
    color-mix(in srgb, var(--agent-accent) 82%, white) 86deg,
    transparent 122deg,
    transparent 214deg,
    color-mix(in srgb, var(--agent-accent) 62%, #63d8ff) 246deg,
    transparent 292deg,
    transparent 360deg
  );
  animation: agent-card-thinking-spin 3.2s linear infinite;
}

@keyframes agent-card-thinking-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Active state: fade the border in. */
.agent-card--thinking .agent-card-thinking-border {
  opacity: 0.9;
}

/* Respect users who don't want motion: no spinning border, no
   video auto-play. Hover-play wiring (if you ever add it back)
   would still work fine. */
@media (prefers-reduced-motion: reduce) {
  .agent-card-thinking-border::before {
    animation: none;
  }
  .agent-card--thinking .agent-card-thinking-border {
    opacity: 0;
  }
}

/* ============================================================
 * Aurora overlay (per card)
 * ------------------------------------------------------------
 * undra_ambient_bg_alt.mp4 played as a tinted screen-blend
 * overlay inside the active card. Tinted in the agent's accent
 * color via a two-stage blend:
 *
 *   1. Wrapper gets a solid `--agent-accent` background — but only
 *      once the inner <video> is actually painting frames (the
 *      `.is-playing` class, added by JS on the video's `playing`
 *      event); until then it stays black so it can't flood the card.
 *      The inner <video> sits on top of it with mix-blend-mode:
 *      multiply → bright aurora pixels become the agent's color,
 *      dark pixels become black. Result inside the wrapper is
 *      a "colored aurora pattern on a black backdrop".
 *
 *   2. The wrapper itself has mix-blend-mode: screen against
 *      the card content → black pixels contribute nothing, the
 *      colored aurora ribbons lay tinted highlights over the
 *      card. `isolation: isolate` keeps the inner multiply blend
 *      local so it only sees the colored backdrop, not the card.
 *
 * Fades in when the card gets `.agent-card--thinking` AND the aurora
 * video is rendering (`.is-playing`); fades out during the rotation
 * gap. z-index 3 sits above the card's
 * text/portrait but below the thinking border at z 4, so the
 * crisp conic edge stays on top of the aurora glow.
 * ============================================================ */

.agent-card-aurora {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 3;
  mix-blend-mode: screen;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease, background-color 500ms ease;
  /* Dark fallback. The solid accent backdrop is only applied once the
     aurora <video> is actually painting frames (`.is-playing`, set by
     JS on the video's `playing` event). Until then the wrapper is
     black, and black under the wrapper's `screen` blend contributes
     nothing — so the flat accent fill can never flood the card during
     the gap before the video's first frame decodes (or if muted
     autoplay is throttled/stalled). */
  background: #000;
  /* The inner video is translated down 100px (see
     .agent-card-aurora-video). Clip the top 100px of this wrapper
     so the exposed solid agent-accent backdrop doesn't show as a
     band above the aurora pattern. */
  clip-path: inset(100px 0 0 0);
}

/* Accent backdrop appears only while the video is genuinely rendering,
   so the multiply blend always has live frames to carve it into thin
   ribbons instead of leaving a solid color flood over the card. */
.agent-card-aurora.is-playing {
  background: var(--agent-accent);
}

.agent-card-aurora-video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Oversized so even after a 45° rotation the video still covers
     the wrapper from corner to corner. 200% is plenty for any
     reasonable card aspect ratio at 45°. */
  width: 200%;
  height: 200%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  pointer-events: none;
  outline: none;
  /* Center the oversized element on the wrapper (translate -50%
     for that), shift down 100px (preserving the earlier down-shift
     aesthetic), and rotate 15° clockwise. The wrapper has
     overflow:hidden so the excess clips. */
  transform: translate(-50%, calc(-50% + 100px)) rotate(15deg);
  transform-origin: center center;
}

.agent-card--thinking .agent-card-aurora.is-playing {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .agent-card--thinking .agent-card-aurora,
  .agent-card--thinking .agent-card-aurora.is-playing {
    opacity: 0;
  }
}