/* ------------------------------------------------------------------
   Reclench motion — Apple hardware page x Oura / Linear.
   Transform + opacity only (no layout shift); everything off under
   prefers-reduced-motion. Pairs with /assets/js/motion.js.
   ------------------------------------------------------------------ */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 160ms;
  --dur-hover: 240ms;
  --dur-reveal: 760ms;
}

/* Cross-document page transitions (Chromium); other browsers navigate normally. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: rm-vt-out 180ms var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: rm-vt-in 320ms var(--ease-out) both;
}

@keyframes rm-vt-out {
  to { opacity: 0; }
}

@keyframes rm-vt-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Scroll reveals — only hidden once motion.js has booted, so no-JS shows everything. */
html.rm-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--rm-delay, 0ms);
}

html.rm-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

:is(.home-page, .pdp-page).kanva-home .kv-reveal {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transform: translate3d(0, 14px, 0);
}

/* Hero headline — line-by-line, blur to sharp, once copy has painted. */
html:not(.hc-await-copy) .kv-hero-title-solid,
html:not(.hc-await-copy) .kv-hero-title-soft,
html:not(.hc-await-copy) .kv-hero-lede,
html:not(.hc-await-copy) .kv-hero-copy .kv-text-link {
  animation: rm-line-in 900ms var(--ease-out) both;
}

html:not(.hc-await-copy) .kv-hero-title-soft { animation-delay: 90ms; }
html:not(.hc-await-copy) .kv-hero-lede { animation-delay: 180ms; }
html:not(.hc-await-copy) .kv-hero-copy .kv-text-link { animation-delay: 270ms; }

@keyframes rm-line-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* Press — uses the individual `scale` property so existing transforms are untouched. */
:where(
  button,
  .btn,
  [data-checkout],
  .footer-cta,
  .kv-text-link,
  .nav-cta,
  .icon-btn,
  .kv-header-icon,
  a[class*="cta"],
  a[class*="-btn"],
  [role="tab"]
) {
  transition:
    scale var(--dur-press) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

:where(
  button,
  .btn,
  [data-checkout],
  .footer-cta,
  .kv-text-link,
  .nav-cta,
  .icon-btn,
  .kv-header-icon,
  a[class*="cta"],
  a[class*="-btn"],
  [role="tab"]
):active:not(:disabled) {
  scale: 0.97;
  transition-duration: 90ms;
}

/* Primary orange CTA glow on hover (hover-capable pointers only). */
@media (hover: hover) and (pointer: fine) {
  :where([data-checkout], .footer-cta, a[class*="cta"]):hover {
    box-shadow: 0 8px 24px -10px rgba(255, 69, 0, 0.55);
  }

  /* Cards: hairline brightens, 2px lift. */
  :where(
    .kv-feature,
    .kv-bento-tall,
    .kv-bento-pack,
    .kv-bento-dark,
    .faq-item,
    .rm-card,
    .tool-card,
    .science-card
  ) {
    transition:
      translate var(--dur-hover) var(--ease-out),
      border-color var(--dur-hover) var(--ease-out),
      box-shadow var(--dur-hover) var(--ease-out);
  }

  :where(
    .kv-feature,
    .kv-bento-tall,
    .kv-bento-pack,
    .kv-bento-dark,
    .rm-card,
    .tool-card,
    .science-card
  ):hover {
    translate: 0 -2px;
    border-color: #cbd5e1;
  }

  /* Nav + footer links: underline sweep. */
  .site-nav a,
  .footer-col a,
  .footer-legal a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"],
  .footer-col a:hover,
  .footer-legal a:hover {
    background-size: 100% 1px;
  }
}

:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html.rm-ready [data-reveal],
  :is(.home-page, .pdp-page).kanva-home .kv-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html:not(.hc-await-copy) .kv-hero-title-solid,
  html:not(.hc-await-copy) .kv-hero-title-soft,
  html:not(.hc-await-copy) .kv-hero-lede,
  html:not(.hc-await-copy) .kv-hero-copy .kv-text-link {
    animation: none;
  }

  :where(button, .btn, [data-checkout], .footer-cta, .kv-text-link, a[class*="cta"], a[class*="-btn"]):active {
    scale: none;
  }
}