/* Home page only.
 *
 * The phone mockup, the segmented control inside it, and the two animated demo panels. Everything
 * here is scoped to elements that exist on one page; anything that appeared on a second page was
 * promoted into `components.css` instead.
 */

/* -- The download anchor ----------------------------------------------------------------------- */

/* Every "Get the app" link on the site points at #download, the hero's store-badge row. Left to
   the browser, the anchor lands at the very top of the viewport — underneath the sticky nav, so
   the badges arrived hidden. 40vh parks them around the middle of the screen instead, with the
   hero copy above them for context on what the reader just asked to download. */
#download { scroll-margin-top: 40vh; }

/* -- The phone mockup -------------------------------------------------------------------------- */

.phone-shell {
  border-radius: 42px;
  box-shadow: 0 0 0 2px var(--surface-raised), 0 40px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

@media (max-width: 900px) {
  .phone-shell { transform: scale(0.82); transform-origin: top center; }
}
@media (max-width: 480px) {
  .phone-shell { transform: scale(0.72); }
}

/* -- Segmented control ------------------------------------------------------------------------- */

/* The app's "By instrument / By strategy" switch, inside a picture of a phone — and now a working
 * one. The design bound both halves to click handlers with only a single list behind them; the
 * second panel exists, so these are real buttons. See `js/tabs.js`. */
.seg {
  flex: 1;
  font: inherit;
  border: 0;
  cursor: pointer;
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dim);
  text-align: center;
}
.seg--on { background: var(--brand); color: #fff; }

/* -- Ticker ------------------------------------------------------------------------------------ */

@keyframes wp-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker { overflow: hidden; }
.ticker__track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: wp-ticker 40s linear infinite;
}

/* -- Live-ish indicators ----------------------------------------------------------------------- */

@keyframes wp-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--positive);
  animation: wp-pulse 2s ease-in-out infinite;
}

/* -- Scan line over the phone ------------------------------------------------------------------ */

@keyframes wp-scan {
  from { transform: translateY(0); }
  to { transform: translateY(560px); }
}

.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 18%, transparent), transparent);
  animation: wp-scan 4s linear infinite;
  pointer-events: none;
}

/* The three animations above run for as long as the page is open. `base.css` already reduces them
   to a single frame under `prefers-reduced-motion`, which is the setting they most affect. */

/* -- Hero -------------------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
  padding-block: 72px 0;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 44px var(--gutter-sm) 0;
  }
}

/* Used by the "Conditions met" reveal. An animation rather than a transition, so it does not depend
   on a frame elapsing between two style writes. */
@keyframes wp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The demo replay/rerun buttons are inline-styled spans, so the hover reaches for a property the
   inline style does not set — a fill — rather than fighting it over border colour. */
[data-ai-replay] > span,
[data-ev-rerun] {
  transition: background 0.15s ease;
}
[data-ai-replay] > span:hover,
[data-ev-rerun]:hover {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}