/* ============================================================================
   PLUMB TECH — "PRESSURE" motion layer                              (2026-09-15)
   Canvas instruments live in pressure.js (sink, run). Here: headlines come up
   to a reading and hold (one overshoot, then still), the accent phrase carries a
   copper rule that fills like a line pressurizing, content settles, tags swing
   once on hover. A system that is right does not move.
   ========================================================================== */

.sinkw{position:relative;width:100%;aspect-ratio:4/5;max-width:26rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.sinkw canvas{position:absolute;inset:0;width:100%;height:100%}
.run__stage{position:relative;width:100%;aspect-ratio:16/10;max-width:34rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.run__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. comes up, overshoots once, holds */
.js .hold{opacity:0}
.js .hold.in{animation:hold .8s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes hold{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}

/* 2. the copper rule pressurizes */
.js .hold .y{position:relative;display:inline-block}
.js .hold .y::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.1em;background:var(--copper);transform:scaleX(0);transform-origin:0 50%}
.js .hold.in .y::after{animation:fill .8s cubic-bezier(.2,1.3,.4,1) .4s forwards}
@keyframes fill{to{transform:scaleX(1)}}

/* 3. settle */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:settle .55s cubic-bezier(.2,1.3,.4,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 settle{to{opacity:1;transform:none}}

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

/* 5. service tags swing once */
.tag{transform-origin:1.2rem .6rem;transition:transform .5s cubic-bezier(.2,1.4,.4,1),box-shadow .3s}
.tag:hover{transform:rotate(-1.5deg);box-shadow:0 22px 44px -28px rgba(0,0,0,.4)}
.rev,.chapter{transition:transform .28s cubic-bezier(.2,1.3,.4,1),box-shadow .3s,border-color .28s}
.rev:hover{border-color:var(--copper)}
.btn{transition:transform .22s cubic-bezier(.2,1.3,.4,1),box-shadow .22s,background .22s,color .22s}
.btn--ink:hover{}

@media (prefers-reduced-motion:reduce){
  .js .hold,.js .hold.in{opacity:1;transform:none;animation:none}
  .js .hold.in .y::after{animation:none;transform:scaleX(1)}
  .js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .tag:hover,.rev:hover,.btn--ink:hover{transform:none}
}