/* Lyra (VerityAI™ 3.0): the release hero, and the "What's new" and walkthrough sections.
   The hero sits on top of index, verity and lyra; the sections live on lyra.html.
   Dark by default; data-mode="publish" on a .lyra-hero or .lyra-sec gives the light set.
   Motion follows the Astramir motion system, focus → converge → disperse: it plays once
   on load (~2.6s), never loops, and under reduced motion (the OS setting, or the footer's
   Pause motion) every element renders in its finished state. */

.lyra-hero {
  --bg: #05070E; --ink: #EEF2F8; --ink-2: #D7DDE8; --ink-3: #A8B3C7;
  --accent: #17A6DB; --accent-ink: #05070E; --line: #1E2739; --btn2: #45526E;
  --star: #EEF2F8; --vega: #7FE6F4; --ring: #17A6DB; --g1: #7FE6F4; --g2: #33409E;
  --field: #A8B3C7; --grid: #1E2739; --tick: #45526E;
  --band: linear-gradient(90deg,#2A1A63,#33409E,#2A6BCE,#17A6DB,#7FE6F4);
  --ease-converge: cubic-bezier(.33,1,.68,1);
  --ease-disperse: cubic-bezier(.16,1,.3,1);
  --ease-focus: cubic-bezier(.22,1,.36,1);
  background: var(--bg); color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  position: relative; overflow: hidden;
}
.lyra-hero[data-mode="publish"] {
  --bg: #F6F7FA; --ink: #090D18; --ink-2: #1E2739; --ink-3: #45526E;
  --accent: #2A6BCE; --accent-ink: #FFFFFF; --line: #D5DAE5; --btn2: #B3BCCD;
  --star: #1E2739; --vega: #17A6DB; --ring: #2A6BCE; --g1: #17A6DB; --g2: #2A1A63;
  --field: #6E7B93; --grid: #D5DAE5; --tick: #6E7B93;
  --band: linear-gradient(90deg,#2A1A63,#33409E,#2A6BCE,#17A6DB);
}
/* Same column as .wrap, so the hero lines up with the header and every section below. */
.lyra-hero__inner {
  width: min(1240px, 100% - 3rem); margin-inline: auto; box-sizing: border-box;
  min-height: 720px; padding-block: 40px;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; align-items: center;
}
.lyra-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.lyra-hero__intro { margin: 0; font-size: 20px; font-weight: 500; color: var(--ink-3); }
.lyra-hero__title { margin: 0; font-size: clamp(72px, 9vw, 128px); font-stretch: 112%; font-weight: 500; letter-spacing: -0.035em; line-height: .95; color: var(--ink); }
.lyra-hero__sub { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink-2); }
.lyra-hero__ctas { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.lyra-hero__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 3px; font-size: 16px; text-decoration: none; }
.lyra-hero__btn--primary, .lyra-hero__btn--primary:hover { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lyra-hero__btn--secondary, .lyra-hero__btn--secondary:hover { border: 1px solid var(--btn2); color: var(--ink); font-weight: 500; }
.lyra-hero__btn--secondary:hover { border-color: var(--accent); }
.lyra-hero__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lyra-hero__readout { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: "Martian Mono", "SF Mono", Consolas, monospace; font-size: 12px; font-stretch: 87%; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lyra-hero__readout span:first-child { color: var(--accent); }
.lyra-hero__chart { width: 100%; max-height: 640px; aspect-ratio: 720 / 640; }
.lyra-hero__chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lyra-hero__rule { height: 2px; background: var(--band); }

@media (max-width: 900px) {
  .lyra-hero__inner { grid-template-columns: 1fr; padding-block: 48px; gap: 24px; min-height: 0; }
  .lyra-hero__chart { max-width: 560px; }
}

/* ---- Motion ---------------------------------------------------------- */
/* Focus: the field and grid arrive soft and sharpen (blur is permitted only here). */
@keyframes lyra-focus { from { filter: blur(6px); opacity: .35; } to { filter: blur(0); opacity: 1; } }
/* Converge: each edge draws toward Vega. */
@keyframes lyra-converge { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Converge arrival: the aperture is the only element allowed to scale. */
@keyframes lyra-aperture { from { transform: scale(.55); opacity: .3; } to { transform: scale(1); opacity: 1; } }
/* Disperse: labels fan out from the resolved point. */
@keyframes lyra-disperse { from { opacity: .15; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: translate(0, 0); } }

.lyra-anim .lc-field, .lyra-anim .lc-grid { animation: lyra-focus 320ms var(--ease-focus) both; }
.lyra-anim .lc-grid { animation-delay: 120ms; }
.lyra-anim .lc-star { animation: lyra-focus 320ms var(--ease-focus) both; }
.lyra-anim .lc-star:nth-child(1) { animation-delay: 300ms; }
.lyra-anim .lc-star:nth-child(2) { animation-delay: 380ms; }
.lyra-anim .lc-star:nth-child(3) { animation-delay: 460ms; }
.lyra-anim .lc-star:nth-child(4) { animation-delay: 540ms; }
.lyra-anim .lc-star:nth-child(5) { animation-delay: 620ms; }
.lyra-anim .lc-edge { stroke-dasharray: 1; animation: lyra-converge 620ms var(--ease-converge) both; }
.lyra-anim .lc-edge:nth-child(1) { animation-delay: 760ms; }
.lyra-anim .lc-edge:nth-child(2) { animation-delay: 840ms; }
.lyra-anim .lc-edge:nth-child(3) { animation-delay: 920ms; }
.lyra-anim .lc-edge:nth-child(4) { animation-delay: 1000ms; }
.lyra-anim .lc-edge:nth-child(5) { animation-delay: 1080ms; }
.lyra-anim .lc-edge:nth-child(6) { animation-delay: 1160ms; }
.lyra-anim .lc-edge:nth-child(7) { animation-delay: 1240ms; }
.lyra-hero .lc-aperture { transform-box: fill-box; transform-origin: center; }
.lyra-anim .lc-aperture { animation: lyra-aperture 620ms var(--ease-converge) 1500ms both; }
.lyra-anim .lc-label { animation: lyra-disperse 620ms var(--ease-disperse) both; }
.lyra-anim .lc-label:nth-child(1) { animation-delay: 1950ms; }
.lyra-anim .lc-label:nth-child(2) { animation-delay: 2030ms; }
.lyra-anim .lc-label:nth-child(3) { animation-delay: 2110ms; }
.lyra-anim .lc-label:nth-child(4) { animation-delay: 2190ms; }
.lyra-anim .lc-label:nth-child(5) { animation-delay: 2270ms; }

/* Held until the chart is on screen (site.js adds .in), so it plays where it is seen. */
.js .lyra-anim:not(.in) :is(.lc-field, .lc-grid, .lc-star, .lc-edge, .lc-aperture, .lc-label) { animation-play-state: paused; }

/* The site's motion switch: the OS setting unless the visitor chose otherwise. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .lyra-anim :is(.lc-field, .lc-grid, .lc-star, .lc-edge, .lc-aperture, .lc-label) { animation: none; stroke-dasharray: none; }
}
:root[data-motion="reduced"] .lyra-anim :is(.lc-field, .lc-grid, .lc-star, .lc-edge, .lc-aperture, .lc-label) { animation: none; stroke-dasharray: none; }

/* ===== What's new and Book a walkthrough (lyra.html) ================== */
.lyra-sec {
  --bg: #05070E; --panel: #090D18; --ink: #EEF2F8; --ink-2: #D7DDE8; --ink-3: #A8B3C7;
  --accent: #17A6DB; --accent-ink: #05070E; --line: #1E2739; --field-bg: #090D18; --field-line: #45526E;
  --band: linear-gradient(90deg,#2A1A63,#33409E,#2A6BCE,#17A6DB,#7FE6F4);
  background: var(--bg); color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  padding: 6rem 0;
  scroll-margin-top: 4rem;
}
.lyra-sec[data-mode="publish"] {
  --bg: #F6F7FA; --panel: #FFFFFF; --ink: #090D18; --ink-2: #1E2739; --ink-3: #45526E;
  --accent: #2A6BCE; --accent-ink: #FFFFFF; --line: #D5DAE5; --field-bg: #FFFFFF; --field-line: #6E7B93;
  --band: linear-gradient(90deg,#2A1A63,#33409E,#2A6BCE,#17A6DB);
}
.lyra-sec + .lyra-sec { border-top: 1px solid var(--line); }
.lyra-sec__wrap { width: min(1240px, 100% - 3rem); margin: 0 auto; }
.lyra-sec h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.5rem); font-stretch: 112%; font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; }
.lyra-sec__under { width: 56px; height: 2px; background: var(--band); margin: 20px 0 0; }
.lyra-sec__lede { margin: 20px 0 0; max-width: 68ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.lyra-sec h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.lyra-sec :where(p) { margin: 0; }
.lyra-sec .mono { font-family: "Martian Mono", "SF Mono", Consolas, monospace; font-stretch: 87%; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Features */
.lyra-features { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lyra-feature { background: var(--bg); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.lyra-feature svg { width: 28px; height: 28px; color: var(--accent); }
.lyra-feature p { line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* Also in this release + upgrading */
.lyra-cols { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.lyra-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.lyra-list li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; line-height: 1.55; color: var(--ink-2); }
.lyra-list li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; border: 1.5px solid var(--accent); border-radius: 50%; }
.lyra-list b { color: var(--ink); font-weight: 600; }
.lyra-upgrade { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
.lyra-upgrade__path { margin-top: 12px; font-size: 1.5rem; color: var(--ink); }
.lyra-upgrade .lyra-list { margin-top: 18px; }
.lyra-sec__note { margin-top: 18px; font-size: .875rem; line-height: 1.55; color: var(--ink-3); }

/* Walkthrough */
.lyra-walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.lyra-form { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 32px; display: grid; gap: 18px; }
.lyra-form[hidden], .lyra-sent[hidden] { display: none; }
.lyra-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lyra-field { display: grid; gap: 6px; }
.lyra-field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.lyra-field label span { font-weight: 400; color: var(--ink-3); }
.lyra-field input, .lyra-field select, .lyra-field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--field-line); border-radius: 3px; min-height: 44px; padding: 10px 12px; box-sizing: border-box; width: 100%;
}
.lyra-field textarea { min-height: 96px; resize: vertical; }
.lyra-field input:focus-visible, .lyra-field select:focus-visible, .lyra-field textarea:focus-visible,
.lyra-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lyra-btn { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.lyra-btn:disabled { opacity: .6; cursor: progress; }
.lyra-form__fine { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.lyra-form__fine a, .lyra-sent a { color: var(--accent); }
.lyra-form__status:empty { display: none; }
.lyra-form__status { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.lyra-sent { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 32px; display: grid; gap: 12px; }
.lyra-sent p { line-height: 1.6; color: var(--ink-2); }

@media (max-width: 860px) {
  .lyra-sec { padding: 4rem 0; }
  .lyra-features, .lyra-cols, .lyra-walk, .lyra-form__row { grid-template-columns: 1fr; }
  .lyra-feature, .lyra-form, .lyra-sent { padding: 24px; }
  .lyra-walk { gap: 32px; }
}