/* ============================================================
   Shared animations — Black Gurl Moves + Healing Forward
   Linked by every page, together with js/animations.js.
   Modeled on happyfeelingsllc.com: same ease curve, soft rises,
   gentle hero settle. Plain CSS only — no libraries.

   ADJUST TIMING HERE:
   --anim-ease    the motion curve used by everything below
   .8s / .9s      scroll-reveal and hero-text durations
   1.9s           hero image settle duration
   --anim-d       per-element delay (set inline or by animations.js)

   SAFETY: every hidden starting state is gated behind
   html.anim-ready, a class js/animations.js adds the moment it
   loads. If the script ever fails, the class never appears and
   all content simply shows — nothing can get stuck invisible.
   ============================================================ */
:root {
  --anim-ease: cubic-bezier(.16, .84, .24, 1);
}

/* ---------- Keyframes ---------- */
@keyframes anim-settle {
  from { scale: 1.08; }
  to   { scale: 1; }
}
@keyframes anim-rise-in {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes anim-menu-in {
  from { opacity: 0; translate: 0 -10px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- 1 · Page opening ---------- */
/* Hero image slowly settles into place (zoom-out 1.08 -> 1). */
html.anim-ready .anim-settle {
  animation: anim-settle 1.9s var(--anim-ease) both;
}
/* Homepage hero slideshow: the active slide settles the same way.
   Uses the standalone `scale` property, so it never fights the
   slideshow's own transform rules. */
html.anim-ready .hero-slide.is-active {
  animation: anim-settle 1.9s var(--anim-ease) both;
}
/* Hero headline, text and buttons rise in one after another.
   Stagger comes from each element's --anim-d delay. */
html.anim-ready .anim-hero-in {
  opacity: 0;
  animation: anim-rise-in .9s var(--anim-ease) both;
  animation-delay: var(--anim-d, 0s);
}

/* ---------- 2 · Scrolling ---------- */
/* Sections fade in and rise ~30px as they scroll into view.
   animations.js adds .anim-in once, via IntersectionObserver,
   and staggers groups of siblings ~100ms apart through --anim-d. */
html.anim-ready .anim-up {
  opacity: 0;
  translate: 0 30px;
  transition: opacity .8s var(--anim-ease), translate .8s var(--anim-ease);
  transition-delay: var(--anim-d, 0s);
}
html.anim-ready .anim-up.anim-in {
  opacity: 1;
  translate: 0 0;
}

/* ---------- 3 · Expanding panels ---------- */
/* Healing Forward "Forward Method" steps and FAQ use native
   <details>: the answer glides in each time a panel opens. */
details[open] > p {
  animation: anim-rise-in .5s var(--anim-ease) both;
}
/* Homepage Porter Method accordion: the open panel's words glide
   in just after the panel finishes sweeping open. (The sweep
   itself already lives in the homepage's own CSS.) */
.pacc-panel.active .pacc-body {
  animation: anim-rise-in .6s var(--anim-ease) .2s both;
}

/* ---------- 5 · Menus ---------- */
/* Healing Forward mobile menu: slides down as it opens.
   (The homepage drawer already slides in its own CSS.) */
@media (max-width: 1060px) {
  .js #hf-navigation.is-open {
    animation: anim-menu-in .45s var(--anim-ease) both;
  }
}

/* ---------- 6 · Hover effects ---------- */
/* Healing Forward service rows: the photo zooms in slightly. */
.service img {
  transition: scale .6s var(--anim-ease);
}
.service:hover img {
  scale: 1.04;
}
/* Healing Forward consultation step cards lift a touch. */
.consultation-steps li {
  transition: translate .5s var(--anim-ease);
}
.consultation-steps li:hover {
  translate: 0 -4px;
}
/* Homepage cards, drawers, popups and the Porter panels already
   carry their own hover/open motion in the site's CSS — this file
   deliberately leaves those untouched. */

/* ---------- Accessibility: reduce motion ---------- */
/* Visitors who ask for reduced motion get the full site, still. */
@media (prefers-reduced-motion: reduce) {
  html.anim-ready .anim-up {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }
  html.anim-ready .anim-hero-in {
    opacity: 1 !important;
    animation: none !important;
  }
  html.anim-ready .anim-settle,
  html.anim-ready .hero-slide.is-active,
  .pacc-panel.active .pacc-body,
  details[open] > p,
  .js #hf-navigation.is-open {
    animation: none !important;
  }
  .service img,
  .consultation-steps li {
    transition: none !important;
  }
  .service:hover img {
    scale: 1;
  }
  .consultation-steps li:hover {
    translate: 0 0;
  }
}