/* =============================================================================
   CTFY · HeartMath (/programs/heartmath/, PRD pages/29) · page-only layout
   Builds on css/site.css and css/modules.css. Page variants here: hero chips, the breath-wave card
   (hero moment) and the mobile order of the Why split. The wave is drawn in SVG and moves with
   transform/opacity only. One breath = 10 s (6 a minute). Nothing changes brightness faster than one
   cycle per 10 s, so it can never flash. Loops stop: off-screen ([data-in-view="false"]), with the
   pause button (.is-paused), in hidden tabs, with the G4 toggle (html[data-motion="off"]) and with
   prefers-reduced-motion. The default CSS below is the still state (smooth wave, dot at mid-height).
   ============================================================================= */

/* ---------- 1 · Hero (H5): square product shot, chips ---------- */
.hm-hero .hero__chips{margin-top:clamp(20px,2.4vw,32px)}
.hm-hero .hero__chips .chip{text-decoration:none}
.hm-hero .hero__portrait picture{display:block;width:100%;height:100%}
.hm-hero .hero__portrait{box-shadow:0 0 0 1px var(--line-1),0 40px 120px -40px rgba(224,90,120,.25)}
@media (max-width:599px){
  .hm-hero .hero__chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .hm-hero .hero__chips::-webkit-scrollbar{display:none}
  .hm-hero .hero__chips .chip{white-space:nowrap}
}

/* ---------- 2 · Why: split with the breath-wave card ---------- */
.hm-split .m-split__media{aspect-ratio:var(--ratio,16/10)}
@media (max-width:1023px){
  /* PRD 29 §6: the card sits under the text on phones */
  .hm-split .m-split__media{order:0;aspect-ratio:var(--ratio-m,4/3)}
}
.hm-card{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100%;border-radius:var(--r-xl)}
.hm-bloom{inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(62,85,245,.34),rgba(62,85,245,.10) 50%,transparent 78%);opacity:1}
.hm-wave{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.hm-wave path{fill:none;stroke:var(--theta-400);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hm-wave .hm-echo{stroke-width:1;stroke-opacity:.3}
.hm-wave .hm-echo--2{stroke-opacity:.15}
.hm-uneven{opacity:0}
.hm-smooth{opacity:1}
.hm-ride{transform:translateY(-90px)}
.hm-dot{fill:var(--text-1)}
.hm-glow{transform-box:fill-box;transform-origin:center;opacity:.8}
.hm-label{position:absolute;top:clamp(14px,3%,22px);color:var(--text-1);opacity:1;letter-spacing:.04em;pointer-events:none}
.hm-label--in{left:clamp(16px,4%,26px)}
.hm-label--out{right:clamp(16px,4%,26px)}
.hm-pause{position:absolute;right:12px;bottom:12px}

@keyframes hm-scroll{from{transform:translateX(0)}to{transform:translateX(-400px)}}
/* trough (0) to peak (5 s) to trough (10 s): sine easing on each half */
@keyframes hm-ride{0%,100%{transform:translateY(0)}50%{transform:translateY(-180px)}}
@keyframes hm-glow{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.3);opacity:1}}
@keyframes hm-bloom{0%,100%{opacity:.94}50%{opacity:1}}
@keyframes hm-in{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes hm-out{0%,100%{opacity:1}50%{opacity:.35}}
/* settle: uneven trace for about 8 s, then 12 s into the pure sine; stays smooth */
@keyframes hm-uneven{0%,40%{opacity:1}100%{opacity:0}}
@keyframes hm-smooth{0%,40%{opacity:0}100%{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .hm-scroll{animation:hm-scroll 10s linear infinite}
  html:not([data-motion="off"]) .hm-ride{animation:hm-ride 10s cubic-bezier(.37,0,.63,1) infinite}
  html:not([data-motion="off"]) .hm-glow{animation:hm-glow 10s cubic-bezier(.37,0,.63,1) infinite}
  html:not([data-motion="off"]) .hm-bloom{animation:hm-bloom 10s cubic-bezier(.37,0,.63,1) infinite}
  html:not([data-motion="off"]) .hm-label--in{animation:hm-in 10s cubic-bezier(.37,0,.63,1) infinite}
  html:not([data-motion="off"]) .hm-label--out{animation:hm-out 10s cubic-bezier(.37,0,.63,1) infinite}
  html:not([data-motion="off"]) .hm-uneven{animation:hm-uneven 20s cubic-bezier(.45,0,.55,1) both}
  html:not([data-motion="off"]) .hm-smooth{animation:hm-smooth 20s cubic-bezier(.45,0,.55,1) both}
  .hm-card.is-paused *,.hm-card[data-in-view="false"] *{animation-play-state:paused!important}
}
/* the pause control is only useful while something moves */
html[data-motion="off"] .hm-pause{display:none}
@media (prefers-reduced-motion:reduce){.hm-pause{display:none}}

/* ---------- 3 · Note ---------- */
.hm-note{padding-block:clamp(40px,5vw,72px)}