/* Be Well with Justin: motion for the homepage and /about.
   Every hidden or offset starting state is scoped under html.motion, which the
   inline <head> script adds only when JS runs and the visitor has not asked for
   reduced motion. Without it, everything is visible and static. Only transform,
   opacity and the ring's stroke-dashoffset animate, so layout never shifts. */

/* 1. Scroll reveal. Stagger delays are set per item by motion.js. */
html.motion [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease-out, transform .6s ease-out; }
html.motion [data-reveal].in{ opacity:1; transform:none; }

/* Hero: a translate-only rise on load. Opacity never starts at 0 (the H1 is the LCP). */
@keyframes bw-rise{ from{ transform:translateY(14px); } to{ transform:none; } }
html.motion .hero .eyebrow,
html.motion .hero .ab-byline,
html.motion .hero h1,
html.motion .hero .sub,
html.motion .hero .support{ animation:bw-rise .7s ease-out both; }
html.motion .hero h1{ animation-delay:.04s; }
html.motion .hero .sub{ animation-delay:.12s; }
html.motion .hero .support{ animation-delay:.2s; }

/* 2. Logo: the three leaves grow from their base, centre leaf first. */
@keyframes bw-leaf{ from{ transform:scale(0); } to{ transform:none; } }
html.motion .site-header .brand svg path{ transform-box:fill-box; transform-origin:50% 100%; animation:bw-leaf .6s ease-out both; }
html.motion .site-header .brand svg path:nth-child(3){ animation-delay:.05s; }
html.motion .site-header .brand svg path:nth-child(1){ animation-delay:.2s; }
html.motion .site-header .brand svg path:nth-child(2){ animation-delay:.3s; }

/* 3. Plan step rings: an SVG stroke draws over the ring, then the ring's own
   CSS border takes over (.drawn), so the finished ring is the static one.
   The overlay is hidden unless motion is on. */
.ring-draw{ display:none; }
html.motion .ring{ position:relative; border-color:transparent; }
html.motion .ring .ring-draw{ display:block; position:absolute; top:-6px; left:-6px; width:calc(100% + 12px); height:calc(100% + 12px); transform:rotate(-90deg); overflow:visible; pointer-events:none; }
html.motion .ring-draw circle{ fill:none; stroke:#2F3D60; stroke-width:6; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .8s ease-out .15s; }
html.motion .step.in .ring-draw circle{ stroke-dashoffset:0; }
html.motion .ring.drawn{ border-color:var(--brand-navy); }
html.motion .ring.drawn .ring-draw{ display:none; }

/* 4. Phone plan timeline: the connector grows down as its step arrives. */
html.motion .step-line{ transform:scaleY(0); transform-origin:top; transition:transform .8s ease-out .25s; }
html.motion .step.in .step-line{ transform:none; }

/* 5. Testimonial quote marks: a small pop as each card arrives. */
html.motion .quote svg{ transform:scale(.6); transition:transform .5s ease-out .15s; }
html.motion .quote.in svg{ transform:none; }

/* 6. Lead-offer graphic: rise and settle. */
html.motion .audit-img[data-reveal]{ transform:translateY(24px) rotate(-3deg); transition:opacity .8s ease-out, transform .8s ease-out; }
html.motion .audit-img[data-reveal].in{ transform:none; }

/* 7. Scroll progress: 3px mint bar directly under the sticky header. */
html.motion .site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; background:#4FC9A0; transform-origin:0 50%; transform:scaleX(var(--bw-progress,0)); pointer-events:none; }

/* 8. Buttons: hover and focus lift. The existing focus outline is untouched. */
html.motion .btn{ transition:background .15s, transform .15s ease-out, box-shadow .15s ease-out; }
html.motion .learn-link{ transition:background .15s, color .15s, transform .15s ease-out, box-shadow .15s ease-out; }
html.motion .btn:hover,
html.motion .btn:focus-visible,
html.motion .learn-link:hover,
html.motion .learn-link:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(30,52,99,.18); }

@media (max-width: 640px){
  html.motion .ring .ring-draw{ top:-4px; left:-4px; width:calc(100% + 8px); height:calc(100% + 8px); }
}

/* Revealed with no transition: already above the viewport, or a deep link (motion.js adds .instant). */
html.motion [data-reveal].instant,
html.motion [data-reveal].instant *{ transition:none !important; }

/* Print: everything visible and static, no progress bar. */
@media print{
  html.motion [data-reveal],
  html.motion [data-reveal] *{ opacity:1 !important; transform:none !important; transition:none !important; }
  html.motion .ring{ border-color:var(--brand-navy) !important; }
  html.motion .ring .ring-draw{ display:none !important; }
  html.motion .site-header .brand svg path,
  html.motion .hero .eyebrow, html.motion .hero .ab-byline, html.motion .hero h1, html.motion .hero .sub, html.motion .hero .support{ animation:none !important; }
  html.motion .site-header::after{ display:none !important; }
}