/* ============================================================================
   W.C. WALTMAN PLUMBING — "THE CLEAR" motion layer                  (2026-09-15)
   Canvas instruments live in clear.js (line, camera). Here: headings clear from
   the top down the way a blockage lets go; the accent phrase gets one jet run
   along its underline; content surges in; the pipe-run motif draws itself.
   ========================================================================== */

.line{position:relative;width:100%;height:clamp(11rem,22vw,16rem);overflow:hidden;border-top:1px solid var(--line-w);border-bottom:1px solid var(--line-w)}
.line canvas{position:absolute;inset:0;width:100%;height:100%}
.camera__stage{position:relative;width:100%;aspect-ratio:4/3;max-width:30rem;justify-self:center;border-radius:12px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.camera__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. headings clear top-down */
.js .clear{opacity:0}
.js .clear.in{animation:cleartop .72s cubic-bezier(.25,.9,.25,1) forwards}
@keyframes cleartop{from{clip-path:inset(0 0 100% 0);opacity:1;transform:translateY(-6px)}to{clip-path:inset(0 0 0 0);opacity:1;transform:none}}

/* 2. one jet run along the accent */
.js .clear .y{position:relative;display:inline-block}
.js .clear .y::after{content:"";position:absolute;left:0;bottom:-.08em;height:.09em;width:0;background:linear-gradient(90deg,var(--aqua-lite),var(--aqua));border-radius:2px}
.js .clear.in .y::after{animation:jet 1s cubic-bezier(.2,.9,.2,1) .5s forwards}
@keyframes jet{0%{width:0;opacity:1}70%{width:100%;opacity:1}100%{width:100%;opacity:.55}}

/* 3. content surges in */
.js .fx{opacity:0;transform:translateY(14px)}
.js .fx.in{animation:surge .5s cubic-bezier(.2,.9,.25,1) forwards}
.js .fx.d1.in{animation-delay:.07s}.js .fx.d2.in{animation-delay:.14s}.js .fx.d3.in{animation-delay:.21s}.js .fx.d4.in{animation-delay:.28s}
@keyframes surge{60%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:none}}
.js .fx.clear{transform:none}
.js .fx.clear.in{animation:cleartop .72s cubic-bezier(.25,.9,.25,1) forwards}

/* 4. the pipe-run motif draws itself */
.motif{width:6.5rem;color:var(--aqua-lite);margin-bottom:1.2rem}
.js .motif path,.js .motif circle{stroke-dasharray:160;stroke-dashoffset:160}
.js .motif.in path,.js .motif.in circle{animation:drawpipe 1.3s cubic-bezier(.3,.8,.3,1) forwards}
.js .motif.in .m2{animation-delay:.5s}.js .motif.in .m3{animation-delay:.9s}
@keyframes drawpipe{to{stroke-dashoffset:0}}

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

/* 6. surfaces */
.chart__row,.rev,.chapter,.roster__g{transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,background .25s}
.chart__row:not(.chart__row--h):hover{background:color-mix(in srgb,var(--aqua) 8%,#fff)}
.rev:hover,.roster__g:hover{}
.btn{transition:transform .2s cubic-bezier(.2,.9,.3,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 26px -12px rgba(31,154,166,.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 .clear,.js .clear.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none;clip-path:none}
  .js .clear .y::after,.js .clear.in .y::after{width:100%;opacity:.55;animation:none}
  .js .motif path,.js .motif circle{stroke-dashoffset:0;animation:none}
  .hd__phone:hover svg{animation:none}
  .rev:hover,.roster__g:hover{transform:none}
}