/* Kerno Analytics — Motion layer (marketing pages only)
   Extends the existing reveal pattern from .ticker-card site-wide.
   Everything here degrades to fully visible, static content if JS
   never runs or prefers-reduced-motion is set — see the
   html.js-motion-ready gate below. */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --reveal-distance: 22px;
  --reveal-duration: 0.7s;
  --tilt-max: 6deg;
}

/* ── Progressive-enhancement gate ──────────────────────────────────────
   [data-reveal] only starts hidden once motion.js has confirmed it can
   run (and that the user hasn't asked for reduced motion). No JS, slow
   JS, or reduced-motion preference all mean: content is visible immediately. */

html.js-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out-expo),
    transform var(--reveal-duration) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Grid-child stagger ────────────────────────────────────────────────
   Reuses the same kerno-fade-up keyframe the ticker card already uses
   for its metrics/signals, just applied to marketing-page card grids. */

html.js-motion-ready .card-grid.is-revealed > .feature-card,
html.js-motion-ready .steps.is-revealed > .step,
html.js-motion-ready .values-grid.is-revealed > .value-card,
html.js-motion-ready .plan-grid > .plan-card,
html.js-motion-ready .compare-table tbody tr {
  animation: kerno-fade-up 0.5s var(--ease-out-quad) backwards;
}

html.js-motion-ready .card-grid.is-revealed > .feature-card:nth-child(1),
html.js-motion-ready .steps.is-revealed > .step:nth-child(1),
html.js-motion-ready .values-grid.is-revealed > .value-card:nth-child(1),
html.js-motion-ready .plan-grid > .plan-card:nth-child(1),
html.js-motion-ready .compare-table tbody tr:nth-child(1) { animation-delay: 0.03s; }

html.js-motion-ready .card-grid.is-revealed > .feature-card:nth-child(2),
html.js-motion-ready .steps.is-revealed > .step:nth-child(2),
html.js-motion-ready .values-grid.is-revealed > .value-card:nth-child(2),
html.js-motion-ready .plan-grid > .plan-card:nth-child(2),
html.js-motion-ready .compare-table tbody tr:nth-child(2) { animation-delay: 0.09s; }

html.js-motion-ready .card-grid.is-revealed > .feature-card:nth-child(3),
html.js-motion-ready .steps.is-revealed > .step:nth-child(3),
html.js-motion-ready .values-grid.is-revealed > .value-card:nth-child(3),
html.js-motion-ready .plan-grid > .plan-card:nth-child(3),
html.js-motion-ready .compare-table tbody tr:nth-child(3) { animation-delay: 0.15s; }

html.js-motion-ready .card-grid.is-revealed > .feature-card:nth-child(4),
html.js-motion-ready .values-grid.is-revealed > .value-card:nth-child(4),
html.js-motion-ready .compare-table tbody tr:nth-child(4) { animation-delay: 0.21s; }

html.js-motion-ready .compare-table tbody tr:nth-child(5) { animation-delay: 0.27s; }
html.js-motion-ready .compare-table tbody tr:nth-child(n+6) { animation-delay: 0.3s; }

/* Plan cards re-render on every billing toggle — give the swap its own
   feedback instead of starting from 0 each time, since this is a refresh,
   not a first reveal. */
html.js-motion-ready .plan-grid > .plan-card {
  animation-duration: 0.4s;
}

/* ── Feature-card hover: icon gets its own bit of life ──────────────── */

.feature-card__icon {
  transition: transform 0.25s var(--ease-out-quad), background-color 0.25s ease;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

/* ── Nav link hover underline (grows from center) ─────────────────────
   The current-page underline already exists in enterprise.css; this adds
   the same affordance on hover/focus for every other link. */

.site-nav a:not([aria-current="page"]) {
  position: relative;
}

.site-nav a:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--kerno-orange);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.2s var(--ease-out-quad);
}

.site-nav a:not([aria-current="page"]):hover::after,
.site-nav a:not([aria-current="page"]):focus-visible::after {
  transform: scaleX(1);
}

/* ── Header condense-on-scroll ────────────────────────────────────────
   The .is-scrolled class already exists (js/app.js); it just had no
   visual payoff beyond a border. Give it one. */

.site-header__inner {
  transition: min-height 0.25s var(--ease-out-quad);
}

.site-header.is-scrolled .site-header__inner {
  min-height: calc(var(--header-height) - 0.75rem);
}

.site-logo__mark {
  transition: transform 0.25s var(--ease-out-quad);
}

.site-header.is-scrolled .site-logo__mark {
  transform: scale(0.92);
}

/* ── Magnetic CTA buttons ──────────────────────────────────────────────
   JS sets transform during pointermove (no transition, so it tracks the
   cursor instantly). It adds .is-settling only on release/leave so the
   snap-back home is the only part that eases. */

[data-magnetic] {
  display: inline-flex;
}

[data-magnetic].is-settling {
  transition: transform 0.4s var(--ease-out-expo);
}

/* ── Tilt-reactive hero preview ──────────────────────────────────────── */

.home-preview {
  perspective: 1200px;
}

[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

[data-tilt].is-settling {
  transition: transform 0.5s var(--ease-out-expo);
}

/* ── Logo marquee ───────────────────────────────────────────────────── */

.logo-strip {
  position: relative;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-strip__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2xl);
  animation: kerno-marquee 26s linear infinite;
}

.logo-strip:hover .logo-strip__track {
  animation-play-state: paused;
}

.logo-strip__item {
  flex-shrink: 0;
  white-space: nowrap;
}

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

/* ── Stat counters ──────────────────────────────────────────────────── */
/* No special styling needed — motion.js mutates textContent in place —
   but a quiet settle-flash on completion helps the eye catch the moment
   the number lands. */

.stat__value {
  transition: color 0.3s ease;
}

/* ── Compare table column highlight, smoothed ─────────────────────────
   The base rule lives in pricing.css; this just adds the transition so
   switching plan selection doesn't hard-cut the highlight. */

.compare-table th,
.compare-table td {
  transition: background-color 0.2s ease;
}

/* ── Reduced motion / no-JS fallback ───────────────────────────────────
   design-system.css already forces all animation/transition durations
   to ~0 under .reduce-motion. This just makes sure nothing is left
   permanently invisible in that case. */

.reduce-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

.reduce-motion .logo-strip__track {
  animation: none !important;
}