/* =============================================
   ANIMATIONS.CSS — Motion & Reveal System
   Molly P VandenBerg Psychotherapy
   Feeling: Brightness · Lightness · Growth
   ============================================= */

/* ── Keyframes ────────────────────────────────────────── */

/* Hero text entrance — drifts up and fades in */
@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botanical decorations — gentle hover float */
@keyframes floatBotanical {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  30%       { transform: translateY(-12px) rotate(1.8deg); }
  65%       { transform: translateY(-7px) rotate(-1.2deg); }
}

/* Second botanical — slightly offset timing */
@keyframes floatBotanical2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  35%       { transform: translateY(-9px) rotate(-2deg); }
  70%       { transform: translateY(-14px) rotate(1deg); }
}

/* Nature photo slow zoom (keep in sync with inline style) */
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* CTA button warm glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 196, 96, 0); }
  50%       { box-shadow: 0 4px 28px 6px rgba(232, 196, 96, 0.22), 0 0 0 0 rgba(94, 122, 88, 0); }
}

/* Divider line grows from center */
@keyframes dividerGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Light rays that ripple outward — for botanical quote section */
@keyframes lightRipple {
  0%   { opacity: 0; transform: scale(0.7); }
  50%  { opacity: 0.18; }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Leaf unfurl — for botanical SVG elements that grow in */
@keyframes leafUnfurl {
  from { opacity: 0; transform: scale(0.72) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Upward light sweep — for section backgrounds */
@keyframes lightLift {
  from { background-position: 50% 60%; }
  to   { background-position: 50% 40%; }
}


/* ── Hero Entrance ────────────────────────────────────── */

.hero-entrance {
  opacity: 0;
  animation: heroEnter 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-entrance-delay-1 { animation-delay: 0.3s; }
.hero-entrance-delay-2 { animation-delay: 0.65s; }
.hero-entrance-delay-3 { animation-delay: 1s; }


/* ── Shimmer on hero ──────────────────────────────────── */

.hero-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
/* Moving "sweep" beam removed per client — the .hero-shimmer element
   now only provides the ambient sun glow (see styles.css). */


/* ── Botanical Float ──────────────────────────────────── */

.botanical-float {
  animation: floatBotanical 7s ease-in-out infinite;
  transform-origin: bottom center;
}
.botanical-float-2 {
  animation: floatBotanical2 9s ease-in-out infinite;
  transform-origin: bottom center;
}


/* ── Scroll Reveal System ─────────────────────────────── */
/*
   Add data-reveal="up|left|right|fade|scale" to any element.
   motion.js adds .is-visible when it enters the viewport.
*/

[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-reveal="up"]    { transform: translateY(44px); }
[data-reveal="left"]  { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="fade"]  { /* opacity only */ }
[data-reveal="scale"] { transform: scale(0.92) translateY(18px); }
[data-reveal="grow"]  { transform: scale(0.88); }

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}


/* ── Divider Animate ──────────────────────────────────── */

.divider {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s,
    opacity 0.5s ease 0.2s;
}
.divider.is-visible {
  transform: scaleX(1);
  opacity: 1;
}
/* Center-aligned divider */
.text-center .divider {
  transform-origin: center center;
}


/* ── Card Stagger Grid ────────────────────────────────── */
/*
   Cards start hidden; motion.js triggers is-visible on the
   parent and each card gets a stagger delay via nth-child.
*/

.card-grid .card {
  opacity: 0;
  transform: translateY(38px) scale(0.96);
  transition:
    opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
.card-grid.cards-visible .card:nth-child(1) { transition-delay: 0s;     }
.card-grid.cards-visible .card:nth-child(2) { transition-delay: 0.1s;   }
.card-grid.cards-visible .card:nth-child(3) { transition-delay: 0.2s;   }
.card-grid.cards-visible .card:nth-child(4) { transition-delay: 0.3s;   }
.card-grid.cards-visible .card:nth-child(5) { transition-delay: 0.4s;   }
.card-grid.cards-visible .card:nth-child(6) { transition-delay: 0.5s;   }
.card-grid.cards-visible .card:nth-child(n+7) { transition-delay: 0.6s; }

.card-grid.cards-visible .card {
  opacity: 1;
  transform: none;
}


/* ── About / Values Item Stagger ─────────────────────── */

.value-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.78s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.78s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.values-list.cards-visible .value-item:nth-child(1) { transition-delay: 0s;    }
.values-list.cards-visible .value-item:nth-child(2) { transition-delay: 0.14s; }
.values-list.cards-visible .value-item:nth-child(3) { transition-delay: 0.28s; }
.values-list.cards-visible .value-item:nth-child(4) { transition-delay: 0.42s; }
.values-list.cards-visible .value-item {
  opacity: 1;
  transform: none;
}


/* ── Modality / Accordion items ──────────────────────── */

.mod-item {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mod-list.cards-visible .mod-item:nth-child(1)  { transition-delay: 0s;    }
.mod-list.cards-visible .mod-item:nth-child(2)  { transition-delay: 0.08s; }
.mod-list.cards-visible .mod-item:nth-child(3)  { transition-delay: 0.16s; }
.mod-list.cards-visible .mod-item:nth-child(4)  { transition-delay: 0.24s; }
.mod-list.cards-visible .mod-item:nth-child(5)  { transition-delay: 0.32s; }
.mod-list.cards-visible .mod-item:nth-child(n+6){ transition-delay: 0.4s;  }
.mod-list.cards-visible .mod-item {
  opacity: 1;
  transform: none;
}


/* ── Botanical Sprig SVG draw ─────────────────────────── */
/*
   The botanical sprig SVG in the quote section draws in.
   motion.js adds .sprig-visible when it enters the viewport.
*/

.botanical-sprig {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.botanical-sprig.sprig-visible {
  opacity: 1;
  transform: none;
}

/* Stagger inner paths for a "growing" feel */
.botanical-sprig path,
.botanical-sprig line,
.botanical-sprig ellipse {
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Reveal by :nth-of-type so each leaf maps to its actual <path>/<line>
   index — :nth-child broke because the SVG interleaves paths with the
   defs, stem, sun-glow ellipse, and midrib lines, leaving the upper
   leaves permanently hidden. paths: 1 = stem, 2-10 = the nine leaves;
   lines: the nine midribs. Staggered bottom-to-top so the whole plant
   grows in completely. */
.botanical-sprig.sprig-visible ellipse              { opacity: 1;    transition-delay: 0.25s; }

/* central stem first */
.botanical-sprig.sprig-visible path:nth-of-type(1)  { opacity: 0.55; transition-delay: 0.10s; }

/* leaf pair 1 — bottom, largest */
.botanical-sprig.sprig-visible path:nth-of-type(2)  { opacity: 0.76; transition-delay: 0.32s; }
.botanical-sprig.sprig-visible path:nth-of-type(3)  { opacity: 0.76; transition-delay: 0.40s; }
.botanical-sprig.sprig-visible line:nth-of-type(1)  { opacity: 0.40; transition-delay: 0.44s; }
.botanical-sprig.sprig-visible line:nth-of-type(2)  { opacity: 0.40; transition-delay: 0.44s; }

/* leaf pair 2 */
.botanical-sprig.sprig-visible path:nth-of-type(4)  { opacity: 0.83; transition-delay: 0.54s; }
.botanical-sprig.sprig-visible path:nth-of-type(5)  { opacity: 0.83; transition-delay: 0.62s; }
.botanical-sprig.sprig-visible line:nth-of-type(3)  { opacity: 0.38; transition-delay: 0.66s; }
.botanical-sprig.sprig-visible line:nth-of-type(4)  { opacity: 0.38; transition-delay: 0.66s; }

/* leaf pair 3 — widest spread */
.botanical-sprig.sprig-visible path:nth-of-type(6)  { opacity: 0.88; transition-delay: 0.76s; }
.botanical-sprig.sprig-visible path:nth-of-type(7)  { opacity: 0.88; transition-delay: 0.84s; }
.botanical-sprig.sprig-visible line:nth-of-type(5)  { opacity: 0.42; transition-delay: 0.88s; }
.botanical-sprig.sprig-visible line:nth-of-type(6)  { opacity: 0.42; transition-delay: 0.88s; }

/* leaf pair 4 — upper */
.botanical-sprig.sprig-visible path:nth-of-type(8)  { opacity: 0.82; transition-delay: 0.98s; }
.botanical-sprig.sprig-visible path:nth-of-type(9)  { opacity: 0.82; transition-delay: 1.06s; }
.botanical-sprig.sprig-visible line:nth-of-type(7)  { opacity: 0.38; transition-delay: 1.10s; }
.botanical-sprig.sprig-visible line:nth-of-type(8)  { opacity: 0.38; transition-delay: 1.10s; }

/* terminal top leaf */
.botanical-sprig.sprig-visible path:nth-of-type(10) { opacity: 0.76; transition-delay: 1.20s; }
.botanical-sprig.sprig-visible line:nth-of-type(9)  { opacity: 0.40; transition-delay: 1.24s; }


/* ── Light Ripple behind botanical quote ─────────────── */

.botanical-quote-inner {
  position: relative;
}
.botanical-quote-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 340px; height: 340px;
  background: radial-gradient(
    ellipse at center,
    rgba(232, 196, 96, 0.13) 0%,
    rgba(196, 212, 191, 0.08) 45%,
    transparent 75%
  );
  border-radius: 50%;
  pointer-events: none;
  animation: lightRipple 5s ease-in-out 1.2s infinite;
}


/* ── CTA / Courage strip ─────────────────────────────── */

.courage-strip .btn-primary {
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.courage-strip.is-visible .btn-primary {
  animation: glowPulse 3.5s ease-in-out 0.7s infinite;
}


/* ── Parallax container ───────────────────────────────── */

.parallax-section {
  overflow: hidden;
  position: relative;
}
.parallax-section .parallax-inner {
  will-change: transform;
  /* transform applied by JS */
}


/* ── Eyebrow text entrance ────────────────────────────── */

.eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.eyebrow.is-visible {
  opacity: 1;
  transform: none;
}


/* ── Credentials list items stagger ──────────────────── */

.credentials-list li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.credentials-list.cards-visible li:nth-child(1)  { transition-delay: 0s;    }
.credentials-list.cards-visible li:nth-child(2)  { transition-delay: 0.08s; }
.credentials-list.cards-visible li:nth-child(3)  { transition-delay: 0.16s; }
.credentials-list.cards-visible li:nth-child(4)  { transition-delay: 0.24s; }
.credentials-list.cards-visible li:nth-child(n+5){ transition-delay: 0.32s; }
.credentials-list.cards-visible li {
  opacity: 1;
  transform: none;
}


/* ── Vine Growth — Growing Together section ──────────────── */

/* Keyframes */
@keyframes vineSway {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25%       { transform: rotate(1.2deg) translateX(2px); }
  75%       { transform: rotate(-0.8deg) translateX(-1px); }
}

/* Vine SVG positioning — 6 vines distributed across full section width */
/* Wrapper stretches to full section height (a div honors top/bottom;
   an <svg> is a replaced element and would fall back to intrinsic
   height, leaving the base stranded mid-section). */
.vine-col {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  transform-origin: bottom center;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vine-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.vine-1 { left: -1%;  width: 130px; }
.vine-2 { left: 14%;  width: 120px; }
.vine-3 { left: 30%;  width: 130px; }
.vine-4 { left: 48%;  width: 120px; }
.vine-5 { left: 64%;  width: 130px; }
.vine-6 { left: 80%;  width: 120px; }
.vine-7 { left: 91%;  width: 130px; }

/* Grow-in: clip upward from the bottom edge so each vine grows out of
   the section's bottom. The art is generated already tapered, so the
   reveal is a single clip sweep. */
.growing-together-section.vine-visible .vine-col { clip-path: inset(0 0 0 0); }

/* Per-vine stagger + gentle continuous sway after growth */
.growing-together-section.vine-visible .vine-1 { animation: vineSway  9s ease-in-out 3.0s infinite; }
.growing-together-section.vine-visible .vine-2 { transition-delay: 0.25s; animation: vineSway 11s ease-in-out 3.4s infinite reverse; }
.growing-together-section.vine-visible .vine-3 { transition-delay: 0.45s; animation: vineSway  8s ease-in-out 3.8s infinite; }
.growing-together-section.vine-visible .vine-4 { transition-delay: 0.65s; animation: vineSway 10s ease-in-out 3.2s infinite reverse; }
.growing-together-section.vine-visible .vine-5 { transition-delay: 0.85s; animation: vineSway 12s ease-in-out 4.0s infinite; }
.growing-together-section.vine-visible .vine-6 { transition-delay: 1.05s; animation: vineSway  9s ease-in-out 3.6s infinite reverse; }
.growing-together-section.vine-visible .vine-7 { transition-delay: 1.25s; animation: vineSway 10s ease-in-out 4.2s infinite; }


/* Ensure content stays above vines */
.growing-together-section .container {
  position: relative;
  z-index: 1;
}


/* ── Floating Light Bloom — Areas of Focus section ───────── */

/* Orb motion is driven by motion.js (initBloomOrbs) so the orbs
   float across the whole section and bounce off its edges. */

.approaches-section,
.bloom-section {
  position: relative;
  overflow: hidden;
}

.bloom-orb {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
  filter: blur(48px);
  will-change: transform;
}
.approaches-section.bloom-visible .bloom-orb,
.bloom-section.bloom-visible .bloom-orb {
  opacity: 1;
}

/* Sage green orbs — matching motherapy.org ambient orb style */
.bloom-orb-1 {
  background: radial-gradient(circle at center,
    rgba(94, 122, 88, 0.45) 0%,
    rgba(94, 122, 88, 0.22) 40%,
    rgba(196, 212, 191, 0.08) 65%,
    transparent 80%
  );
  width: 280px; height: 280px;
}
.bloom-orb-2 {
  background: radial-gradient(circle at center,
    rgba(196, 212, 191, 0.50) 0%,
    rgba(94, 122, 88, 0.25) 45%,
    transparent 75%
  );
  width: 260px; height: 260px;
}
.bloom-orb-3 {
  width: 230px; height: 230px;
  background: radial-gradient(circle at center,
    rgba(94, 122, 88, 0.32) 0%,
    rgba(196, 212, 191, 0.16) 50%,
    transparent 75%
  );
}
.bloom-orb-4 {
  width: 200px; height: 200px;
  background: radial-gradient(circle at center,
    rgba(196, 212, 191, 0.45) 0%,
    rgba(94, 122, 88, 0.20) 50%,
    transparent 78%
  );
}
.bloom-orb-5 {
  width: 250px; height: 250px;
  background: radial-gradient(circle at center,
    rgba(94, 122, 88, 0.40) 0%,
    rgba(94, 122, 88, 0.18) 45%,
    rgba(196, 212, 191, 0.07) 68%,
    transparent 80%
  );
}

/* Keep content above bloom orbs */
.approaches-section .container,
.bloom-section .container {
  position: relative;
  z-index: 1;
}


/* ── Reduced motion — respect user preference ─────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  .card-grid .card,
  .value-item,
  .mod-item,
  .eyebrow,
  .botanical-sprig,
  .botanical-sprig path,
  .botanical-sprig line,
  .botanical-sprig ellipse,
  .credentials-list li,
  .divider {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}