/* Landing page motion and formatting layer.
 *
 * Loaded after styles.css and landing-hero.css, so it refines them rather than
 * fighting them. Motion uses transform/translate/opacity/filter only. The
 * pre-reveal state exists only behind .lm-armed, which landing-motion.js adds
 * after layout, so the page is fully visible without scripts and under
 * reduced motion. Pairs with landing-motion.js.
 */

.landing-page {
  --lm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lm-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lm-blue: #2e7ff2;
  --lm-blue-soft: #86b5f7;
}

/* ======================================================================
   Formatting
   ====================================================================== */

/* Rule-style lists (tool facts, uncertainty and privacy grids) are
   separated by hairlines, not boxes. Their text used to sit ~22px inside the
   section heading's left edge; flush it so heading, rule and copy share one
   edge. The cards (trained models) keep their padding. */
.landing-page .landing-tool-facts p,
.landing-page .landing-reliability-grid p {
  padding-inline: 0;
}

.landing-page .landing-reliability-grid {
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

/* The proof row's third caption is the longest and used to wrap to four short
   lines beside two-line neighbours. Let all three use the same measure. */
.landing-page .landing-proof-row dd {
  max-width: 34ch;
  text-wrap: pretty;
}

/* The time-saved lede sat flush against its heading (margin 0) while every
   other section opens with 1rem between them. */
.landing-page .landing-saved > h2 + .landing-saved-lede {
  margin-top: 1rem;
}

/* The legal links sat against the last grid hairline and floated centred in
   a left-aligned page. Give them air and align with the grid. */
.landing-page .landing-privacy-link {
  max-width: none;
  margin: 1.5rem 0 0;
  text-align: start;
}

/* Wraps: no one-word last lines in running copy, balanced headings. */
.landing-page :is(p, li, dd, figcaption span) {
  text-wrap: pretty;
}

.landing-page :is(h1, h2, h3, .landing-lede, .landing-saved-lede) {
  text-wrap: balance;
}

@media (max-width: 767px) {
  /* Stacked, every rule-style row shares the heading's left edge. */
  .landing-page .landing-process-list li {
    padding-inline: 0;
  }

  /* "Without APPVLR" and its tag used to sit side by side and wrap in
     fragments ("WITHOUT / APPVLR" next to a two-line tag). Stack them. */
  .landing-page .landing-saved-monitor figcaption {
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
  }
}

/* ======================================================================
   Progress line and pill bar
   ====================================================================== */

.landing-page .lm-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: 2px;
  background: linear-gradient(90deg, var(--lm-blue), var(--lm-blue-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
  opacity: 0.9;
}

/* The pill gains depth once the page moves under it. Colour and shadow only:
   no size change, so the bar never shifts content. */
.landing-page .landing-nav {
  transition:
    box-shadow 320ms var(--lm-ease-soft),
    border-color 320ms var(--lm-ease-soft),
    background-color 320ms var(--lm-ease-soft);
}

.landing-page.lm-scrolled .landing-nav {
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.38), 0 0 0 1px rgb(134 181 247 / 0.06);
  border-color: rgb(134 181 247 / 0.22);
}

/* ======================================================================
   Hero entrance: eyebrow, headline, lede, actions, meta, then the demo
   frame rising with a soft glow. Overrides the shorter built-in stagger.
   The #landingPage[hidden] guard in styles.css still wins while booting.
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html:not([data-reduce-motion="true"]) .landing-page .landing-hero-copy > * {
    animation-name: lm-hero-in;
    animation-duration: 760ms;
    animation-timing-function: var(--lm-ease);
    animation-fill-mode: both;
  }

  html:not([data-reduce-motion="true"]) .landing-page .landing-hero-copy > *:nth-child(1) { animation-delay: 60ms; }
  html:not([data-reduce-motion="true"]) .landing-page .landing-hero-copy > *:nth-child(2) { animation-delay: 150ms; }
  html:not([data-reduce-motion="true"]) .landing-page .landing-hero-copy > *:nth-child(3) { animation-delay: 260ms; }
  html:not([data-reduce-motion="true"]) .landing-page .landing-hero-copy > *:nth-child(4) { animation-delay: 340ms; }
  html:not([data-reduce-motion="true"]) .landing-page .landing-hero-copy > *:nth-child(5) { animation-delay: 420ms; }

  html:not([data-reduce-motion="true"]) .landing-page .landing-demo {
    animation-name: lm-demo-in;
    animation-duration: 860ms;
    animation-delay: 380ms;
    animation-timing-function: var(--lm-ease);
    animation-fill-mode: both;
  }

  /* The underglow blooms in behind the frame after it lands. */
  html:not([data-reduce-motion="true"]) .landing-page .landing-demo::before {
    background:
      radial-gradient(ellipse at 50% 42%, rgb(46 127 242 / 0.17) 0%, rgb(46 127 242 / 0.07) 38%, transparent 68%);
    animation: lm-glow-in 1200ms var(--lm-ease-soft) 650ms both;
  }
}

@keyframes lm-hero-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes lm-demo-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes lm-glow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ======================================================================
   Section reveals: blur to sharp (text) and dim to lit (surfaces), staggered
   by sibling. Opacity and position are never touched: the landing's contract
   is that sales copy is fully visible and exactly placed at every scroll
   position (pinned by the rendered eval), so a reveal can only change focus
   and light. A keyframe animation, not a transition, so it never replaces the
   transitions cards and buttons own for hover and focus.
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html:not([data-reduce-motion="true"]) .landing-page.lm-armed .lm-pre:not(.lm-in) {
    filter: blur(6px);
  }

  html:not([data-reduce-motion="true"]) .landing-page.lm-armed .lm-pre.lm-in:not(.lm-done) {
    animation: lm-reveal 900ms var(--lm-ease) var(--lm-d, 0ms) backwards;
  }

  /* Large surfaces dim instead of blur: a blur on a big composited layer
     costs more than it adds. */
  html:not([data-reduce-motion="true"]) .landing-page.lm-armed :is(
    .landing-po-workspace, .landing-outcome-panel, .landing-saved-monitor,
    .landing-ai-signals > li, .landing-process-list > li, .landing-capability-switcher
  ).lm-pre:not(.lm-in) {
    filter: brightness(0.62) saturate(0.8);
  }

  html:not([data-reduce-motion="true"]) .landing-page.lm-armed :is(
    .landing-po-workspace, .landing-outcome-panel, .landing-saved-monitor,
    .landing-ai-signals > li, .landing-process-list > li, .landing-capability-switcher
  ).lm-pre.lm-in:not(.lm-done) {
    animation-name: lm-reveal-surface;
  }
}

@keyframes lm-reveal {
  from { filter: blur(6px); }
  to { filter: blur(0); }
}

@keyframes lm-reveal-surface {
  from { filter: brightness(0.62) saturate(0.8); }
  to { filter: none; }
}

/* ======================================================================
   Hover, focus and press polish
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html:not([data-reduce-motion="true"]) .landing-page .landing-ai-signals > li,
  html:not([data-reduce-motion="true"]) .landing-page .landing-outcome-panel,
  html:not([data-reduce-motion="true"]) .landing-page .landing-saved-monitor-stage {
    transition:
      translate 320ms var(--lm-ease),
      border-color 240ms var(--lm-ease-soft),
      box-shadow 320ms var(--lm-ease-soft);
  }

  html:not([data-reduce-motion="true"]) .landing-page .landing-button,
  html:not([data-reduce-motion="true"]) .landing-page .landing-capability-tab,
  html:not([data-reduce-motion="true"]) .landing-page .landing-text-link {
    transition-timing-function: var(--lm-ease-soft);
    transition-duration: 220ms;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-reduce-motion="true"]) .landing-page .landing-ai-signals > li:hover,
  html:not([data-reduce-motion="true"]) .landing-page .landing-saved-monitor-stage:hover {
    translate: 0 -3px;
    border-color: rgb(134 181 247 / 0.38);
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.34), 0 0 0 1px rgb(46 127 242 / 0.12);
  }

  html:not([data-reduce-motion="true"]) .landing-page .landing-button-primary:hover:not(:active),
  html:not([data-reduce-motion="true"]) .landing-page .landing-button-secondary:hover:not(:active) {
    translate: 0 -1px;
  }

  /* Rule-style rows: the hairline above warms to the brand blue. */
  html:not([data-reduce-motion="true"]) .landing-page .landing-process-list li,
  html:not([data-reduce-motion="true"]) .landing-page .landing-tool-facts p,
  html:not([data-reduce-motion="true"]) .landing-page .landing-reliability-grid p {
    transition: border-color 260ms var(--lm-ease-soft);
  }
}

/* Focus rings ease in and keep the app's blue. */
.landing-page :is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--lm-blue-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-reduce-motion="true"]) .landing-page :is(a, button, summary):focus-visible {
    animation: lm-focus 240ms var(--lm-ease-soft);
  }
}

@keyframes lm-focus {
  from { outline-offset: 7px; outline-color: transparent; }
  to { outline-offset: 3px; }
}

/* ======================================================================
   Reduced motion: no animation, everything visible.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .landing-page .lm-pre,
  .landing-page .lm-pre:not(.lm-in) {
    filter: none !important;
    animation: none !important;
  }

  .landing-page .lm-progress {
    display: none;
  }
}

html[data-reduce-motion="true"] .landing-page .lm-pre {
  filter: none !important;
  animation: none !important;
}

html[data-reduce-motion="true"] .landing-page .lm-progress {
  display: none;
}