/* =========================================================
   WATER STRIKE — ENHANCEMENT LAYER  (additive / isolated)
   Loads AFTER styles.css. Pure craft polish only:
     • cinematic hero entrance
     • living "subsurface" ambient hero canvas
     • magnetic primary CTAs
     • keyboard focus rings (accessibility)
     • smoother image settle
   Nothing here changes copy, imagery, palette, type, or layout.
   Remove the two <link>/<script> includes to fully revert.
   ========================================================= */

/* ---- Living hero ambient canvas (sits above photo, under the scrims) ---- */
.ws-hero-fx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
  transition: opacity 1.4s ease;
}
.ws-hero-fx.is-on { opacity: 1; }

/* ---- Cinematic hero entrance (only applied when JS is active) ---- */
html.ws-js .hero-inner > .tagline,
html.ws-js .hero-inner > h1,
html.ws-js .hero-inner > p,
html.ws-js .hero-inner > .hero-actions,
html.ws-js .hero-inner > .hero-stat,
html.ws-js .hero-inner > .hero-badges {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
html.ws-js .hero-inner.ws-enter > * {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s cubic-bezier(.22,.61,.18,1),
    transform .95s cubic-bezier(.22,.61,.18,1);
  transition-delay: var(--ed, 0ms);
}

/* ---- Magnetic CTA (transform driven by JS, this just hints the GPU) ---- */
.btn.ws-magnetic { will-change: transform; }

/* ---- Accessible keyboard focus rings (does not affect mouse users) ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan-400, #36bce8);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 4px; }

/* ---- Honour reduced-motion: drop the ambient + entrance entirely ---- */
@media (prefers-reduced-motion: reduce) {
  .ws-hero-fx { display: none; }
  html.ws-js .hero-inner > * { opacity: 1 !important; transform: none !important; }
}