/* ═══════════════════════════════════════════════════════════════════
   ATTY LABS — motion & display layer
   Layered on style.css. Bigger type, scroll-linked scale, blur-in
   reveals, framed media. Dark ground kept; the craft is what changed.
   Every effect here is off under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ── display type ──────────────────────────────────────────────── */
.display {
  font-size: clamp(42px, 7.6vw, 104px);
  line-height: .96;
  letter-spacing: -.042em;
  font-weight: 800;
  max-width: 17ch;
}
.display--center { margin-inline: auto; text-align: center; }
.display .hl {
  background: linear-gradient(97deg, var(--bull) 4%, var(--hl-mid) 46%, var(--blue) 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.display-2 {
  font-size: clamp(31px, 4.4vw, 60px);
  line-height: 1.02; letter-spacing: -.033em; font-weight: 780;
  max-width: 19ch;
}
.lede-xl {
  font-size: clamp(17px, 1.55vw, 22px); line-height: 1.5;
  color: var(--text-dim); max-width: 54ch;
}
.lede-xl strong { color: var(--text); font-weight: 600; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: var(--text-faint);
}
.eyebrow::before {
  content: ""; width: 20px; height: 1px; background: var(--bull); opacity: .8;
}
.eyebrow--pill {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  background: var(--chip-bg); backdrop-filter: blur(10px);
  color: var(--text-dim); font-weight: 600;
}
.eyebrow--pill::after { content: none; }
.eyebrow--pill::before { display: none; }

/* ── section rhythm: fewer sections, far more air ──────────────── */
.section-xl { padding: clamp(84px, 11vw, 168px) 0; position: relative; }
.section-xl > .container { position: relative; z-index: 1; }
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ambient ground — a single soft light source per section, never a gradient soup */
.glow { position: relative; overflow: clip; }
.glow::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -10%; width: min(1400px, 130%); aspect-ratio: 2/1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, var(--glow-c, rgba(0,230,118,.10)), transparent 62%);
}
.glow--blue  { --glow-c: rgba(46,123,255,.13); }
.glow--amber { --glow-c: rgba(201,165,75,.10); }

/* ── reveal: fade + rise + unblur, staggered by --d ──────────────
   The hidden state is scoped to html.js-motion, which motion.js sets on
   itself. No JS, a script that failed to load, or an engine that never
   delivers intersection callbacks all leave the content plainly visible
   rather than stuck at opacity 0. */
.js-motion .rv {
  opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(14px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out),
              filter .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 85ms);
  will-change: opacity, transform, filter;
}
.js-motion .rv.in { opacity: 1; transform: none; filter: none; }
.js-motion .rv--slow.in { transition-duration: 1.25s; }


/* ── hero at display scale ─────────────────────────────────────── */
/* .hero already centres its children; these keep the new, much larger
   elements from inheriting the old 680px measure and ragging badly. */
.hero { padding-top: clamp(126px, 15vh, 186px); padding-bottom: clamp(48px, 6vw, 84px); }
.hero .display { max-width: 17ch; margin: 22px auto 0; }
.hero .lede-xl { margin: 26px auto 0; max-width: 52ch; }
.hero .chips { justify-content: center; margin-top: 30px; }
.hero .hero-ctas { margin-top: 36px; }
.hero .eyebrow--pill { margin-bottom: 4px; }
.hero .stage { margin-top: 0; }

/* the section head inherits the same treatment */
.section-head .display-2 { margin: 0 auto; }
.section-head p { max-width: 58ch; margin-inline: auto; }

/* ── scroll-linked stage: the product shot grows as you scroll ─── */
/* JS writes --p (0 → 1) on the element; everything else is CSS.     */
.stage { --p: 0; perspective: 1600px; }
.stage-inner {
  transform:
    scale(calc(.82 + .18 * var(--p)))
    translateY(calc((1 - var(--p)) * 28px))
    rotateX(calc((1 - var(--p)) * 7deg));
  opacity: calc(.55 + .45 * var(--p));
  transform-origin: 50% 12%;
  will-change: transform, opacity;
}

/* ── framed media: the dark panel that reads as "the product" ──── */
.frame {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--bg-deep); border: 1px solid var(--line);
  box-shadow: var(--frame-glow);
}
.frame::after {                     /* thin top highlight, the Apple bezel tell */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, var(--frame-top), transparent 22%);
}
.frame > video, .frame > canvas, .frame > img { display: block; width: 100%; height: auto; }
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid var(--line-soft);
  background: var(--frame-bar);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--line); }
.frame-bar span {
  margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-faint); letter-spacing: .06em;
}
.frame-cap {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
  padding: 13px 16px; border-top: 1px solid var(--line-soft); line-height: 1.5;
}


/* ── scroll-linked zoom: push into a real chart as it passes ────── */
/* Same --p driver as .stage. The image starts wide and pushes in, so the
   band, the signal and the stop come to you instead of being cropped. */
.zoom { --p: 0; overflow: hidden; border-radius: 18px; }
.zoom img, .zoom video {
  display: block; width: 100%; height: auto;
  transform: scale(calc(1.02 + .26 * var(--p)));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  will-change: transform;
}
.zoom--right { --zx: 78%; --zy: 46%; }
.zoom--left  { --zx: 24%; --zy: 52%; }

/* ── results rail: the backtest numbers, big ───────────────────── */
.results-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.market {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.market:hover { border-color: var(--bull-deep); transform: translateY(-3px); }
.market-shot { display: block; width: 100%; height: 112px; object-fit: cover;
  object-position: 50% 42%; border-bottom: 1px solid var(--line-soft); }
.market-body { padding: 17px 18px 19px; }
.market-sym {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--text-faint); text-transform: uppercase;
}
.market-pnl {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(25px, 2.5vw, 33px); font-weight: 600; line-height: 1.05;
  color: var(--bull); margin: 8px 0 12px; letter-spacing: -.02em;
}
.market-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
  padding: 5px 0; border-top: 1px solid var(--line-soft);
}
.market-row b { color: var(--text-dim); font-weight: 600; }

/* ── anatomy callouts beside a zoomed chart ────────────────────── */
.callouts { display: grid; gap: 13px; }
.callout {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  padding: 15px 17px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.callout span {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--bull);
  border: 1px solid var(--line); border-radius: 6px; text-align: center;
  line-height: 24px; height: 26px;
}
.callout b { display: block; font-size: 15.5px; font-weight: 650; margin-bottom: 5px; }
.callout p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; margin: 0; }

/* ── a quieter footnote for the research mention ───────────────── */
.side-note {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 26px;
  align-items: center; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.side-note h3 { font-size: 20px; font-weight: 700; margin-bottom: 7px; }
.side-note p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .side-note { grid-template-columns: 1fr; } }

/* ── metric row: big numbers that count up ─────────────────────── */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.metric { background: var(--card); padding: 26px 22px; }
.metric b {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--text);
}
.metric span {
  display: block; margin-top: 11px; font-size: 13px; line-height: 1.45;
  color: var(--text-faint);
}
.metric--bull b { color: var(--bull); }
.metric--blue b { color: var(--blue); }
.metric--gold b { color: var(--gold); }

/* ── alternating feature rows ──────────────────────────────────── */
.row {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 84px); align-items: center;
}
.row--flip > *:first-child { order: 2; }
.row h3 { font-size: clamp(24px, 2.7vw, 36px); letter-spacing: -.028em; font-weight: 760; margin-bottom: 16px; }
.row p { color: var(--text-dim); font-size: 17px; line-height: 1.68; margin-bottom: 15px; }
.row p strong { color: var(--text); font-weight: 620; }
.row-note {
  border-left: 2px solid var(--line); padding-left: 18px; margin-top: 20px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); line-height: 1.6;
}

/* ── marquee of proof chips ────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  background: var(--card);
}
.chip b { color: var(--bull); font-weight: 600; }


/* ── nav holds one line at every width ─────────────────────────── */
/* With the brand-sub and a CTA in the bar, a page carrying more than a
   few links used to wrap onto two rows. Links shrink and the sub-label
   drops out before anything is allowed to wrap. */
.nav-inner { flex-wrap: nowrap; }
.nav-links { gap: clamp(13px, 1.5vw, 24px); white-space: nowrap; }
.nav-links a { white-space: nowrap; }
.nav .logo { flex: 0 0 auto; }
.nav .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1180px) { .nav .brand-sub { display: none; } }
@media (max-width: 1040px) { .nav-links { font-size: 13.5px; } .nav-links a { font-size: 13.5px; } }
@media (max-width: 920px)  { .nav-links { display: none; } }

/* ── nav condenses on scroll ───────────────────────────────────── */
.nav { transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft); }
.nav.is-stuck {
  background: var(--nav-bg);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow);
}

/* ── buttons get a little more presence at this scale ──────────── */
.btn-xl { padding: 17px 36px; font-size: 16.5px; border-radius: 12px; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent, var(--sheen), transparent);
}
.btn-primary:hover::after { animation: sheen .75s var(--ease-soft) forwards; }
@keyframes sheen { to { transform: translateX(120%); } }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 30px; }
  .row--flip > *:first-child { order: 0; }
  .display { max-width: none; }
}

/* ── motion off ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-motion .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .stage-inner { transform: none; opacity: 1; }
  .btn-primary::after { display: none; }
  .frame video { display: none; }
  .frame img.reduced-fallback { display: block; }
}