/* Homepage motion: breathing light, drawn icons, connecting line, living glow, pointer glow.
   Everything here is decorative and switches off with prefers-reduced-motion. Loaded only on "/". */

/* 1. The hero breathes: a 10-second cycle (about 4s in, 6s out). The photo itself stays still and crisp;
      only the warm light behind the headline and the cue label breathe. */
@media (prefers-reduced-motion: no-preference) {
  .hero-full::after { content: ""; position: absolute; left: -12%; top: 12%; width: 72%; height: 76%; z-index: 1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(220,187,162,.20), rgba(220,187,162,0)); animation: hmGlow 10s ease-in-out infinite; }
  @keyframes hmGlow { 0% { opacity: .35; transform: scale(.94); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: .35; transform: scale(.94); } }
  .hero-meta .hm-scroll { transition: opacity .5s; min-width: 7.5em; justify-content: flex-end; }
  .hero-meta .hm-scroll.is-swap { opacity: 0; }
}

/* 2. The four method icons draw themselves (stroke offsets are set from script) */
.over-hero.hm .step.hm-in .step-icon svg path, .over-hero.hm .step.hm-in .step-icon svg circle { stroke-dashoffset: 0 !important; transition: stroke-dashoffset 2s cubic-bezier(.45,.05,.25,1); transition-delay: calc(var(--k, 0) * 120ms + 250ms); }

/* 3. Pointer-follow glow on the method and path cards */
.path { position: relative; }
.hm-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,236,218,.30), rgba(255,236,218,0) 62%); }
.step:hover > .hm-glow, .path:hover > .hm-glow { opacity: 1; }
.path > .hm-glow { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(220,187,162,.34), rgba(220,187,162,0) 62%); }

/* 4. Sage bands get a slow, living light */
@media (prefers-reduced-motion: no-preference) {
  .over-hero .section--sage { overflow: clip; }
  .over-hero .section--sage::before { content: ""; position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none; opacity: .9;
    background: radial-gradient(38% 46% at 18% 30%, rgba(220,187,162,.15), transparent 70%), radial-gradient(34% 42% at 82% 72%, rgba(176,125,92,.16), transparent 70%);
    animation: hmDrift 26s ease-in-out infinite alternate; }
  @keyframes hmDrift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(4%, 3%, 0); } }
  .over-hero .section--sage > .wrap { position: relative; z-index: 1; }
}

/* A decorative portrait outline pushes the page 5px wider than a phone screen; clip it so the page doesn't wobble sideways */
.over-hero main { overflow-x: clip; }

/* 5. The connecting line: a progress rail through the four method steps */
.hm-journey { position: relative; }
.hm-journey .steps { margin-top: 0; }
.hm-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 3rem 0 20px; position: relative; z-index: 5; }
.hm-cell { position: relative; height: 48px; }
.hm-node { position: absolute; left: 30px; top: 27px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(140,87,55,.42); background: var(--cream); transition: background-color .5s, border-color .5s, box-shadow .6s; z-index: 2; }
.hm-num { position: absolute; left: 29px; top: 1px; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1; color: rgba(103,95,83,.55); transition: color .5s; }
.hm-cell.on .hm-node { background: var(--rust); border-color: var(--rust); box-shadow: 0 0 0 6px rgba(140,87,55,.14); }
.hm-cell.on .hm-num { color: var(--rust); }
.hm-seg { position: absolute; left: 42px; top: 32.5px; height: 1px; width: calc(100% + 20px - 12px); background: rgba(140,87,55,.22); }
.hm-fill { position: absolute; inset: -.5px 0 -.5px 0; background: var(--rust); transform-origin: left; transform: scaleX(var(--f, 0)); }
.hm-head { position: absolute; top: 50%; left: calc(var(--f, 0) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #e9b896; box-shadow: 0 0 0 4px rgba(233,184,150,.35), 0 0 14px 3px rgba(233,184,150,.8); opacity: 0; transition: opacity .3s; }
.hm-seg.live .hm-head { opacity: 1; }
.hm-cell:last-child .hm-seg { display: none; }
@media (max-width: 1099px) {
  .hm-rail { position: sticky; top: var(--stick, 100px); margin: 2.4rem 0 14px; padding-top: 6px; background: linear-gradient(180deg, var(--cream) 78%, rgba(242,240,235,0)); }
  .hm-node { left: 0; } .hm-num { left: -1px; } .hm-seg { left: 12px; width: calc(100% + 20px - 12px); }
}
@media (max-width: 460px) { .hm-rail { gap: 8px; } .hm-seg { width: calc(100% + 8px - 12px); } .hm-num { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .hm-rail { display: none; } }