/* Hallmark · macrostructure: restrained content reveal · genre: modern-minimal · tone: precise · theme: existing Rely editorial system
   Rely Health — motion layer.
   Pairs with assets/motion.js and lib/blocks/motion.mjs. Load after site.css.

   THE CONTRACT (site.css lines 925-944, honoured here without exception):
     * `.motion-reveal` rests VISIBLE. It exists so the reduced-motion carve-out
       has something to target.
     * `.motion-pending` is the offset state and is applied by script ONLY after
       the script has confirmed motion is allowed. Content remains painted.
     * `.motion-pending.is-in` is the revealed state.
   Consequence: with JavaScript off, disabled, blocked or broken, no rule in this
   file can hide anything. Every selector below either restyles an element the
   script has already marked, or styles a component that is complete at rest.

   Everything animated here is transform, opacity or stroke-dashoffset. No width,
   height, top or left is ever animated, so nothing in this file can shift layout.
*/

/* ============================================================
   1 · Section entry reveal
   Overrides the 12px/500ms default in site.css with the motion budget:
   a short rise, ~340ms, once, never reversed. Stagger is applied by the
   script as an inline transition-delay, capped at 180ms, so a lone element
   entering on its own never waits.
   ============================================================ */
.motion-pending{
  opacity:1;
  transform:translate3d(0,8px,0);
  transition:transform 340ms var(--ease);
}
.motion-pending.is-in{opacity:1;transform:none}

/* The steps rail is the one list on the site that is a diagram rather than
   prose, so its connector is allowed to draw itself in behind the item. */
.steps>li.motion-pending::before{
  transform:scaleY(0);transform-origin:top center;
  transition:transform 420ms var(--ease) 140ms;
}
.steps>li.motion-pending.is-in::before{transform:scaleY(1)}
.steps>li.motion-pending .step-mark{
  transform:scale(.94);
  transition:transform 340ms var(--ease);
}
.steps>li.motion-pending.is-in .step-mark{transform:none}

/* ============================================================
   2 · Hard guards
   Independent of the script. These cover the three ways an element could
   otherwise be stranded in its start state: the preference flipping while
   a class is already applied, printing, and a script that dies between
   marking an element and revealing it.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .motion-pending,
  .motion-pending.is-in{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .steps>li.motion-pending::before,
  .steps>li.motion-pending .step-mark{transform:none !important;transition:none !important}
  .motion-ambient{display:none !important}
  .casepath-stage .cp-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important}
  .casepath-stage .cp-node,
  .casepath-stage .cp-chev,
  .casepath-stage .cp-dot{opacity:1 !important;transform:none !important;transition:none !important}
}

/* Healthcare buyers print and forward. A page that does not paint without
   scroll does not print, so print resolves every reveal to its finished state. */
@media print{
  .motion-pending,
  .motion-pending.is-in{opacity:1 !important;transform:none !important}
  .steps>li.motion-pending::before,
  .steps>li.motion-pending .step-mark{transform:none !important}
  .motion-ambient{display:none !important}
  .casepath-stage .cp-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .casepath-stage .cp-node,
  .casepath-stage .cp-chev,
  .casepath-stage .cp-dot{opacity:1 !important;transform:none !important}
}

/* ============================================================
   4 · Case path figure (lib/blocks/motion.mjs, block type `casepath`)
   Complete and legible frozen. The drawing is the finished drawing; the
   animation only controls how it arrives. Below 900px the drawing is
   replaced by the ordered list, which is in the DOM at every width and is
   what assistive technology reads at every width.
   ============================================================ */
.casepath{margin:0}
.casepath-stage{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-1);
  padding:clamp(1.1rem,.7rem + 1.4vw,2rem);
}
.casepath-svg{display:block;width:100%;height:auto}

.casepath-svg text{font-family:var(--sans);text-anchor:middle}
.casepath-svg .cp-label{font-size:13px;font-weight:800;fill:var(--ink)}
.casepath-svg .cp-label-2{font-size:11.5px;font-weight:600;fill:var(--ink-2)}
.casepath-svg .cp-lane{font-size:9.5px;font-weight:800;letter-spacing:.13em;fill:var(--ink-3)}

.casepath-svg .cp-line{fill:none;stroke-width:2;stroke-linecap:round;stroke:var(--brand-line)}
.casepath-svg .cp-line-lic{stroke:var(--ok);opacity:.5}
.casepath-svg .cp-line-nav{stroke:var(--clay);opacity:.5}
.casepath-svg .cp-chev{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.casepath-svg .cp-chev-lic{stroke:var(--ok);opacity:.7}
.casepath-svg .cp-chev-nav{stroke:var(--clay);opacity:.7}
.casepath-svg .cp-junction{fill:var(--line-2)}

.casepath-svg .cp-dot{stroke:var(--surface);stroke-width:3}
.casepath-svg .cp-ring{fill:none;stroke-width:1;opacity:.4}
.casepath-svg .cp-sys .cp-dot{fill:var(--ink-3)}
.casepath-svg .cp-sys .cp-ring{stroke:var(--ink-3)}
.casepath-svg .cp-ai .cp-dot{fill:var(--brand)}
.casepath-svg .cp-ai .cp-ring{stroke:var(--brand)}
.casepath-svg .cp-nav .cp-dot{fill:var(--clay)}
.casepath-svg .cp-nav .cp-ring{stroke:var(--clay)}
.casepath-svg .cp-lic .cp-dot{fill:var(--ok)}
.casepath-svg .cp-lic .cp-ring{stroke:var(--ok)}

/* The draw. Only ever active while the script's `.motion-pending` is on the
   stage; the resting styles above are the finished figure. `--len`, `--dur`
   and `--d` are authored per element in lib/blocks/motion.mjs. */
.casepath-stage.motion-pending .cp-line{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
}
.casepath-stage.motion-pending.is-in .cp-line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset var(--dur,520ms) var(--ease) var(--d,0ms);
}
.casepath-stage.motion-pending .cp-node,
.casepath-stage.motion-pending .cp-chev,
.casepath-stage.motion-pending .cp-junction{opacity:0}
.casepath-stage.motion-pending.is-in .cp-node,
.casepath-stage.motion-pending.is-in .cp-chev,
.casepath-stage.motion-pending.is-in .cp-junction{
  opacity:1;transition:opacity 260ms var(--ease) var(--d,0ms);
}
.casepath-stage.motion-pending .cp-line-nav,
.casepath-stage.motion-pending .cp-line-lic{opacity:.5}
.casepath-stage.motion-pending .cp-chev-nav,
.casepath-stage.motion-pending .cp-chev-lic{opacity:0}
.casepath-stage.motion-pending.is-in .cp-chev-nav,
.casepath-stage.motion-pending.is-in .cp-chev-lic{opacity:.7}
.casepath-stage.motion-pending .cp-dot{
  transform:scale(.55);transform-box:fill-box;transform-origin:center;
}
.casepath-stage.motion-pending.is-in .cp-dot{
  transform:none;transition:transform 340ms var(--ease) var(--d,0ms);
}

/* The ordered list is the accessible and small-screen form of the same path.
   Visually hidden while the drawing is on screen, never hidden from AT. */
.casepath-list{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.casepath-caption{margin-top:1.35rem}
.casepath-key{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.6rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
}
.casepath-key li{
  position:relative;padding-left:1.35rem;
  font-size:var(--t--1);line-height:1.5;color:var(--ink-2);
}
.casepath-key li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink-3));
}
.casepath-key b{color:var(--ink);font-weight:800}
.casepath-key .k-sys{--c:var(--ink-3)}
.casepath-key .k-ai{--c:var(--brand)}
.casepath-key .k-nav{--c:var(--clay)}
.casepath-key .k-lic{--c:var(--ok)}
.casepath-caption .note{margin-top:1.1rem}
.casepath-caption .tag{margin-top:1rem}

/* Below the width where 13px SVG type stays readable, the drawing steps aside
   and the list becomes the figure: same nodes, same colours, same fork. */
@media (max-width:899px){
  .casepath-svg{display:none}
  .casepath-list{
    position:static;width:auto;height:auto;
    margin:0;padding:0;overflow:visible;
    clip:auto;white-space:normal;
    list-style:none;display:grid;gap:1.35rem;
  }
  .casepath-list li{position:relative;padding-left:1.9rem}
  .casepath-list li::before{
    content:"";position:absolute;left:0;top:.34em;
    width:11px;height:11px;border-radius:50%;
    background:var(--c,var(--ink-3));
    box-shadow:0 0 0 3px var(--surface);
  }
  .casepath-list li::after{
    content:"";position:absolute;left:5px;top:1.35em;bottom:-1.35rem;
    width:1px;background:var(--line-2);
  }
  .casepath-list li:last-child::after{display:none}
  .casepath-list .cp-li-sys{--c:var(--ink-3)}
  .casepath-list .cp-li-ai{--c:var(--brand)}
  .casepath-list .cp-li-nav{--c:var(--clay)}
  .casepath-list .cp-li-lic{--c:var(--ok)}
  .casepath-list .cp-li-branch{margin-left:1.15rem}
  .cp-li-lane{
    display:block;
    font-size:var(--t--2);font-weight:800;
    letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:.2rem;
  }
  .cp-li-state{display:block;font-weight:800;color:var(--ink);line-height:1.35}
  .cp-li-actor{
    display:block;
    font-size:var(--t--2);font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-3);margin-top:.15rem;
  }
  .cp-li-note{
    display:block;margin-top:.3rem;
    font-size:.9375rem;line-height:1.55;color:var(--ink-2);
  }
}