/* ============================================================
   Motion & microinteractions layer
   Loaded AFTER aesthetics.css to win specificity where needed.
   All motion respects prefers-reduced-motion.
   ============================================================ */

/* --- Scroll reveal -----------------------------------------
   Markup uses `.reveal`; main.js adds `.is-visible` when in viewport.
   We start hidden, fade up on `.is-visible`. Reduced-motion users see
   content instantly because main.js short-circuits to add `.is-visible`.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)),
                transform 600ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)),
                transform 600ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
  }
}

/* --- Animated link underlines ------------------------------
   Inline links inside body copy gain a growing underline on hover.
   Excludes navigational link patterns (nav, btn, footer lists, cards).
   ------------------------------------------------------------ */
.prose a:not(.btn),
.faq-item-body a:not(.btn),
main p a:not(.btn):not(.site-header__brand) {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 280ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
  padding-bottom: 1px;
}
.prose a:not(.btn):hover,
.prose a:not(.btn):focus-visible,
.faq-item-body a:not(.btn):hover,
.faq-item-body a:not(.btn):focus-visible,
main p a:not(.btn):not(.site-header__brand):hover,
main p a:not(.btn):not(.site-header__brand):focus-visible {
  background-size: 100% 1px;
}

/* --- Header nav underline grow ----------------------------- */
.site-header .site-nav a {
  position: relative;
  padding-block: 4px;
}
.site-header .site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-primary, #00A8E8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
}
.site-header .site-nav a:hover::after,
.site-header .site-nav a:focus-visible::after,
.site-header .site-nav a.is-active::after {
  transform: scaleX(1);
}

/* --- Card hover lift ---------------------------------------
   Applies to step cards, rail cards, faq items, and any .card.
   Keeps shadow direction consistent (down + slight blur).
   ------------------------------------------------------------ */
.step,
.rail-card,
.card {
  transition:
    transform 240ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 240ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 240ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: transform;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .step:hover,
  .rail-card:hover,
  a.card:hover,
  .card[href]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.18), 0 2px 6px -2px rgb(0 0 0 / 0.08);
  }
}

/* --- FAQ chevron — smoother rotate -------------------------
   Existing CSS swaps icon URL. We add a subtle rotate to the
   container for tactile feedback when opening.
   ------------------------------------------------------------ */
.faq-item summary::after {
  transition:
    transform 280ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    background-image 200ms ease-out;
}
.faq-item[open] summary::after {
  transform: rotate(180deg);
}
.faq-item-body {
  /* Soft slide-in on open via animation since <details> doesn't transition height */
  animation: faq-slide-in 280ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes faq-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item-body { animation: none; }
}

/* --- Button press feedback --------------------------------- */
.btn {
  transition:
    transform 150ms var(--ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover,
  .btn--signal:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--color-primary, #00A8E8) 60%, transparent);
  }
}
.btn:active {
  transform: translateY(0) scale(0.985);
}

/* --- Focus ring upgrade ------------------------------------
   Use a soft halo instead of default browser outline.
   ------------------------------------------------------------ */
*:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-primary, #00A8E8) 100%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 120ms ease;
}
.btn:focus-visible,
.faq-item summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary, #00A8E8) 18%, transparent);
}

/* --- Hero image — slow ken-burns ---------------------------
   Subtle scale on the cinematic hero image to break the static.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hero--cinematic .hero__media img {
    animation: hero-kenburns 16s ease-out both;
    transform-origin: 60% 50%;
  }
}
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* --- Image lazy-load fade-in ------------------------------- */
img[loading='lazy'] {
  opacity: 0;
  transition: opacity 320ms ease-out;
}
img[loading='lazy'].is-loaded,
img[loading='lazy'].is-loaded-instant {
  opacity: 1;
}