/* PrivAccess Certify — motion add-on for the marketing UI kit.
 *
 * Reveal-on-scroll, stronger hover treatments, and a subtle scroll-progress
 * indicator on the page. All motion respects prefers-reduced-motion.
 */

/* ── Reveal-on-scroll (JS-driven via the motion.dev façade) ─────────
 * Progressive enhancement: content is VISIBLE by default. motion-init.js
 * (window.__motion) arms .reveal / .reveal-stagger — it sets the hidden
 * start state and animates them in with motion.dev, with a uniform 60ms
 * stagger for grouped children. If Motion fails to load, JS is off, or
 * reduced-motion is on, content simply shows with no animation. There is
 * deliberately NO opacity:0 here — that is what used to hide content
 * permanently whenever the reveal script failed. */
.reveal { opacity: 1; }

/* ── Stronger hover on the stats (Problem section) ──────────────── */
/* Durations snapped to --dur-* primitives. 320ms transforms tightened
   to --dur-slow (250ms) per PLAN §1.5 (Emil-Kowalski feedback budget). */
.stat {
  transition:
    border-color var(--motion-slow),
    transform var(--motion-slow),
    box-shadow var(--motion-slow) !important;
  cursor: default;
}
.stat:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 22px 40px -18px rgba(10, 14, 26, 0.20),
    0 0 0 1px var(--brand-300) !important;
}
/* PLAN §2: "no motion on data/KPI numbers." The stat numeral scale on
   hover (was scale(1.04)) is removed — it animated a KPI figure with no
   orient/confirm/reveal purpose. Card-level lift + shadow (above) kept. */

/* Animated count-up disabled on prefers-reduced-motion via base rule below. */

/* ── Strengthen hover on framework chips ────────────────────────── */
/* Standard hover (translateY(-2px) + color/bg/border) → --dur-base. */
.framework-row__list li {
  transition:
    transform var(--motion),
    border-color var(--motion),
    background var(--motion);
}
.framework-row__list li:hover {
  transform: translateY(-2px);
}

/* ── Flow steps — stronger glow on active ───────────────────────── */
.flow__step {
  transition:
    transform var(--motion-slow),
    background var(--motion),
    border-color var(--motion),
    box-shadow var(--motion-slow),
    color var(--motion) !important;
}
.flow__step:hover, .flow__step.is-active {
  transform: translateY(-6px) !important;
  box-shadow:
    0 24px 48px -16px rgba(10, 14, 26, 0.55),
    0 0 0 1px var(--accent-a32),
    0 0 48px -12px var(--accent-a32) !important;
}
/* Forbidden decorative motion removed: icon rotate(-5deg) scale(1.06)
   on hover/active (AUDIT #6 / PLAN §2). Color + lift on the step kept;
   the transform line and the transition's transform channel deleted. */
.flow__icon {
  transition:
    background var(--motion),
    border-color var(--motion),
    color var(--motion),
    box-shadow var(--motion-slow) !important;
}

/* ── Feature cards — magnetic lift ──────────────────────────────── */
.feature {
  transition:
    background var(--motion),
    transform var(--motion-slow),
    box-shadow var(--motion-slow);
}
.feature:hover {
  transform: translateY(-3px);
  z-index: 1;
  box-shadow:
    0 24px 48px -18px rgba(10, 14, 26, 0.16);
}
/* Forbidden icon rotate/scale removed (see styles.css .feature__icon).
   Only box-shadow + border-color animate now — no transform channel. */
.feature__icon {
  transition:
    box-shadow var(--motion),
    border-color var(--motion) !important;
}

/* ── Page scroll progress (subtle cyan line at top of viewport) ─── */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: 0 0;
  transform: scaleX(0);
  z-index: 100;
  pointer-events: none;
  /* DOCUMENTED EXCEPTION: a scroll-linked indicator must track 1:1, so
     linear is kept here (and ONLY here). 80ms = --dur-instant. */
  transition: transform var(--dur-instant) linear;
  box-shadow: 0 0 12px var(--accent-a55);
}

/* ── Honor reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stat, .feature, .flow__step, .framework-row__list li {
    transition: none !important;
  }
  .scroll-progress { display: none; }
}

/* ── Buttons on dark — stronger ghost contrast ──────────────────── */
/* The ghost ".btn--ghost" on dark sections sat on a 22%-white border
 * which read as faint against the radial-cyan-on-navy gradient.
 * Bumped to a more visible glass treatment with cyan-tinted hover. */
.section--dark .btn--ghost,
.section--ink .btn--ghost,
.footer .btn--ghost,
.footer__cta .btn--ghost {
  background: var(--well-on-dark) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: white !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    background var(--motion),
    border-color var(--motion),
    color var(--motion),
    box-shadow var(--motion);
}
.section--dark .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.footer .btn--ghost:hover,
.footer__cta .btn--ghost:hover {
  background: var(--accent-a10) !important;
  border-color: var(--accent-a55) !important;
  color: var(--accent-bright) !important;
  box-shadow: 0 0 24px -8px rgba(34, 211, 238, 0.35); /* on dark; .35 one-off */
}
/* The accent button on dark gets a subtle cyan glow so it reads as
 * primary instead of floating. */
.section--dark .btn--accent,
.section--ink .btn--accent,
.footer__cta .btn--accent {
  box-shadow:
    0 1px 2px rgba(5, 10, 26, 0.4),
    0 0 0 1px var(--accent-a18),
    0 8px 24px -8px rgba(34, 211, 238, 0.35);
  transition: box-shadow var(--motion), background var(--motion), transform var(--motion-fast);
}
.section--dark .btn--accent:hover,
.section--ink .btn--accent:hover,
.footer__cta .btn--accent:hover {
  box-shadow:
    0 1px 2px rgba(5, 10, 26, 0.4),
    0 0 0 1px rgba(34, 211, 238, 0.40),
    0 12px 32px -6px var(--accent-a55);
  transform: translateY(-1px);
}

/* ── Alignment polish (responding to inline review) ─────────────── */

/* 1. Nav wordmark — "PrivAccess" + "Certify" baseline.
 *    The em was margin-inline-start: 8px; this made the small caps drift.
 *    Set explicit baseline alignment + tighter vertical center. */
.nav__brand {
  align-items: center !important;
}
.nav__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}
.nav__wordmark em {
  margin-inline-start: 0 !important;
  position: relative;
  inset-block-start: -1px;
}

/* 2. Section header — alignment now owned by styles.css (explicit
 *    grid-template-areas: eyebrow row, then title + lede with tops
 *    aligned). The old `align-items: baseline !important` override
 *    pinned the lede to the EYEBROW's first baseline (the first line
 *    of the left column), detaching it from the serif title — removed
 *    here so the corrected grid is authoritative. */

/* 3. Hero meta strip — 3-up KPI row. Force consistent baselines and
 *    align the small caption to the top of the big numeral's x-height. */
.hero__meta {
  align-items: stretch;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hero__meta-k {
  line-height: 1;
  margin-block-end: 8px;
  font-variant-numeric: tabular-nums;
}
.hero__meta-v {
  line-height: 1.4;
}

/* 4. Stat block — serif numeral baseline vs body copy. */
.stat__k {
  margin-block-end: 12px;
}
.stat__k sup {
  vertical-align: super;
  inset-block-start: 0.05em;
}

/* 5. Pre-footer CTA strip — text-left + buttons-right was align-items:
 *    center but the multi-line title was visually drifting. Use baseline. */
.footer__cta-inner {
  align-items: center !important;
}
.footer__cta-h {
  margin: 0;
  text-wrap: balance;
}

/* 6. Demo shell — info column + form card were grid-aligned at the top
 *    of each. Make sure the form card doesn't visually float. */
.demo-shell {
  align-items: start !important;
}
.demo-info ul li { align-items: center !important; }

/* 7. Footer top — 5 columns, ensure column headings sit on the same line
 *    (the first column has the long brand block; the others are link
 *    lists). Lock the start row to a shared baseline. */
.footer__top { align-items: start; }
.footer__col-t { line-height: 1.4; margin: 0 0 16px !important; min-height: 1em; }

/* 8. Framework chips — vertical wobble fix. The mixed Inter + mono
 *    sizes on one chip pulled the baseline around; lock to a center. */
.framework-row__list li {
  align-items: center !important;
  line-height: 1.2;
}
.framework-row__list li strong,
.framework-row__list li span {
  display: inline-flex;
  align-items: baseline;
}

/* 9. Connector card 3-column grid — the right check-pill was vertically
 *    floating against the 2-line tagline. Center it on the card body. */
.connector { align-items: center !important; }

/* ── Hover text — make every toggle, filter, and tab respond ─────── */
/* The compare toggle, connector filter, decision drawer chips had no
 * hover state on the resting variant — only `.is-on` styled. So when a
 * user moused over an OFF chip, the text "didn't work" (no feedback). */
.compare__toggle button:not(.is-on):hover {
  color: var(--ink) !important;
  background: var(--surface);
}
.connector-filter button:not(.is-on):hover {
  color: var(--ink) !important;
  background: var(--bg);
}
.flow__step:focus-visible .flow__title,
.flow__step:focus-visible .flow__sub { color: white !important; }

/* Ghost button on dark — make sure the text actually swaps on hover.
 * The CSS above already sets color: var(--accent-bright), but the
 * Icon (rendered as currentColor) gets the same shift. */
.section--dark .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.footer .btn--ghost:hover,
.footer__cta .btn--ghost:hover {
  color: var(--accent-bright) !important;
}
.section--dark .btn--ghost:hover svg,
.section--ink .btn--ghost:hover svg,
.footer .btn--ghost:hover svg,
.footer__cta .btn--ghost:hover svg {
  color: var(--accent-bright);
}

/* Primary button hover — explicitly keep text white (some browsers
 * inherit from the link color, which is the brand). */
.btn--primary:hover { color: white !important; }
.btn--accent:hover  { color: var(--brand-950) !important; }