/*
 * /bypass/turnstile — "Invisible by design".
 *
 * Chrome owned by _shared/chrome.css. Palette: teal #7ADAE6 = verified/passed,
 * purple #7C4FE8 = closer band, red not needed (the checks light teal as they
 * pass). One teal band (Acts 3-4), one purple closer. Distinct hero: a centered
 * minimal widget with radar rings + silent-check probes. is-on-* scoped to
 * topbar; closer CTA fixed.
 */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.ts-main { position: relative; z-index: 1; }
[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 — silent checks. Sticky, centered: H1 above, the widget scene below
   with radar rings + probe labels lighting as the checks pass.
   ═══════════════════════════════════════════════════════════════════════ */
.ts-hero { position: relative; min-height: 260vh; --ts: 0; }
.ts-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1.05fr 0.95fr; align-content: center; align-items: center; column-gap: clamp(32px, 5vw, 88px); row-gap: 22px; padding: 88px clamp(20px, 5vw, 80px) 56px; max-width: 1500px; margin-inline: auto; }

.ts-hero-copy { grid-column: 1; grid-row: 1; text-align: left; max-width: 640px; }
.ts-hero-copy .eyebrow { margin-bottom: 16px; }
.ts-hero-h1 { 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: var(--text-primary); margin: 0; text-wrap: balance; }
.ts-hero-h1 .l2 { display: block; }
.ts-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: 46ch; }
.ts-hero-cta { margin-top: 26px; display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; }
.ts-hero-cta .link-cta { align-self: center; transform: translateY(3px); }

/* The scene: radar rings + probes + the minimal widget at centre. */
.ts-scene { grid-column: 2; grid-row: 1 / span 2; justify-self: center; align-self: center; position: relative; width: min(440px, 42vw); aspect-ratio: 1; display: grid; place-items: center; }
.ts-status { grid-column: 1; grid-row: 2; }
.ts-ring { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 1px solid color-mix(in srgb, #7ADAE6 40%, transparent); opacity: 0; }
.ts-ring.r1 { animation: tsPing 3.4s ease-out infinite; }
.ts-ring.r2 { animation: tsPing 3.4s ease-out infinite 1.13s; }
.ts-ring.r3 { animation: tsPing 3.4s ease-out infinite 2.26s; }
@keyframes tsPing { 0% { transform: scale(0.5); opacity: 0.55; } 100% { transform: scale(4.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-ring { animation: none; } }

.ts-widget { position: relative; z-index: 3; width: 148px; border: 1px solid var(--border-subtle); border-radius: var(--radius-default, 10px); background: color-mix(in srgb, var(--background) 84%, #000 16%); padding: 16px 14px; text-align: center; }
.ts-widget-badge { width: 30px; height: 30px; margin: 0 auto 10px; position: relative; }
.ts-widget-spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, #7ADAE6 22%, transparent); border-top-color: #7ADAE6; animation: tsSpin 0.9s linear infinite; opacity: calc(1 - clamp(0, (var(--ts,0) - 0.7) / 0.14, 1)); }
@keyframes tsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-widget-spin { animation: none; } }
.ts-widget-check { position: absolute; inset: 0; opacity: clamp(0, (var(--ts,0) - 0.78) / 0.1, 1); }
.ts-widget-check path { fill: none; stroke: #7ADAE6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ts-widget-t { font-family: var(--font-base); font-size: 12.5px; color: var(--text-secondary); }
.ts-widget-brand { font-family: var(--font-code); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quaternary); margin-top: 6px; }

/* Probe chips around the widget; light teal as their check passes. */
.ts-probe { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.02em; color: var(--text-quaternary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 12px; white-space: nowrap; background: var(--background); transition: color 300ms ease, border-color 300ms ease; }
.ts-probe.is-on { color: #7ADAE6; border-color: color-mix(in srgb, #7ADAE6 45%, var(--border-subtle)); }
.ts-probe.p1 { left: 50%; top: 6%; }
.ts-probe.p2 { left: 92%; top: 36%; }
.ts-probe.p3 { left: 78%; top: 92%; }
.ts-probe.p4 { left: 22%; top: 92%; }
.ts-probe.p5 { left: 8%; top: 36%; }

.ts-status { font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.05em; color: var(--text-tertiary); transition: color 300ms ease; }
.is-verified .ts-status { color: #7ADAE6; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — it traded the grid for silence. Editorial + the hidden battery.
   ═══════════════════════════════════════════════════════════════════════ */
.ts-quiet { padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 900px; margin: 0 auto; text-align: center; }
.ts-quiet-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-medium); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); margin: 12px 0 0; text-wrap: balance; }
.ts-quiet-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px auto 0; max-width: 54ch; }
.ts-battery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: clamp(40px, 5vh, 60px) auto 0; max-width: 640px; }
.ts-cell { font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.02em; color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 9px 16px; transition: color 200ms ease, border-color 200ms ease; }
.ts-cell:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle)); }
.ts-quiet-note { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.05em; color: var(--text-quaternary); margin: clamp(32px, 4vh, 48px) 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ACTS 3-4 — one call passes silently. SOLID teal band, bloom center-top.
   ═══════════════════════════════════════════════════════════════════════ */
.ts-band { position: relative; background: #7ADAE6; color: #0B1416; --rise: 0; clip-path: circle(calc(var(--rise) * 150%) at 50% 0%); will-change: clip-path; }
.ts-band-inner { max-width: 1000px; margin: 0 auto; padding: clamp(120px, 18vh, 220px) clamp(20px, 5vw, 80px); text-align: center; }
.ts-band-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--display-large); line-height: 1.04; letter-spacing: -0.024em; color: #0B1416; margin: 14px auto 0; text-wrap: balance; max-width: 16ch; }
.ts-band-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #103a40; margin: 20px auto 0; max-width: 48ch; }
.ts-run-call { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin: clamp(40px, 5vh, 64px) auto 0; font-family: var(--font-code); font-size: var(--mkt-body-sm); color: #103a40; border-top: 1px solid rgba(11,20,22,0.3); border-bottom: 1px solid rgba(11,20,22,0.3); padding: 18px 6px; }
.ts-run-call .c-cmd { color: #0B1416; font-weight: 700; }
.ts-run-call .c-arrow { color: #14494f; }
.ts-run-call .c-ok { color: #0B1416; background: rgba(11,20,22,0.12); padding: 3px 10px; border-radius: 6px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — closer. SOLID purple. Fixed contrasting CTA.
   ═══════════════════════════════════════════════════════════════════════ */
.ts-closer { position: relative; background: #7C4FE8; color: #fff; padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 80px) clamp(80px, 12vh, 140px); }
.ts-closer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.ts-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; }
.ts-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; }
.ts-closer-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ts-closer-tagline { font-family: var(--font-base); font-size: 14px; color: rgba(255,255,255,0.82); }

/* Topbar adaptation (scoped) + fixed closer CTA. */

@media (min-width: 1920px) { .ts-band-inner { max-width: 1120px; } }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ts-hero { min-height: auto; }
  .ts-hero-stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: flex-start; max-width: none; padding: 120px 20px 64px; gap: 40px; }
  .ts-hero-copy { grid-column: auto; grid-row: auto; max-width: 100%; }
  .ts-scene { grid-column: auto; grid-row: auto; align-self: center; width: min(340px, 90vw); }
  .ts-status { grid-column: auto; grid-row: auto; }
  .ts-probe { font-size: 10.5px; padding: 5px 9px; }
  .ts-band { clip-path: none !important; }
}