/* ==========================================================================
   Healthy Sprays — v5 "Lift" enhancement layer (enhance.css + enhance.js)
   Additive only: tilt, spotlight, magnetic CTAs, steps timeline, read badges,
   image skeletons, MPA view transitions. No-JS and reduced-motion safe.
   ========================================================================== */

/* ---------- MPA view transitions (cross-fade + rise between pages) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .3s cubic-bezier(.22,.9,.28,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- 3D tilt (js wraps hero art in .tilt-wrap) ----------
   No glare overlay: a blend-mode layer over a transparent PNG cutout
   composites as a visible rectangle on gradient backgrounds. Tilt only. */
.hero-art{perspective:1000px}
.tilt-wrap{position:relative;transform-style:preserve-3d;
  transition:transform .18s cubic-bezier(.22,.9,.28,1)}

/* ---------- cursor spotlight on cards ---------- */
@media(pointer:fine){
  .card::after,.prod::after,.step::after,.plan::after{content:"";position:absolute;inset:0;
    border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
    background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(15,118,110,.10),transparent 65%)}
  .card.spot::after,.prod.spot::after,.step.spot::after,.plan.spot::after{opacity:1}
}

/* ---------- magnetic CTAs (independent translate — never fights .btn:hover transform) ---------- */
@media(pointer:fine){
  .btn{translate:var(--magx,0) var(--magy,0);transition-property:transform,box-shadow,translate;
    transition-duration:.25s;transition-timing-function:cubic-bezier(.22,.9,.28,1)}
}

/* ---------- how-it-works steps: connector line draws itself ---------- */
.steps{position:relative}
.steps .steps-line{position:absolute;left:6%;right:6%;top:calc(1.7rem + 25px);height:3px;
  border-radius:99px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,var(--teal,#0F766E),#34D399 55%,var(--gold,#F4A82C));
  transform:scaleX(0);transform-origin:left center;opacity:.55}
.steps.go .steps-line{animation:lineDraw 1.1s cubic-bezier(.22,.9,.28,1) .15s forwards}
@keyframes lineDraw{to{transform:scaleX(1)}}
.steps .step{z-index:1}
.steps.go .step .num{animation:numPop .55s cubic-bezier(.34,1.56,.64,1) both}
.steps.go .step:nth-child(1) .num{animation-delay:.2s}
.steps.go .step:nth-child(2) .num{animation-delay:.55s}
.steps.go .step:nth-child(3) .num{animation-delay:.9s}
@keyframes numPop{0%{transform:scale(.6);box-shadow:0 0 0 0 rgba(52,211,153,.5)}
  60%{transform:scale(1.12)}100%{transform:scale(1);box-shadow:0 0 0 12px rgba(52,211,153,0)}}
@media(max-width:760px){.steps .steps-line{display:none}}
@media(prefers-reduced-motion:reduce){
  .steps .steps-line{transform:none;animation:none}
  .steps.go .step .num{animation:none}
}

/* ---------- read-time badge on learn articles ---------- */
.read-badge{display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 0 1rem;
  padding:.32rem .75rem;border-radius:99px;font-size:.76rem;font-weight:600;
  color:var(--teal,#0F766E);background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.16)}
.read-badge svg{flex:0 0 auto}

/* ---------- image skeleton shimmer while loading ---------- */
.img-skel{background:linear-gradient(100deg,#EDF3EF 40%,#F7FBF8 50%,#EDF3EF 60%);
  background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
@keyframes skel{from{background-position:120% 0}to{background-position:-80% 0}}
@media(prefers-reduced-motion:reduce){.img-skel{animation:none}}