/* ============================================================================
   ROBERTSON ELECTRICAL — "FOUR LANES" motion layer                  (2026-09-15)
   Canvas scenes live in lanes.js (board, highbay). Here: headings throw on like a
   breaker, a hard snap with one bounce; the red phrase gets a live-wire underline;
   content energizes in; the bolt mark draws; lane cards take load on hover.
   ========================================================================== */

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

/* 1. throw the breaker */
.js .throw{opacity:0}
.js .throw.in{animation:throwon .55s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes throwon{0%{opacity:0;transform:translateY(-10px) scaleY(.92)}100%{opacity:1;transform:none}}

/* 2. the live wire */
.js .throw .y{position:relative;display:inline-block}
.js .throw .y::after{content:"";position:absolute;left:0;bottom:-.08em;height:.08em;width:100%;background:repeating-linear-gradient(90deg,var(--acc) 0 .5em,transparent .5em .8em);background-size:1.3em 100%;opacity:0}
.js .throw.in .y::after{animation:wire 1.2s linear .35s forwards}
@keyframes wire{0%{opacity:0;background-position:0 0}20%{opacity:1}100%{opacity:1;background-position:2.6em 0}}

/* 3. energize */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:energize .5s 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 energize{to{opacity:1;transform:none}}
.js .fx.throw{transform:none}
.js .fx.throw.in{animation:throwon .55s cubic-bezier(.3,1.5,.5,1) forwards}

/* 4. the bolt-and-orbit mark draws itself */
.motif{width:6.5rem;color:var(--acc-lite);margin-bottom:1.2rem}
.js .motif ellipse,.js .motif path{stroke-dasharray:180;stroke-dashoffset:180}
.js .motif.in ellipse,.js .motif.in path{animation:drawbolt 1.1s cubic-bezier(.3,.8,.3,1) forwards}
.js .motif.in .m2{animation-delay:.3s}.js .motif.in .m3{animation-delay:.6s}
@keyframes drawbolt{to{stroke-dashoffset:0}}

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

/* 6. lanes take load */
.lane,.rev,.chapter,.ph{transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s}
.lane:hover,.rev:hover{border-color:var(--acc)}
.lane__n{transition:background .25s,color .25s}
.lane:hover .lane__n{background:var(--acc);color:#fff}
.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(215,38,30,.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 .throw,.js .throw.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .js .throw .y::after,.js .throw.in .y::after{opacity:1;animation:none}
  .js .motif ellipse,.js .motif path{stroke-dashoffset:0;animation:none}
  .hd__phone:hover svg{animation:none}
  .lane:hover,.rev:hover,.ph:hover img{transform:none}
}