/* DoseWise motion test (2026-10-05), loaded after site.css on /dosewise/test/.
   Calm and precise, like a record you can trust: slow, small entrances with no bounce,
   screens that push like the app's own navigation, ruled log-book lines behind the phone,
   a page indicator under it, checkmarks that draw themselves, and a supply example that
   takes one capsule.
   html.motion-on comes from the inline <head> script unless reduced motion is requested;
   html.motion-ready comes from motion.js. Hidden starting states need both. */
:root{--dw-calm:cubic-bezier(.45,0,.2,1);--dw-settle:cubic-bezier(.22,1,.36,1)}

/* ---------------------------------------------------------------- Entrances */
/* The hero plays one beat at a time, so nothing competes with “Probably.”:
   the icon (0.1 s), then the kicker and “You took it.” (0.8 s), then the hesitation typed
   out as “...” one dot at a time (1.5 s), then “Probably.” comes into focus after it
   (2.65 s), and finally the paragraph and scroll cue (3.3 s).
   The icon is rebuilt from its Icon Composer layers (the gradient from icon.json and the
   pill artwork) and simply settles in; it does not move on its own. */
.dw-icon{position:relative;display:block;flex:none;width:clamp(4.75rem,9vw,6.5rem);aspect-ratio:1;margin:0 0 1.75rem;overflow:hidden;border-radius:22.5%;background:linear-gradient(#6365e9,#5059ab);box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 1px 0 #ffffff40,0 14px 34px #3a3f8640}
@supports (color:color(display-p3 0 0 0)){.dw-icon{background:linear-gradient(color(display-p3 .39017 .39948 .91286),color(display-p3 .31807 .35166 .66843))}}
.dw-icon-pill{position:absolute;left:12.7%;top:13.72%;width:74.56%;height:74.56%;filter:drop-shadow(0 .3rem .35rem #1d1f5a59)}
.motion-on .hook h1{position:relative}
.motion-on .dw-icon{animation:dw-rise 700ms var(--dw-settle) 100ms both}
.motion-on .hook .kicker,.motion-on .hook h1{animation:dw-rise 700ms var(--dw-settle) 800ms both}
.hook h1 i{font-style:normal}
.motion-on .hook h1 .dw-wait>i{animation:dw-fade 1ms steps(1,end) both}
.motion-on .hook h1 .dw-wait>i:nth-child(1){animation-delay:1500ms}
.motion-on .hook h1 .dw-wait>i:nth-child(2){animation-delay:1850ms}
.motion-on .hook h1 .dw-wait>i:nth-child(3){animation-delay:2200ms}
.motion-on .hook h1 .dw-word{display:inline-block;animation:dw-doubt 1100ms var(--dw-settle) 2650ms both}
.motion-on .hook .lead,.motion-on .hook .scroll-cue{animation:dw-fade 700ms ease 3300ms both}
@keyframes dw-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes dw-doubt{from{opacity:0;filter:blur(10px)}}
@keyframes dw-fade{from{opacity:0}}

.motion-on.reveal-ready .moments [data-reveal],.motion-on.reveal-ready .punchline[data-reveal],.motion-on.reveal-ready .usual-grid [data-reveal]{opacity:0;transform:translateY(8px)}
.motion-on.reveal-ready [data-reveal].is-visible{opacity:1;transform:none;transition:opacity 800ms ease,transform 1000ms var(--dw-settle)}
.motion-on.reveal-ready .usual-grid li:nth-child(2).is-visible{transition-delay:120ms}
.motion-on.reveal-ready .usual-grid li:nth-child(3).is-visible{transition-delay:240ms}
.motion-on.reveal-ready .stage-inner[data-reveal]{opacity:0;transform:none}
.motion-on.reveal-ready .stage-inner[data-reveal].is-visible{opacity:1;transform:none;transition:opacity 900ms ease}

/* Screens change the way the app navigates: the next screen pushes in from the right while
   the current one slides back a little and dims; scrolling up reverses it. motion.js runs
   the push; CSS only keeps the leaving screen visible meanwhile. */
.motion-on .stage .device-screen>.screen{filter:none;transform:none;opacity:0;transition:none}
.motion-on .stage .device-screen>.screen[data-active],.motion-on .stage .device-screen>.screen[data-leaving]{opacity:1}

/* --------------------------------------------- Stage: log-book lines and log */
.motion-ready .stage-inner::before{width:150%;border:0;border-radius:0;box-shadow:none;background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--dw-rule) 31px 32px);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.motion-ready{--dw-rule:color-mix(in srgb,var(--accent) 22%,transparent)}
.motion-on.motion-ready .stage-inner::before{clip-path:inset(0 100% 0 0)}
.motion-on.motion-ready .stage-inner.is-visible::before{clip-path:inset(0);transition:clip-path 1600ms var(--dw-calm) 300ms}

/* Under the phone: the screen's name over an iOS-style page indicator whose active dot
   stretches into a small pill and glides along. site.js moves the dot; motion.js the name. */
.motion-ready .stage-device{--device-w:min(340px,calc((100svh - 15.5rem) * .4719))}
.dw-pager{display:grid;justify-items:center;gap:.75rem}
.dw-pager-label{margin:0;color:var(--ink);font-size:.9375rem;font-weight:750;line-height:1.2;letter-spacing:-.01em}
.dw-pager .stage-steps{gap:.4rem;padding:0;border-radius:0;background:none;box-shadow:none;font-size:0}
.dw-pager .stage-steps li{width:.45rem;height:.45rem;padding:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 35%,transparent);transition:width 450ms var(--dw-settle),background-color 300ms ease}
.dw-pager .stage-steps li[data-active]{width:1.6rem;background:var(--accent)}

/* ------------------------------------------------- Checkmarks draw themselves */
/* The check is a rotated L: draw the short foot left to right, then the long stroke up. */
.motion-on.motion-ready .chapter .facts li::before{clip-path:inset(80% 100% 0 0)}
.motion-on.motion-ready .chapter.is-checked .facts li::before{animation:dw-check 560ms var(--dw-calm) 200ms forwards}
.motion-on.motion-ready .chapter.is-checked .facts li:nth-child(2)::before{animation-delay:380ms}
.motion-on.motion-ready .chapter.is-checked .facts li:nth-child(3)::before{animation-delay:560ms}
@keyframes dw-check{35%{clip-path:inset(80% 0 0 0)}100%{clip-path:inset(0)}}

/* ------------------------------------------------- Supply: one capsule taken */
.dw-supply{max-width:22rem;margin:1.75rem 0 0;padding:1.1rem 1.25rem 1.25rem;border-radius:1.25rem;background:var(--surface);box-shadow:var(--shadow-soft)}
.dw-supply-name{margin:0;color:var(--muted);font-size:.75rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.dw-supply-counts{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;margin:.35rem 0 0;color:var(--muted);font-size:.9375rem;font-weight:650}
.dw-num{display:inline-block;min-width:1.2ch;color:var(--ink);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dw-capsules{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:.45rem .4rem;margin-top:.9rem}
.dw-capsules i{position:relative;aspect-ratio:1/2.2;border-radius:999px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--muted) 40%,transparent)}
.dw-capsules i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,var(--accent) 50%,color-mix(in srgb,var(--accent) 38%,var(--surface)) 50%);opacity:0;transition:opacity 700ms var(--dw-calm)}
.dw-capsules i.is-full::before{opacity:1}
.dw-capsules i.is-taking{animation:dw-take 700ms var(--dw-settle)}
@keyframes dw-take{35%{transform:translateY(-5px) scale(1.12)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .dw-pager .stage-steps li,.dw-capsules i::before{transition:none}
}