/* ============================================================================
   TortFlow — Base layer: reset, typography, layout primitives, wordmark,
   buttons, atmosphere (aurora + grain), scroll-reveal, reduced-motion.
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed header. */
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--tf-font-body);
  font-size: var(--tf-fs-body);
  line-height: 1.6;
  color: var(--tf-ink);
  background: var(--tf-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

::selection {
  background: var(--tf-green);
  color: #fff;
}

/* ---- Focus visibility (accessible) ---- */
:focus-visible {
  outline: 2px solid var(--tf-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================================
   Typography
   ============================================================================ */
.display,
.h1,
.h2,
.h3 {
  font-family: var(--tf-font-display);
  font-variation-settings: 'opsz' 144, 'wght' 560;
  font-weight: 560;
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--tf-ink);
  text-wrap: balance;
}

.display { font-size: var(--tf-fs-display); line-height: 0.98; letter-spacing: -0.03em; }
.h1 { font-size: var(--tf-fs-h1); }
.h2 { font-size: var(--tf-fs-h2); line-height: 1.06; }
.h3 {
  font-size: var(--tf-fs-h3);
  font-variation-settings: 'opsz' 90, 'wght' 560;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

/* Italic display accent — Fraunces' expressive cut, used sparingly for emphasis. */
.serif-em {
  font-family: var(--tf-font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 500;
}

.eyebrow {
  font-family: var(--tf-font-body);
  font-size: var(--tf-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tf-green-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--center::before { display: none; }

.lead {
  font-size: var(--tf-fs-lead);
  line-height: 1.5;
  color: var(--tf-ink-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.muted { color: var(--tf-ink-3); }
.body { color: var(--tf-ink-2); line-height: 1.62; text-wrap: pretty; }
.ink-green { color: var(--tf-green); }

/* ============================================================================
   Layout primitives
   ============================================================================ */
.container {
  width: 100%;
  max-width: var(--tf-container);
  margin-inline: auto;
  padding-inline: var(--tf-gutter);
}
.container--wide { max-width: var(--tf-container-wide); }

.section { padding-block: var(--tf-section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.section-head { max-width: 44rem; }
.section-head--center { max-width: 48rem; margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 0.9rem; }
.section-head .lead { margin-top: 1.15rem; }

.stack > * + * { margin-top: var(--stack, 1rem); }

.divider-soft { height: 1px; background: var(--tf-hairline); border: 0; }

/* ============================================================================
   Wordmark — identical construction to the CDP (.auth-wordmark / .app-title).
   Fraunces display face, green "AI". No pictorial mark.
   ============================================================================ */
.wordmark {
  font-family: var(--tf-font-display);
  font-variation-settings: 'opsz' 144, 'wght' 600;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tf-ink);
  white-space: nowrap;
}
.wordmark__ai { color: var(--tf-green); }

/* ============================================================================
   Buttons — Apple-clean, matching the CDP's filled/neutral button feel.
   ============================================================================ */
.btn {
  --btn-bg: var(--tf-surface);
  --btn-fg: var(--tf-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 48px;
  padding-inline: 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--tf-r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9688rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--tf-ease-out), box-shadow 0.25s var(--tf-ease),
    background-color 0.2s var(--tf-ease), border-color 0.2s var(--tf-ease), color 0.2s var(--tf-ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary {
  --btn-bg: var(--tf-green);
  --btn-fg: var(--tf-on-brand);
  box-shadow: var(--tf-shadow-brand);
}
.btn-primary:hover { --btn-bg: var(--tf-green-600); box-shadow: 0 22px 60px -14px var(--tf-green-glow); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--tf-ink);
  border-color: var(--tf-field-border);
}
.btn-ghost:hover { background: var(--tf-hover); border-color: var(--tf-ink-4); transform: translateY(-2px); }

.btn-lg { height: 54px; padding-inline: 1.75rem; font-size: 1.03rem; }
.btn-sm { height: 40px; padding-inline: 1.05rem; font-size: 0.9rem; }

.btn .btn-arrow { transition: transform 0.25s var(--tf-ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Text link with animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--tf-green-ink);
  font-weight: 550;
  font-size: var(--tf-fs-small);
}
.link-arrow svg { transition: transform 0.25s var(--tf-ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================================
   Atmosphere — aurora blobs + film grain (from the CDP AuthLayout).
   Purely decorative; sits behind content.
   ============================================================================ */
.aurora {
  position: absolute;
  inset: -10% -8%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.8;
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: normal;
}
.aurora__blob--green {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.55), transparent 68%);
}
.aurora__blob--indigo {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at 30% 30%, rgba(88, 86, 214, 0.42), transparent 66%);
}
.aurora__blob--teal {
  width: 34vw; height: 34vw; max-width: 480px; max-height: 480px;
  background: radial-gradient(circle at 30% 30%, rgba(90, 200, 250, 0.36), transparent 66%);
}
.aurora__blob--amber {
  width: 32vw; height: 32vw; max-width: 440px; max-height: 440px;
  background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.30), transparent 66%);
}
:root[data-theme='dark'] .aurora { opacity: 0.5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .aurora { opacity: 0.5; }
}

/* Film grain — one SVG turbulence tile, tiny, tiled. Adds tactile depth. */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================================
   Scroll-reveal — staggered rise. JS toggles [data-inview].
   ============================================================================ */
/* Reveal rise and scroll-parallax are composed through two registered custom
   properties so they never fight over `transform`. Parallax JS sets --par-ty;
   the reveal sets --reveal-ty. Both fold into one translate. */
@property --reveal-ty { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --par-ty { syntax: '<length>'; inherits: false; initial-value: 0px; }

[data-reveal] {
  opacity: 0;
  --reveal-ty: 22px;
  transform: translate3d(0, calc(var(--reveal-ty) + var(--par-ty, 0px)), 0);
  transition: opacity 0.7s var(--tf-ease-out), --reveal-ty 0.7s var(--tf-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-inview] {
  opacity: 1;
  --reveal-ty: 0px;
}
/* Decorative parallax layers that are not reveal targets consume --par-ty directly. */
[data-parallax]:not([data-reveal]) {
  transform: translate3d(0, var(--par-ty, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aurora__blob { animation: none !important; }
  /* Stop decorative loops for motion-sensitive users (WCAG 2.3.3). */
  .pipe-flow::after,
  .pipe-live__dot,
  .roster__live-dot,
  .thinking i,
  .af-ic.run,
  .pnode__ring,
  .pnode.is-active .pnode__ring { animation: none !important; }
}

/* Static mode (?static or reduced-motion via JS): everything settled, no motion.
   Used for deterministic captures / a calm no-animation experience. */
.tf-static [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- Small helpers ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }