/* ============================================================================
   WALES WILSON PLUMBING — "HOT WATER" motion layer                    (2026-09-15)
   Canvas scenes live in hotwater.js (tank, leak). Here: headings rise like a line
   priming, with a small overfill; the copper phrase gets a solder bead that runs;
   content wells up; the elbow mark draws itself; a drip lands on the band.
   ========================================================================== */

.tankw{position:relative;width:100%;aspect-ratio:3/4;max-width:24rem;justify-self:center;border-radius:6rem 6rem 14px 14px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.tankw canvas{position:absolute;inset:0;width:100%;height:100%}
.leak__stage{position:relative;width:100%;aspect-ratio:4/3;max-width:32rem;justify-self:center;border-radius:10px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.leak__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. prime */
.js .prime{opacity:0}
.js .prime.in{animation:prime .7s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes prime{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 2. the solder bead */
.js .prime .y{position:relative;display:inline-block}
.js .prime .y::after{content:"";position:absolute;left:0;bottom:-.08em;height:.1em;width:0;border-radius:1em;background:linear-gradient(90deg,var(--acc),var(--acc-lite))}
.js .prime.in .y::after{animation:bead .8s cubic-bezier(.2,.8,.2,1) .45s forwards}
@keyframes bead{to{width:100%}}

/* 3. well up */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:well .55s cubic-bezier(.3,1.2,.5,1) forwards}
.js .fx.d1.in{animation-delay:.08s}.js .fx.d2.in{animation-delay:.16s}.js .fx.d3.in{animation-delay:.24s}.js .fx.d4.in{animation-delay:.32s}
@keyframes well{to{opacity:1;transform:none}}
.js .fx.prime{transform:none}
.js .fx.prime.in{animation:prime .7s cubic-bezier(.3,1.3,.5,1) forwards}

/* 4. the elbow draws itself */
.motif{width:6.5rem;color:var(--acc-lite);margin-bottom:1.2rem}
.js .motif path{stroke-dasharray:150;stroke-dashoffset:150}
.js .motif.in path{animation:drawelbow 1.1s cubic-bezier(.3,.8,.3,1) forwards}
.js .motif.in .m2{animation-delay:.35s}.js .motif.in .m3{animation-delay:.7s}
@keyframes drawelbow{to{stroke-dashoffset:0}}

/* 5. a drip on the band */
.band{position:relative;overflow:hidden}
.band::after{content:"";position:absolute;left:50%;top:-.6rem;width:.5rem;height:.7rem;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:var(--acc-lite);opacity:0;animation:drip 6s ease-in infinite}
@keyframes drip{0%,78%{opacity:0;transform:translateY(0)}80%{opacity:1}92%{opacity:1;transform:translateY(3.2rem)}100%{opacity:0;transform:translateY(3.2rem) scaleX(1.8)}}

/* 6. pinned stage */
.leak.is-pinned .leak__pin{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.leak.is-pinned .stage{opacity:.3;transition:opacity .35s ease,transform .35s cubic-bezier(.25,.85,.2,1);transform:translateX(-8px)}
.leak.is-pinned .stage.is-on{opacity:1;transform:none}
.leak.is-pinned .stage.is-done{opacity:.6;transform:none}
.leak.is-flat .stage{opacity:.55;transition:opacity .35s}
.leak.is-flat .stage.is-on{opacity:1}

/* 7. surfaces */
.twin,.card,.chapter,.ph{transition:transform .3s cubic-bezier(.3,1.2,.5,1),box-shadow .3s,border-color .3s}
.twin:hover,.card:hover{border-color:var(--acc)}
.ph img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ph:hover img{transform:scale(1.03)}
.btn{transition:transform .2s cubic-bezier(.3,1.2,.5,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 26px -12px rgba(27,58,42,.7)}
.hd__phone svg{transform-origin:50% 60%}
.hd__phone:hover svg{animation:ring .5s ease-in-out 2}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}

@media (prefers-reduced-motion:reduce){
  .js .prime,.js .prime.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .js .prime .y::after,.js .prime.in .y::after{width:100%;animation:none}
  .js .motif path{stroke-dashoffset:0;animation:none}
  .band::after{animation:none;opacity:0}
  .hd__phone:hover svg{animation:none}
  .twin:hover,.card:hover,.ph:hover img{transform:none}
}