/*
 * /bypass/cloudflare — "The checkpoint".
 *
 * Chrome (topbar, footer, cursor portal, mobile nav) is owned by
 * _shared/chrome.css and MUST NOT be redeclared here. This file styles only
 * the page acts. Colour comes from DS tokens; the two saturated regions are
 * SOLID brand fills (#7ADAE6 teal band across Acts 3-4, #7C4FE8 purple mesh
 * closer). No gradients on any act background.
 */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.cf-main { position: relative; z-index: 1; }

/* Shared editorial atoms ------------------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), transform 720ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 1 — the checkpoint. A gate that splits open as the challenge resolves.
   Sticky stage (Pattern A): --cf 0→1 drives the whole scene; the request
   path draws through the opening (Pattern F). Off-grid: the H1 overlaps the
   gate seam rather than sitting in a tidy column.
   ═══════════════════════════════════════════════════════════════════════ */
.cf-hero { position: relative; min-height: 260vh; }
.cf-hero-stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

/* The gate — two dark halves that meet at centre and slide apart. */
.cf-gate { position: absolute; inset: 0; z-index: 0; }
.cf-gate-half {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: var(--background);
  border-inline: 1px solid var(--border-subtle);
  will-change: transform;
  transform: translateZ(0);
  transition: none;
}
.cf-gate-half--l { left: 0;  transform: translateZ(0) translateX(calc(var(--cf, 0) * -46%)); }
.cf-gate-half--r { right: 0; transform: translateZ(0) translateX(calc(var(--cf, 0) * 46%)); }
/* Vertical scanning seam-lines on the inner edge of each half. */
.cf-gate-half::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, #7ADAE6 55%, transparent);
  opacity: calc(1 - var(--cf, 0));
}
.cf-gate-half--l::after { right: 0; }
.cf-gate-half--r::after { left: 0; }

/* The clean page revealed behind the gate as it opens. */
.cf-behind {
  position: absolute; inset: 0; z-index: -1;
  display: grid; place-items: center;
  background: var(--background);
}
.cf-behind-doc {
  width: min(520px, 74vw);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 22px 24px;
  opacity: calc((var(--cf, 0) - 0.55) / 0.45);
  transform: translateY(calc((1 - var(--cf, 0)) * 20px));
}
.cf-behind-doc .cf-doc-line { height: 8px; border-radius: 4px; background: var(--border); margin: 0 0 12px; }
.cf-behind-doc .cf-doc-line.s1 { width: 40%; background: color-mix(in srgb, #7ADAE6 60%, transparent); }
.cf-behind-doc .cf-doc-line.s2 { width: 92%; }
.cf-behind-doc .cf-doc-line.s3 { width: 78%; }
.cf-behind-doc .cf-doc-line.s4 { width: 86%; }
.cf-behind-doc .cf-doc-status { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.06em; color: #7ADAE6; margin-top: 16px; }

/* Request path — a beam drawn through the gate opening (Pattern F), centred so
   it never crosses the left-anchored H1. */
.cf-path { position: absolute; left: 50%; top: 50%; z-index: 1; width: min(560px, 42vw); height: 40px; pointer-events: none; transform: translate(-50%, -20px); }
.cf-path svg { width: 100%; height: 40px; display: block; overflow: visible; }
.cf-path .cf-path-line { stroke: #7ADAE6; stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--cf,0) - 0.5) / 0.4, 1)); pathLength: 1; opacity: clamp(0, (var(--cf,0) - 0.45) / 0.2, 1); }
.cf-path .cf-path-head { fill: #7ADAE6; opacity: clamp(0, (var(--cf,0) - 0.5) / 0.2, 1); transform: translateX(calc(clamp(0, (var(--cf,0) - 0.5) / 0.4, 1) * (50vw - 30px))); }

/* The checkpoint card sits at the seam. */
.cf-scene {
  position: relative; z-index: 3;
  width: min(360px, 82vw);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--background) 82%, #000 18%);
  padding: 26px 26px 22px;
  text-align: center;
  transform: translateZ(0) scale(calc(1 - var(--cf,0) * 0.12));
  opacity: calc(1 - clamp(0, (var(--cf,0) - 0.62) / 0.28, 1));
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
}
.cf-scene-badge { width: 34px; height: 34px; margin: 0 auto 14px; display: grid; place-items: center; }
.cf-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid color-mix(in srgb, #7ADAE6 22%, transparent); border-top-color: #7ADAE6; animation: cfSpin 0.9s linear infinite; opacity: calc(1 - clamp(0, var(--cf,0) / 0.4, 1)); }
@keyframes cfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf-spinner { animation: none; } }
.cf-check { position: absolute; width: 30px; height: 30px; opacity: clamp(0, (var(--cf,0) - 0.3) / 0.2, 1); }
.cf-check path { stroke: #7ADAE6; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; pathLength: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--cf,0) - 0.3) / 0.22, 1)); }
.cf-scene-status { font-family: var(--font-code); font-size: 13px; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0; min-height: 18px; }
.cf-scene-status .cf-st-checking { opacity: calc(1 - clamp(0, (var(--cf,0) - 0.3) / 0.15, 1)); }
.cf-scene-status .cf-st-verified { position: absolute; left: 0; right: 0; opacity: clamp(0, (var(--cf,0) - 0.34) / 0.15, 1); color: #7ADAE6; }
.cf-scene-status-wrap { position: relative; }
.cf-scene-host { font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); margin: 12px 0 0; }

/* Hero copy — off-grid: pinned to lower-left, overlapping the gate. */
.cf-hero-copy { position: absolute; left: clamp(20px, 5vw, 72px); bottom: clamp(40px, 8vh, 92px); z-index: 4; max-width: 620px; }
.cf-hero-copy .eyebrow { margin-bottom: 18px; }
.cf-hero-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--display-xlarge); line-height: var(--leading-display-xlarge, 1.02);
  letter-spacing: var(--tracking-dense, -0.024em);
  color: var(--text-primary); margin: 0; text-wrap: balance;
}
.cf-hero-h1 .cf-h1-2 { display: block; }
.cf-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 20px 0 0; max-width: 48ch; }
.cf-hero-cta { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* .link-cta ships align-self: flex-start; override so it centres against the
   filled button. The 6px underline gap is offset so the two labels align. */
.cf-hero-cta .link-cta { align-self: center; transform: translateY(3px); }
/* Scroll cue — fades out as the gate opens. */
.cf-scroll-cue { position: absolute; bottom: 26px; right: clamp(20px, 5vw, 72px); z-index: 4; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quaternary); opacity: calc(1 - clamp(0, var(--cf,0) / 0.3, 1)); }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — the detection wall (Pattern E). Left-anchored, asymmetric. Each
   layer reveals its trip-detail on hover; a cursor-tracked glow tracks the
   pointer down the stack.
   ═══════════════════════════════════════════════════════════════════════ */
.cf-why { padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 72px) clamp(120px, 16vh, 200px); position: relative; }
.cf-why-head { max-width: 620px; margin: 0 0 clamp(48px, 6vh, 88px); }
.cf-why-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-medium); line-height: var(--leading-display-medium, 1.08); letter-spacing: var(--tracking-dense, -0.02em); color: var(--text-primary); margin: 12px 0 0; text-wrap: balance; }
.cf-why-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 52ch; }

.cf-wall { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 940px; --glow-y: 50%; }
.cf-wall::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, #7C4FE8 70%, transparent); opacity: 0; transform: translateY(0); transition: opacity 200ms ease; }
.cf-wall.is-live::before { opacity: 1; top: var(--glow-y); height: 64px; bottom: auto; transform: translateY(-32px); transition: top 120ms linear, opacity 200ms ease; }
.cf-layer {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline;
  gap: 22px; padding: 26px 6px; border-top: 1px solid var(--border-subtle);
  opacity: 0; transform: translateX(-14px);
  transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1), border-color 240ms ease;
}
.cf-layer:last-child { border-bottom: 1px solid var(--border-subtle); }
.cf-layer.is-in { opacity: 1; transform: none; }
.cf-layer-num { font-family: var(--font-code); font-size: 13px; color: var(--text-quaternary); letter-spacing: 0.05em; }
.cf-layer-name { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); color: var(--text-primary); letter-spacing: -0.01em; }
.cf-layer-detail { font-family: var(--font-base); font-size: 14.5px; line-height: 1.5; color: var(--text-tertiary); max-width: 46ch; margin: 10px 0 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 380ms cubic-bezier(0.22,1,0.36,1), opacity 300ms ease, margin 380ms ease; }
.cf-layer-trip { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.06em; color: var(--text-quaternary); white-space: nowrap; align-self: center; transition: color 240ms ease; }
.cf-layer:hover, .cf-layer:focus-within { border-top-color: var(--border); }
.cf-layer:hover .cf-layer-detail, .cf-layer:focus-within .cf-layer-detail { max-height: 88px; opacity: 1; margin-top: 12px; }
.cf-layer:hover .cf-layer-trip, .cf-layer:focus-within .cf-layer-trip { color: #7C4FE8; }
.cf-layer:hover .cf-layer-num, .cf-layer:focus-within .cf-layer-num { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   ACTS 3-4 — one call, straight through. A SINGLE teal band spans both acts
   (Pablo's brief: branded BG over more than one act). Enters via bloom
   curtain (Pattern C): clip-path circle grows from the checkpoint corner.
   ═══════════════════════════════════════════════════════════════════════ */
.cf-band {
  position: relative;
  background: #7ADAE6;              /* SOLID brand teal */
  color: #0E1A1C;
  --through: 0;
  clip-path: circle(calc(var(--through) * 150%) at 82% 0%);
  will-change: clip-path;
}
.cf-band-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }

/* Act 3 — the single call, mirrored full-bleed. */
.cf-through { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 88px); align-items: center; padding: clamp(120px, 18vh, 220px) 0 clamp(90px, 12vh, 150px); }
.cf-through-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: var(--leading-display-large, 1.04); letter-spacing: var(--tracking-dense, -0.024em); color: #0B1416; margin: 14px 0 0; text-wrap: balance; }
.cf-through-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #103a40; margin: 20px 0 0; max-width: 46ch; }
.cf-through-note { font-family: var(--font-base); font-size: 13.5px; color: #14494f; margin: 22px 0 0; }
.cf-through-note strong { color: #0B1416; font-weight: 600; }

/* The Fetch call — a code card on the teal (border on teal, no dark fill). */
.cf-code { border: 1px solid rgba(11,20,22,0.28); border-radius: var(--radius-lg, 12px); background: transparent; overflow: hidden; }
.cf-code-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(11,20,22,0.16); }
.cf-code-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,20,22,0.28); }
.cf-code-tag { margin-left: auto; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #14494f; }
.cf-code pre { margin: 0; padding: 20px 18px; font-family: var(--font-code); font-size: var(--mkt-body-xs); line-height: 1.7; color: #0B1416; overflow-x: auto; }
.cf-code .tok-cmd { color: #0B1416; font-weight: 700; }
.cf-code .tok-flag { color: #0E5B63; }
.cf-code .tok-str { color: #14494f; }
.cf-code-out { border-top: 1px dashed rgba(11,20,22,0.22); padding: 14px 18px; font-family: var(--font-code); font-size: 12.5px; color: #0E5B63; }
.cf-code-out b { color: #0B1416; }

/* Act 4 — what comes back. Different layout: full-width payload strip. */
.cf-return { padding: clamp(20px, 4vh, 60px) 0 clamp(120px, 18vh, 220px); border-top: 1px solid rgba(11,20,22,0.16); }
.cf-return-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vh, 56px); }
.cf-return-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-medium); line-height: 1.06; letter-spacing: -0.02em; color: #0B1416; margin: 0; max-width: 16ch; }
.cf-return-sub { font-family: var(--font-base); font-size: 15px; line-height: 1.5; color: #103a40; max-width: 40ch; margin: 0; }
.cf-payload { border: 1px solid rgba(11,20,22,0.28); border-radius: var(--radius-lg, 12px); background: transparent; overflow: hidden; }
.cf-payload-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid rgba(11,20,22,0.16); }
.cf-payload-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-family: var(--font-code); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #14494f; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.cf-payload-tab[aria-selected="true"] { background: var(--background); color: #7ADAE6; }
.cf-payload-body { position: relative; min-height: 208px; }
.cf-payload-pane { position: absolute; inset: 0; padding: 20px 20px; margin: 0; font-family: var(--font-code); font-size: var(--mkt-body-xs); line-height: 1.65; color: #0B1416; opacity: 0; transition: opacity 420ms cubic-bezier(0.22,1,0.36,1); overflow: auto; }
.cf-payload-pane.is-active { opacity: 1; }
.cf-payload-pane .tok-tag { color: #0E5B63; }
.cf-payload-pane .tok-key { color: #0E5B63; }

/* proof chips under the payload */
.cf-proof { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px; }
.cf-proof-chip { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.03em; color: #0E5B63; border: 1px solid rgba(11,20,22,0.24); border-radius: 999px; padding: 7px 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — closer. Purple mesh wrap. "Cloudflare is one wall."
   ═══════════════════════════════════════════════════════════════════════ */
.cf-closer { position: relative; background: #7C4FE8; overflow: hidden; padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 72px) clamp(80px, 12vh, 140px); }
.cf-closer-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.cf-closer-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: 1.04; letter-spacing: -0.024em; color: #fff; margin: 0; text-wrap: balance; }
.cf-closer-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(255,255,255,0.9); margin: 22px auto 0; max-width: 52ch; }
.cf-closer-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cf-closer-tagline { font-family: var(--font-base); font-size: 14px; color: rgba(255,255,255,0.82); }
/* sibling bypass links */
.cf-siblings { position: relative; z-index: 1; max-width: 900px; margin: clamp(56px, 8vh, 96px) auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.24); }
.cf-siblings-label { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0 0 16px; text-align: center; }
.cf-siblings-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.cf-sibling { font-family: var(--font-base); font-size: 13.5px; color: #fff; border: 1px solid rgba(255,255,255,0.36); border-radius: 999px; padding: 8px 15px; transition: background 200ms ease, border-color 200ms ease; }
.cf-sibling:hover, .cf-sibling:focus-visible { background: rgba(255,255,255,0.14); border-color: #fff; outline: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Topbar adaptation over the saturated regions.
   ═══════════════════════════════════════════════════════════════════════ */
/* Topbar CTA legible on the bands: purple button on teal, teal button on
   purple (canonical site treatment). */

/* Cursor portal — the spinning O is the sole pointer over the ONE explorable
   widget (the detection wall). Read-only panels keep the default cursor;
   clickable pills use the native hand so they read as controls. */
.cf-layer, .cf-layer * { cursor: none; }
.cf-payload-tab { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════
   Wide-desktop tiers.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .cf-hero-copy { max-width: 720px; }
  .cf-band-inner { max-width: 1400px; }
  .cf-wall { max-width: 1080px; }
}
@media (min-width: 1920px) {
  .cf-band-inner { max-width: 1560px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion fallback (<=900px): sticky stage collapses to a
   static resolved scene; wall + band render in natural flow.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cf-hero { min-height: auto; }
  .cf-hero-stage { position: static; height: auto; overflow: visible; display: block; padding: 128px 20px 72px; }
  .cf-gate, .cf-path, .cf-scroll-cue { display: none; }
  .cf-behind { position: static; inset: auto; }
  .cf-behind-doc { opacity: 1; transform: none; margin: 0 auto 32px; width: 100%; }
  .cf-hero-copy { position: static; max-width: none; }
  .cf-through { grid-template-columns: 1fr; gap: 32px; padding: 96px 0 64px; }
  .cf-band { clip-path: none !important; }
  .cf-return-head { flex-direction: column; align-items: flex-start; }
  .cf-payload-body { min-height: 240px; }
  .cf-layer { grid-template-columns: 40px 1fr; }
  .cf-layer-trip { grid-column: 2; align-self: start; margin-top: 6px; }
  .cf-layer-detail { max-height: none; opacity: 1; margin-top: 10px; }  /* always open on touch */
}

/* Closer CTA: fixed contrast for the closer background, never scroll-dependent. */