/* ============================================================
   Healing Forward motion — matched to happyfeelingsllc.com
   That site's fx system: elements rise 32–36px while fading in
   over .9s on the same ease curve, images wipe upward into
   view over 1.3s, and the hero settles with a slow zoom.
   This file loads last on the Healing Forward page and sets
   those same values for the page's reveal classes. The driver
   lives in healing-forward.js; the shared animations files
   stay untouched for the parent site.
   ============================================================ */

/* Scroll reveals: a clear rise + fade, like the fx-up/fx-left moves */
html.anim-ready .anim-up {
  translate: 0 36px;
  transition: opacity .95s cubic-bezier(.16,.84,.24,1), translate .95s cubic-bezier(.16,.84,.24,1);
  transition-delay: var(--anim-d, 0s);
}

/* Hero text rises a touch slower, one piece after another */
html.anim-ready .anim-hero-in {
  animation-duration: 1s;
}

/* Hero banner wipes upward into view on load, like fx-wipe */
@keyframes hf-wipe {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
html.anim-ready .hero-banner {
  animation: hf-wipe 1.3s cubic-bezier(.16,.84,.24,1) both;
}

/* Service and panel photos ease in with a gentle settle as
   their card or panel appears — the fx zoom feel */
html.anim-ready .anim-up img {
  transition: scale 1.4s cubic-bezier(.16,.84,.24,1);
}

/* Reduced-motion parity with happyfeelingsllc.com (2026-10-20):
   that site runs its fx regardless of the visitor's reduced-motion
   setting; the shared stylesheet switches Healing Forward's motion
   OFF for those visitors, which is why the page could look frozen.
   On THIS page the gentle fades and rises run either way. */
@media (prefers-reduced-motion: reduce) {
  html.anim-ready .anim-up {
    opacity: 0 !important;
    translate: 0 36px !important;
    transition: opacity .95s cubic-bezier(.16,.84,.24,1), translate .95s cubic-bezier(.16,.84,.24,1) !important;
    transition-delay: var(--anim-d, 0s) !important;
  }
  html.anim-ready .anim-up.anim-in { opacity: 1 !important; translate: 0 0 !important; }
  html.anim-ready .anim-hero-in { opacity: 0 !important; animation: anim-rise-in 1s cubic-bezier(.16,.84,.24,1) both !important; animation-delay: var(--anim-d, 0s) !important; }
  html.anim-ready .anim-settle { animation: anim-settle 1.9s cubic-bezier(.16,.84,.24,1) both !important; }
  html.anim-ready .hero-banner { animation: hf-wipe 1.3s cubic-bezier(.16,.84,.24,1) both !important; }
  .pacc-panel.active .pacc-body { animation: anim-rise-in .6s cubic-bezier(.16,.84,.24,1) .2s both !important; }
  .service img { transition: scale .6s cubic-bezier(.16,.84,.24,1) !important; }
}