/*
 * /compare/playwright — 4-act spoke.
 *
 * Page signature: "the lines".  Code lines as editorial spine.
 *
 * Layout moves NOT used in BD/Apify spokes:
 *   - Act 1: oversized H1 LEFT + sub baselined RIGHT, with a
 *     code-typing terminal anchored bottom-right (not a split-
 *     pane, not a draggable)
 *   - Act 2: SATURATED BAND (warm-violet → warm-dark gradient),
 *     oversized count + chip cluster (not a chip-rail meter)
 *   - Act 3: returns to dark; single line of code at H1 scale,
 *     CENTRED, with asymmetric orbital chips (not two columns)
 *   - Act 4: centred closer (universal pattern)
 *
 * Universal chrome in ../../_shared/chrome.css.
 */

@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

main { width: 100%; max-width: 100vw; position: relative; }

/* Cursor-portal scope on this page — pills carry the spinning
   O pointer (the page has #cursor-portal in HTML + JS).  Both
   the layer chips (Act 2) and the orbital chips (Act 3) hide
   the native pointer so the SVG portal is the sole pointer on
   hover.  The back-to-top button is universal. */
.pw-layer,
.pw-orbit-chip,
.back-to-top { cursor: pointer; }
.pw-layer *,
.pw-orbit-chip * { cursor: pointer; }

/* ───────────────────────────────────────────────────────────
   Act 1 — You wrote the engine.  The rest is yours.
─────────────────────────────────────────────────────────── */

.pw-act-1 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(96px, 14vh, 160px) clamp(20px, 4vw, 56px) clamp(72px, 10vh, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-act-1-frame {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

/* Asymmetric hero — H1 LEFT (1.35fr column), sub RIGHT (1fr).
   align-items: end so the two text blocks share a bottom rule. */
.pw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
}

.pw-hero-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 24px);
}

.pw-hero-kicker { margin: 0; }

/* H1 is OVERSIZED — clamp goes up to 160px on wide-desktop. */
.pw-hero-h1 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 14ch;
  text-wrap: balance;
}

.pw-hero-h1-em {
  font-style: normal;
  font-weight: 500;
}

.pw-hero-sub {
  margin: 0;
  text-align: right;
  margin-left: auto;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 48ch;
}

/* ── Code terminal ─────────────────────────────────────────
   Anchored BOTTOM-RIGHT of the act below the hero — not in a
   split-pane, not centred.  Width capped so it reads as a
   discrete artifact, not a frame. */
.pw-term-wrap {
  display: flex;
  justify-content: flex-end;
}

/* Terminal widget — no fill, border-subtle only.  Matches the
   BD / Apify widget convention: brand chrome lives in the
   border, not in a tinted fill. */
.pw-term {
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 14px);
  background: transparent;
  overflow: hidden;
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
}

.pw-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.pw-term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.pw-term-name {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

.pw-term-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
}

.pw-term-line {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pw-act-1.is-in .pw-term-line { opacity: 1; transform: none; }

/* Stagger per index — the first 3 lines land fast (actual
   code), then the comment-line lines stack progressively so
   the reader feels the scope grow. */
.pw-act-1.is-in .pw-term-line[data-i="0"] { transition-delay: 180ms; }
.pw-act-1.is-in .pw-term-line[data-i="1"] { transition-delay: 260ms; }
.pw-act-1.is-in .pw-term-line[data-i="2"] { transition-delay: 340ms; }
.pw-act-1.is-in .pw-term-line[data-i="3"] { transition-delay: 520ms; }
.pw-act-1.is-in .pw-term-line[data-i="4"] { transition-delay: 680ms; }
.pw-act-1.is-in .pw-term-line[data-i="5"] { transition-delay: 840ms; }
.pw-act-1.is-in .pw-term-line[data-i="6"] { transition-delay: 1000ms; }
.pw-act-1.is-in .pw-term-line[data-i="7"] { transition-delay: 1160ms; }
.pw-act-1.is-in .pw-term-line[data-i="8"] { transition-delay: 1320ms; }

.pw-kw { color: #C7B0FF; }
.pw-cm { color: rgba(247, 188, 107, 0.78); font-style: italic; }

/* ───────────────────────────────────────────────────────────
   Act 2 — The hidden stack.

   SATURATED BAND.  Warm violet → warm dark gradient.  Only
   saturated band in the page; the BG transition between Act
   1 and Act 2 is the design move.
─────────────────────────────────────────────────────────── */

/* Brand band — SOLID purple painted in by a circle-clip
   transition on IO entry.  The act itself stays warm-dark so
   the entry feels like a curtain rising; the .pw-act-2-bg
   child carries the solid #7C4FE8 and expands its clip-path
   from `circle(0%)` to `circle(150%)` over 1.2s on `.is-in`.
   Same curtain-rise recipe as firecrawl Act 2. */
.pw-act-2 {
  position: relative;
  color: #FFFFFF;
  padding: clamp(120px, 18vh, 220px) clamp(20px, 4vw, 56px);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.pw-act-2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #7C4FE8;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pw-act-2.is-in .pw-act-2-bg {
  clip-path: circle(150% at 50% 50%);
}

.pw-act-2-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* OVERSIZED count on the left.  clamp up to 280px at wide-
   desktop.  Number tracks tighter for monospace digit feel. */
.pw-count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 22px);
}

.pw-count-num {
  font-family: var(--font-display, var(--font-base));
  font-size: clamp(140px, 18vw, 280px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.pw-count-label {
  font-family: var(--font-base);
  font-size: var(--mkt-lead);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  max-width: 20ch;
  text-wrap: balance;
}

/* Chips on the right — wrap freely, low opacity by default,
   one chip lights up on hover.  No fixed grid — flex-wrap
   so the layout feels editorial. */
.pw-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
}

.pw-layer {
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--mkt-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
  /* No `cursor: default` here — the global `.pw-layer
     { cursor: pointer }` rule at the top of the file must win
     so the SVG portal is the sole pointer on hover.  Adding
     cursor: default here would let the native pointer leak
     in alongside the spinning O. */
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pw-layer:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

/* When the number is hovered, ALL chips brighten — visual
   confirmation that the number = the chip count. */
.pw-count:hover ~ .pw-layers .pw-layer,
.pw-count-num:hover ~ .pw-layers .pw-layer {
  color: #FFFFFF;
}

/* ───────────────────────────────────────────────────────────
   Act 3 — Same engine.  None of the stack.

   Returns to dark (BG flip back).  Editorial header LEFT-
   anchored.  Below: a single line of code at H1 scale,
   CENTRED, surrounded by asymmetric orbital annotation chips
   placed absolutely.
─────────────────────────────────────────────────────────── */

.pw-act-3 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 56px) clamp(120px, 16vh, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-act-3-frame {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 96px);
}

/* No max-width on the head so the H2 can spread across the
   wider frame at desktop / wide-desktop tiers.  Sub gets its
   own narrower ch cap so the editorial body stays readable. */
.pw-act-3-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 22px);
}

.pw-act-3-h2 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text-primary);
  /* Wide ch cap so wide-desktop renders this on one or two
     lines instead of stacking 4-5 narrow rows. */
  max-width: 22ch;
  text-wrap: balance;
}

.pw-act-3-em {
  font-style: normal;
  font-weight: 500;
}

/* Orbit zone — code centred, chips placed absolutely via
   --ox/--oy per pill.  Height generous so chips have room
   to breathe.  Layout reads asymmetric / editorial, not a
   grid. */
.pw-orbit {
  position: relative;
  width: 100%;
  height: clamp(360px, 50vh, 560px);
}

.pw-orbit-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--mkt-hero);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: default;
  text-align: center;
}

/* Chips sit absolutely around the code via per-pill --ox/--oy.
   Two extra transforms layer on the centring translate:
     • --tx / --ty drive the subtle mouse-follow (JS sets these
       on mousemove, in px, capped to a few px range)
     • the centring translate(-50%, -50%) keeps the pill
       anchored to its --ox/--oy anchor
   Lit state is driven by --lit (0 → 1), animated via JS as
   the orbit travels through the viewport. */
/* Chips sit absolutely around the code via per-pill --ox/--oy.
   --tx / --ty drive the subtle mouse-follow (JS sets these on
   mousemove, in px, capped to a few px).  Centring translate
   keeps the pill anchored to its --ox/--oy. */
.pw-orbit-chip {
  --tx: 0px;
  --ty: 0px;
  position: absolute;
  top: var(--oy, 50%);
  left: var(--ox, 50%);
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: var(--mkt-body-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  background: #7C4FE8;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  opacity: 0;
  isolation: isolate;
  /* transform is NOT in the transition list — a rAF loop in JS
     drives --tx/--ty per frame with per-chip lerp, so a CSS
     transition layered on top would smear the conga effect.
     Only opacity (arrival) and border-color (hover) animate
     via CSS. */
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease;
  white-space: nowrap;
}

/* Inline check icon — sits left of the label.  Stroke colour
   inherits from the chip's white text. */
.pw-orbit-chip-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* On Act 3 entry, all chips fade in together with a small
   stagger — single arrival beat, no scroll-driven progression.
   transition-delay applies ONLY to opacity so the transform
   (mouse-follow) doesn't get held back by the stagger. */
.pw-act-3.is-in .pw-orbit-chip { opacity: 1; }

/* Delays match the (opacity, border-color) transition list. */
.pw-act-3.is-in .pw-orbit-chip[data-i="0"] { transition-delay: 240ms, 0ms; }
.pw-act-3.is-in .pw-orbit-chip[data-i="1"] { transition-delay: 320ms, 0ms; }
.pw-act-3.is-in .pw-orbit-chip[data-i="2"] { transition-delay: 400ms, 0ms; }
.pw-act-3.is-in .pw-orbit-chip[data-i="3"] { transition-delay: 480ms, 0ms; }
.pw-act-3.is-in .pw-orbit-chip[data-i="4"] { transition-delay: 560ms, 0ms; }
.pw-act-3.is-in .pw-orbit-chip[data-i="5"] { transition-delay: 640ms, 0ms; }

/* Hover lifts the border slightly so the chip reads as alive. */
.pw-orbit-chip:hover {
  border-color: rgba(255, 255, 255, 0.55);
}

/* ───────────────────────────────────────────────────────────
   Act 4 — Closer.
─────────────────────────────────────────────────────────── */

.pw-act-4 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(120px, 18vh, 220px) clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-act-4-frame {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 2.6vw, 36px);
}

.pw-act-4-kicker { margin: 0; }

.pw-act-4-h2 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 18ch;
  text-wrap: balance;
}

.pw-act-4-em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
}

.pw-act-4-cta {
  margin-top: clamp(8px, 1vw, 16px);
  gap: 14px;
}

.pw-act-4-secondary {
  font-family: var(--font-base);
  font-size: var(--text-small, 13px);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 180ms;
}

.pw-act-4-secondary:hover { text-decoration-color: rgba(255, 255, 255, 0.8); }

/* ── Wide-desktop tiers ────────────────────────────────── */

@media (min-width: 1600px) {
  .pw-act-1-frame { max-width: 1480px; }
  .pw-hero-h1 { font-size: clamp(96px, 8vw, 144px); }
  .pw-hero-sub { font-size: 22px; }
  .pw-term { max-width: 640px; }
  .pw-act-2-frame { max-width: 1480px; }
  .pw-count-num { font-size: clamp(180px, 16vw, 320px); }
  .pw-count-label { font-size: 24px; }
  .pw-act-3-frame { max-width: 1480px; }
  
}

@media (min-width: 1920px) {
  .pw-act-1-frame { max-width: 1680px; }
  .pw-hero-h1 { font-size: clamp(108px, 8vw, 168px); }
  .pw-term { max-width: 720px; }
  .pw-act-2-frame { max-width: 1680px; }
  .pw-count-num { font-size: clamp(220px, 16vw, 360px); }
  .pw-count-label { font-size: 28px; }
  .pw-act-3-frame { max-width: 1680px; }
  
}

@media (min-width: 2400px) {
  .pw-act-1-frame { max-width: 2000px; }
  .pw-hero-h1 { font-size: 180px; }
  .pw-term { max-width: 840px; }
  .pw-act-2-frame { max-width: 2000px; }
  .pw-count-num { font-size: 400px; }
  .pw-act-3-frame { max-width: 2000px; }
  
}

/* ── Mobile ────────────────────────────────────────────────
   Strategy: keep it SIMPLE on phones.  All asymmetric splits
   collapse to a single column.  The orbital trail (Act 3)
   collapses to a static stacked list — touch devices don't
   have a cursor and the JS loop is skipped.  Brand purple
   band on Act 2 stays solid (no gradient ever). */

@media (max-width: 880px) {
  .pw-hero { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .pw-hero-sub { text-align: left; margin-left: 0; max-width: 64ch; }
  .pw-term-wrap { justify-content: stretch; }
  .pw-term { max-width: 100%; }
  .pw-act-2-frame { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
  /* Act 1 hero — tighter typography, terminal full-width. */
  .pw-act-1 { padding: clamp(80px, 14vh, 120px) clamp(20px, 4vw, 32px) clamp(56px, 8vh, 96px); }
  .pw-hero-h1 { font-size: var(--mkt-h2); max-width: 14ch; line-height: 1.02; }
  .pw-hero-sub { font-size: 15px; }
  .pw-term-bar { padding: 9px 12px; }
  .pw-term-name { font-size: 11px; }
  .pw-term-body { padding: 14px 16px 18px; font-size: 12px; line-height: 1.6; }

  /* Act 2 — count + chip cluster stack vertically.  Number
     stays oversized but a touch smaller; chips slightly less
     padding so 8 of them wrap comfortably across a phone. */
  .pw-act-2 { padding: clamp(80px, 14vh, 140px) clamp(20px, 4vw, 32px); }
  .pw-count { gap: 10px; }
  .pw-count-num { font-size: clamp(112px, 28vw, 180px); }
  .pw-count-label { font-size: 15px; max-width: none; }
  .pw-layers { gap: 8px; }
  .pw-layer { padding: 6px 12px; font-size: 12px; }

  /* Act 3 — collapse the orbit to a static stacked column.
     Touch devices don't fire mousemove, so the conga rAF loop
     is skipped in JS; chips render at full opacity, no orbit,
     no transform.  Same opacity stagger still runs on IO entry. */
  .pw-act-3 { padding: clamp(80px, 14vh, 140px) clamp(20px, 4vw, 32px); }
  
  .pw-orbit {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .pw-orbit-code {
    position: static;
    transform: none;
    font-size: var(--mkt-h3);
    white-space: normal;
  }
  .pw-orbit-chip {
    position: static;
    transform: none;
    --tx: 0px;
    --ty: 0px;
  }
  /* Chips on mobile are always lit and full opacity — no
     fade-in stagger, no follow.  Simpler reads better here. */
  .pw-orbit-chip,
  .pw-act-3.is-in .pw-orbit-chip { opacity: 1; transition-delay: 0s; }

  /* Act 4 closer — tighter padding + scale. */
  .pw-act-4 { padding: clamp(80px, 14vh, 140px) clamp(20px, 4vw, 32px); }
  
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  --font-display auto-flips to Mq12 via
   DS-level override.

   Act 2 (purple band) + Act 3 .pw-orbit-chip (solid purple
   chip) keep their rgba-white chrome: those surfaces stay
   branded-purple in BU, so white-on-purple is canonical.
═══════════════════════════════════════════════════════════ */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}

html:not(.dark) .pw-term-dot { background: rgba(29, 22, 18, 0.28); }
html:not(.dark) .pw-act-4-secondary { text-decoration-color: rgba(29, 22, 18, 0.3); }
html:not(.dark) .pw-act-4-secondary:hover { text-decoration-color: rgba(29, 22, 18, 0.8); }