/* ==========================================================================
   fudidate — motion
   Everything here is decorative: each block sits behind
   `prefers-reduced-motion: no-preference`, and scroll-linked effects behind
   `@supports`, so the page is complete without any of it.
   ========================================================================== */

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

@keyframes lift-in {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes sheen {
  from { transform: translateX(-130%) skewX(-12deg); }
  to   { transform: translateX(130%) skewX(-12deg); }
}

@keyframes screen-drift {
  from { translate: 0 3.5%; }
  to   { translate: 0 -3.5%; }
}

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

.nav__inner { transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.nav.is-stuck .nav__inner { height: 62px; }

/* the sliding underline belongs to the desktop row, not the mobile sheet */
@media (min-width: 900px) {
.nav__links a { position: relative; }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--grad-coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }
}

/* -------------------------------------------------------- pointer highlight */

/* a soft light that follows the cursor across a card */
.card {
  --mx: 50%;
  --my: 0%;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.075), transparent 68%);
  transition: opacity 0.4s ease;
}

.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- buttons */

.btn--primary { overflow: hidden; }

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.4) 50%, transparent 66%);
  transform: translateX(-130%) skewX(-12deg);
}

/* ------------------------------------------------------------- motion only */

@media (prefers-reduced-motion: no-preference) {

  .btn--primary:hover::after { animation: sheen 0.85s cubic-bezier(0.4, 0, 0.2, 1); }

  /* hero choreography: the copy is handled by .reveal, the device gets its own
     slower entrance so it lands last */
  .hero__screen {
    animation: lift-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
  }

  /* staggered children inside blocks that reveal as one */
  .stats.is-in .stats__item,
  .ways__col.is-in .ways__steps li,
  .compare__card.is-in .flow__item,
  .plan.is-in .plan__list li {
    animation: rise-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .stats.is-in .stats__item:nth-child(2) { animation-delay: 0.09s; }
  .stats.is-in .stats__item:nth-child(3) { animation-delay: 0.18s; }

  .ways__col.is-in .ways__steps li:nth-child(2),
  .compare__card.is-in .flow__item:nth-child(2),
  .plan.is-in .plan__list li:nth-child(2) { animation-delay: 0.07s; }

  .ways__col.is-in .ways__steps li:nth-child(3),
  .compare__card.is-in .flow__item:nth-child(3),
  .plan.is-in .plan__list li:nth-child(3) { animation-delay: 0.14s; }

  .compare__card.is-in .flow__item:nth-child(4),
  .plan.is-in .plan__list li:nth-child(4) { animation-delay: 0.21s; }

  .compare__card.is-in .flow__item:nth-child(5),
  .plan.is-in .plan__list li:nth-child(5) { animation-delay: 0.28s; }

  .plan.is-in .plan__list li:nth-child(6) { animation-delay: 0.35s; }

  /* the winning row keeps a slow breath so the eye lands on it */
  .flow__item--win {
    animation: rise-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both,
               win-glow 3.4s ease-in-out 1.2s infinite;
  }

  @keyframes win-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 8, 62, 0); }
    50%      { box-shadow: 0 0 28px -6px rgba(255, 8, 62, 0.45); }
  }

  /* hover lifts */
  .bento__cell,
  .plan,
  .mini-row {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
  }

  .bento__cell:hover,
  .plan:hover { transform: translateY(-4px); border-color: var(--line-2); }
  .mini-row:hover { transform: translateX(3px); border-color: var(--line-2); }

  .bento__ico,
  .ways__ico { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .bento__cell:hover .bento__ico { transform: rotate(-6deg) scale(1.06); }
  .ways__col:hover .ways__ico { transform: rotate(6deg) scale(1.06); }

  /* the exported screens drift a little as they pass through the viewport */
  @supports (animation-timeline: view()) {
    .hero__screen {
      animation: lift-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
                 screen-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% exit 100%;
    }

    .filters__screen {
      animation: screen-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }

  /* details opens smoothly where the browser can interpolate to auto */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    .faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                  content-visibility 0.42s allow-discrete;
    }

    .faq__item[open]::details-content { block-size: auto; }
  }

  .faq__q i { transition: background 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .faq__item[open] .faq__q i { transform: rotate(180deg); }
}