/* ═══════════════════════════════════════════════════════════════
   Body to Soul Health — shared motion + page-family personality
   Loaded on every page. All motion is gated behind .js-motion so
   the site renders fully visible if CSS/JS ever fails to load.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --rv-dist:20px;
  --rv-time:.85s;
}

/* ═══ 1. SCROLL REVEALS ═══════════════════════════════════════
   JS tags elements with .rv and sets --d (stagger delay).
   Only hidden once .js-motion is present → no-JS = always visible. */
.js-motion .rv{
  opacity:0;
  transform:translateY(var(--rv-dist));
  transition:opacity var(--rv-time) var(--ease-soft) var(--d,0s),
             transform var(--rv-time) var(--ease-soft) var(--d,0s);
  will-change:opacity,transform;
}
.js-motion .rv.in{opacity:1;transform:none;}

/* Once revealed, drop will-change so we don't pin layers forever */
.js-motion .rv.done{will-change:auto;}

/* Gentle image reveal — settles down from a soft over-scale.
   Applied to the img itself; the JS wraps nothing, so layout is untouched. */
.js-motion .rv-img{
  opacity:0;
  transform:scale(1.045);
  transition:opacity 1.15s var(--ease-soft) var(--d,0s),
             transform 1.5s var(--ease-soft) var(--d,0s);
  will-change:opacity,transform;
}
.js-motion .rv-img.in{opacity:1;transform:scale(1);}

/* Background-image media panels (hero, CALM band) settle in on load.
   Pure CSS, driven by nothing — the first paint never waits on JS.
   `both` fill means that if the animation is unsupported the panel
   simply stays visible. */
@keyframes b2s-media-in{
  from{opacity:0;transform:scale(1.05);}
  to{opacity:1;transform:scale(1);}
}
.js-motion .hh-media,
.js-motion .calm-band-media{
  animation:b2s-media-in 1.5s var(--ease-soft) both;
}


/* ═══ 2. HOVER MICRO-INTERACTIONS ════════════════════════════ */

/* Buttons already lift; add a softer, warmer bloom + settle curve */
.btn{transition:background .3s var(--ease-soft),transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft);}
.btn-coral:hover{box-shadow:0 12px 34px rgba(240,130,102,.38);}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(21,69,79,.26);}
.btn-gold:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);transition-duration:.08s;}

.nav-cta{transition:background .3s var(--ease-soft),transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft);}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(240,130,102,.34);}

/* Arrow links — the arrow drifts forward on hover.
   JS wraps a trailing → in <i class="ar"> so we can move it alone. */
.ar{display:inline-block;transition:transform .34s var(--ease-soft);}
a:hover .ar,.btn:hover .ar{transform:translateX(5px);}

/* Script word gets a breath of life when its heading is hovered */
h1 .script,h2 .script,h3 .script{
  display:inline-block;
  transition:transform .6s var(--ease-soft),color .5s var(--ease-soft);
}
h1:hover .script,h2:hover .script,h3:hover .script{transform:translateY(-2px) rotate(-1.1deg);}

/* Text links — underline grows from the left rather than snapping on */
.arrow-link,.hero-textlink,.tertiary-link a,.corp-textlink{position:relative;}
.arrow-link::after,.hero-textlink::after,.corp-textlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-soft);
}
.arrow-link:hover::after,.hero-textlink:hover::after,.corp-textlink:hover::after{transform:scaleX(1);}

/* Editorial path rows — warm to the touch */
.path-row{transition:background .45s var(--ease-soft);}
.path-row:hover{background:linear-gradient(90deg,rgba(245,230,222,.5),transparent 72%);}
.path-row:hover .path-num{color:var(--grapefruit);transition:color .45s var(--ease-soft);}

/* Editorial images lift slightly under the cursor */
.wimg-editorial img{transition:transform .7s var(--ease-soft),box-shadow .7s var(--ease-soft);}
.wimg-editorial img:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(14,58,64,.2);}


/* ═══ 3. SOFT TONE TRANSITIONS ═══════════════════════════════
   Feather the hard seam where a light section meets a teal
   .cosmos band, so cream → blush → teal reads as a fade. */
.cosmos{position:relative;}
.cosmos::before{
  content:"";position:absolute;left:0;right:0;top:0;height:130px;
  background:linear-gradient(to bottom,var(--seam-from,rgba(250,246,241,.55)),transparent);
  pointer-events:none;z-index:1;
}
/* Footer sits at the page end — feather it a touch more generously */
footer.cosmos::before{height:170px;}
/* Opt-out where a cosmos band is meant to start hard */
.cosmos.no-seam::before{display:none;}


/* ═══ 3b. PINNED HERO ════════════════════════════════════════
   The portrait holds in place while the rest of the page scrolls up
   over it. Opt-in per page via <body class="hero-pinned">.
   Desktop only: on narrow screens the hero media joins the normal
   document flow, where pinning would fight the layout. */
/* The site sets html,body{overflow-x:hidden} to tame decorative
   overflow. That silently makes them scroll containers, which kills
   position:sticky. `clip` crops identically without that side effect;
   browsers too old to know it fall back to the `hidden` above. */
html{overflow-x:clip;}
body{overflow-x:clip;}

@media (min-width:861px){
  .js-motion body.hero-pinned .hh-hero,
  body.hero-pinned .hh-hero{
    position:sticky;
    top:0;
    z-index:0;
    /* Match the pinned frame to the screen so nothing is cropped
       behind the sections riding over it. */
    min-height:100vh;
  }
  /* Everything after the hero must sit above it and be opaque, so it
     covers the portrait cleanly rather than blending into it. */
  body.hero-pinned .hh-hero ~ section,
  body.hero-pinned .hh-hero ~ footer,
  body.hero-pinned .hh-hero ~ div{
    position:relative;
    z-index:1;
  }
}
/* A pinned portrait should hold still — no parallax drift on top of it. */
body.hero-pinned .hh-media{transform:none !important;}


/* ═══ 4. AMBIENT FLOAT ═══════════════════════════════════════
   Very low-amplitude drift. Decorative only — never on text. */
@keyframes b2s-float{
  0%{transform:translateY(0)}
  100%{transform:translateY(-11px)}
}
.js-motion .float-slow{animation:b2s-float 7s ease-in-out infinite alternate;}
.js-motion .float-slower{animation:b2s-float 11s ease-in-out infinite alternate;}

/* Parallax targets — JS drives --py; CSS just applies it smoothly. */
.js-motion .px{transform:translate3d(0,var(--py,0px),0);will-change:transform;}


/* ═══ 5. PAGE-FAMILY PERSONALITY ═════════════════════════════
   body[data-family] shifts accent, rhythm and texture so each
   arm of the business reads differently on the same skeleton. */

/* — Clinical care: crisp, trustworthy, warm.
     Tighter reveals, squarer corners, teal-forward rules. */
body[data-family="clinical"]{--rv-dist:14px;--rv-time:.6s;}
body[data-family="clinical"] .path-row{border-top-color:rgba(21,69,79,.28);}
body[data-family="clinical"] .wimg-editorial img{border-radius:6px;}
body[data-family="clinical"] .eyebrow{color:var(--teal-head);letter-spacing:3.4px;}

/* — Jennifer: gold-forward, personal, visionary. */
body[data-family="jennifer"] .eyebrow{color:var(--gold);letter-spacing:4.6px;}
body[data-family="jennifer"] h1 .script,body[data-family="jennifer"] h2 .script{color:var(--gold);}
body[data-family="jennifer"] .star-div{color:var(--gold);opacity:.9;}
body[data-family="jennifer"] .wimg-editorial img{border-radius:50% 50% 46% 46%/8% 8% 5% 5%;}

/* — CALM: calming, embodied, rhythmic.
     Slowest, most even cadence on the whole site. */
body[data-family="calm"]{--rv-time:1.15s;--rv-dist:26px;}
body[data-family="calm"] section{padding-top:104px;padding-bottom:104px;}
body[data-family="calm"] .eyebrow{letter-spacing:5.5px;}
body[data-family="calm"] .star-div{letter-spacing:26px;}

/* — SOUL: deeper, atmospheric, spiritual but sophisticated. */
body[data-family="soul"]{--rv-time:1.3s;--rv-dist:30px;}
body[data-family="soul"] .cosmos::before{--seam-from:rgba(245,230,222,.5);}
body[data-family="soul"] h1,body[data-family="soul"] h2{letter-spacing:.6px;}
body[data-family="soul"] .eyebrow{color:var(--gold-soft);letter-spacing:6px;}

/* — Collective: connected, energized, communal. Quicker, staggered. */
body[data-family="collective"]{--rv-time:.62s;--rv-dist:22px;}
body[data-family="collective"] .eyebrow{color:var(--grapefruit);letter-spacing:3px;}
body[data-family="collective"] .btn-coral:hover{transform:translateY(-3px) scale(1.015);}

/* — CALM Kitchen: brighter, delicious, playful. */
body[data-family="kitchen"]{--rv-time:.58s;--rv-dist:24px;}
body[data-family="kitchen"] .eyebrow{color:var(--grapefruit);letter-spacing:2.6px;}
body[data-family="kitchen"] .wimg-editorial img,
body[data-family="kitchen"] .rv-img{border-radius:18px;}
body[data-family="kitchen"] .rv-img:hover{transform:scale(1.03) rotate(-.6deg);}

/* — Corporate: sharper, authoritative, polished. Minimal motion. */
body[data-family="corporate"]{--rv-time:.5s;--rv-dist:10px;}
body[data-family="corporate"] .wimg-editorial img{border-radius:2px;}
body[data-family="corporate"] .eyebrow{color:var(--teal-head);letter-spacing:3.8px;font-weight:500;}
body[data-family="corporate"] .btn{border-radius:3px;}
body[data-family="corporate"] .float-slow,
body[data-family="corporate"] .float-slower{animation:none;}

/* — Podcast: bolder, editorial. Larger type, decisive entrances. */
body[data-family="podcast"]{--rv-time:.55s;--rv-dist:28px;}
body[data-family="podcast"] .eyebrow{color:var(--grapefruit);letter-spacing:5px;font-weight:500;}
body[data-family="podcast"] h1{letter-spacing:-.4px;}
body[data-family="podcast"] .wimg-editorial img{border-radius:3px;}

/* — Resources: open, useful, browsable. */
body[data-family="resources"]{--rv-time:.6s;--rv-dist:18px;}
body[data-family="resources"] .eyebrow{color:var(--gold);letter-spacing:3.2px;}


/* ═══ 6. ACCESSIBILITY ═══════════════════════════════════════
   Anyone who asks for less motion gets a completely static site. */
@media (prefers-reduced-motion:reduce){
  .js-motion .rv,
  .js-motion .rv-img{opacity:1 !important;transform:none !important;transition:none !important;}
  .js-motion .hh-media,
  .js-motion .calm-band-media{animation:none !important;}
  .js-motion .float-slow,
  .js-motion .float-slower,
  .stars,.stars2,.stars3,.nebula{animation:none !important;}
  .js-motion .px{transform:none !important;}
  .ar,.btn,.nav-cta,h1 .script,h2 .script,h3 .script{transition:none !important;}
  *{scroll-behavior:auto !important;}
}

/* Keyboard users must never lose the focus ring to our hover work */
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid var(--grapefruit);
  outline-offset:3px;
  border-radius:2px;
}