/* ============================================================================
   PASCAGOULA SHEET METAL — "SHEAR, BRAKE, ROLL" motion layer          (2026-09-15)
   Canvas scenes live in shear.js (sheet, plasma). Here: headings come down like a
   shear blade and stop; the orange phrase gets a plasma cut that burns across;
   content is set on the bench; the brake-profile mark draws; spec plates stamp.
   ========================================================================== */

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

/* 1. the blade */
.js .blade{opacity:0}
.js .blade.in{animation:blade .55s cubic-bezier(.3,.9,.2,1) forwards}
@keyframes blade{from{opacity:0;transform:translateY(-16px)}70%{opacity:1;transform:translateY(2px)}to{opacity:1;transform:none}}

/* 2. the plasma cut */
.js .blade .y{position:relative;display:inline-block}
.js .blade .y::after{content:"";position:absolute;left:0;bottom:-.08em;height:.09em;width:0;background:linear-gradient(90deg,var(--acc),var(--acc-lite));box-shadow:0 0 .4em rgba(245,138,75,.7)}
.js .blade.in .y::after{animation:cut 1s cubic-bezier(.4,0,.2,1) .45s forwards}
@keyframes cut{0%{width:0}85%{width:100%;box-shadow:0 0 .4em rgba(245,138,75,.7)}100%{width:100%;box-shadow:none}}

/* 3. set on the bench */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:setdown .45s cubic-bezier(.2,.9,.3,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 setdown{to{opacity:1;transform:none}}
.js .fx.blade{transform:none}
.js .fx.blade.in{animation:blade .55s cubic-bezier(.3,.9,.2,1) forwards}

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

/* 5. spec plates stamp */
.js .spec{opacity:0}
.js .spec.in{animation:stamp .45s cubic-bezier(.3,1.4,.5,1) forwards}
.js .spec.d1.in{animation-delay:.1s}.js .spec.d2.in{animation-delay:.2s}
@keyframes stamp{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}

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

/* 7. surfaces */
.spec,.rev,.chapter,.ph,.year{transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s}
.spec:hover,.chapter: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(.2,.9,.3,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 26px -12px rgba(194,65,12,.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 .blade,.js .blade.in,.js .fx,.js .fx.in,.js .spec,.js .spec.in{opacity:1;transform:none;animation:none}
  .js .blade .y::after,.js .blade.in .y::after{width:100%;box-shadow:none;animation:none}
  .js .motif path{stroke-dashoffset:0;animation:none}
  .hd__phone:hover svg{animation:none}
  .spec:hover,.chapter:hover,.ph:hover img{transform:none}
}