/* Motion system
   Reveals, hover states and the hero entrance. No markup hooks are needed —
   motion.js tags the elements listed in its `groups` array at runtime, so with
   JavaScript off nothing is ever hidden. */

html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------- header --- */

.site-header {
  transition: box-shadow .35s ease, background-color .35s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 8px 30px #11111112;
}

.brand-logo {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.brand:hover .brand-logo {
  transform: translateY(-2px) rotate(-2deg);
}

/* ---------------------------------------------------------------- links --- */

.header-cta svg,
.button svg,
.footer-cta svg {
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.header-cta:hover svg,
.button:hover svg,
.footer-cta:hover svg {
  transform: translateX(5px);
}

/* ------------------------------------------------------- hero entrance --- */

.hero-copy > * {
  animation: hero-copy-in .75s both cubic-bezier(.2, .8, .2, 1);
}

.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .18s; }

.odds-visual > * {
  animation: odds-panel-in .7s both cubic-bezier(.2, .8, .2, 1);
}

.odds-visual > :nth-child(2) { animation-delay: .08s; }
.odds-visual > :nth-child(3) { animation-delay: .14s; }
.odds-visual > :nth-child(4) { animation-delay: .2s; }
.odds-visual > :nth-child(5) { animation-delay: .26s; }

.live-pill i {
  animation: live-pulse 2.2s ease-in-out infinite;
}

/* ------------------------------------------------------------ surfaces --- */

.use-card,
.persona-list article,
.why-grid article,
.field-row,
.coverage-cell {
  transition: background-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* The coverage cell is a purple slab, so it is left out of the cream hover. */
.use-card:hover,
.persona-list article:hover,
.why-grid article:hover {
  background-color: #f4f4f1;
}

.use-card-top svg,
.feature-icon {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.use-card:hover .use-card-top svg,
.why-grid article:hover .feature-icon {
  transform: translateY(-4px);
}

/* -------------------------------------------------------- scroll reveal --- */

.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.2, .8, .2, 1),
    transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ keyframes --- */

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes odds-panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 5px #e8fd8829; }
  50%      { box-shadow: 0 0 0 9px #e8fd8815; }
}

/* ------------------------------------------------------ reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
  }
}