/* animations.css — scroll reveals, hover transitions, hero canvas styling.
   Hover transforms only fire on devices that actually hover (no mobile/touch jitter).
   Everything respects prefers-reduced-motion: animation off, hover transforms off,
   color/opacity transitions kept for affordance. */

/* --- Hero canvas (Home only) ---
   Positioned behind hero content. Sits inside .home-hero which is `position: relative; isolation: isolate;`.
   Canvas is purely decorative — aria-hidden on the element. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  display: block;
  pointer-events: none;
}

/* Fallback static gradient: applied to .home-hero when JS is unavailable or
   prefers-reduced-motion is set. canvas-hero.js removes the data attribute on activation. */
.home-hero[data-canvas-fallback="true"] {
  background:
    radial-gradient(60% 80% at 18% 30%, rgba(0, 194, 255, 0.22), transparent 60%),
    radial-gradient(55% 75% at 82% 70%, rgba(200, 90, 0, 0.22), transparent 60%),
    var(--color-navy);
}

/* --- Scroll reveals ---
   `data-reveal` on a container: GSAP fades + slides it up when it enters viewport.
   `data-reveal-stagger` + `[data-reveal-item]` children: GSAP staggers the children.
   Initial hidden state is applied only when JS has signalled it's ready, so no-JS
   visitors still see content. */
html.js-reveal-ready [data-reveal]:not([data-reveal-stagger]),
html.js-reveal-ready [data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

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

/* --- Hover: buttons --- */
@media (hover: hover) and (pointer: fine) {
  .btn {
    transition: transform var(--duration-fast) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
  }

  .btn--primary:hover,
  .btn--primary:focus-visible {
    background-color: var(--color-accent-secondary);
    color: var(--color-white);
    box-shadow: var(--glow-cyan);
    transform: translateY(-1px);
  }

  .btn--secondary:hover,
  .btn--secondary:focus-visible {
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
    transform: translateY(-1px);
  }

  .btn--ghost:hover,
  .btn--ghost:focus-visible {
    color: var(--color-accent-secondary);
  }
}

/* --- Hover: cards --- */
@media (hover: hover) and (pointer: fine) {
  .card {
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
  }

  .card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-secondary);
    box-shadow: var(--shadow-card);
  }
}

/* --- Hover: nav links --- */
@media (hover: hover) and (pointer: fine) {
  .nav__link {
    transition: color var(--duration-base) var(--ease-out);
  }

  .nav__link:hover,
  .nav__link:focus-visible {
    color: var(--color-accent-secondary);
  }

  .nav__link.is-active:hover,
  .nav__link.is-active:focus-visible {
    color: var(--color-accent-secondary);
  }

  .footer__link {
    transition: color var(--duration-base) var(--ease-out);
  }

  .footer__link:hover,
  .footer__link:focus-visible {
    color: var(--color-accent-secondary);
  }
}

/* --- Underline-grow inline link (used in body copy, not the nav) --- */
.link-underline {
  position: relative;
  color: var(--color-accent-secondary);
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-underline:hover::after,
  .link-underline:focus-visible::after {
    transform: scaleX(1);
  }
}

/* --- Step row hover: orange underline-grow under the title.
   Same mechanism as .link-underline. Triggered by hover on the .step row
   (not the title alone) so the whole row is the affordance. */
.step .heading-sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .step:hover .heading-sub::after,
  .step:focus-within .heading-sub::after {
    transform: scaleX(1);
  }
}

/* --- Reduced motion ---
   Disable scroll-reveal transforms, hover transforms, and the canvas drift.
   Keep color/opacity transitions for hover affordance. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal-ready [data-reveal]:not([data-reveal-stagger]),
  html.js-reveal-ready [data-reveal-item] {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .btn:focus-visible,
  .card:hover {
    transform: none !important;
  }

  .link-underline::after,
  .step .heading-sub::after {
    transition: none;
  }
}