/* ============================================================================
   GUICE ELECTRIC — "FILAMENT" motion layer                          (2026-09-15)
   Canvas scenes live in filament.js (chandelier, fault). Here: headings strike
   like a filament, a flicker then a hold; the amber phrase gets a warm underglow;
   content comes up on a dimmer; breaker rows flip on; the bulb mark draws.
   ========================================================================== */

.arch{position:relative;width:100%;aspect-ratio:3/4;max-width:24rem;justify-self:center;border-radius:12rem 12rem 12px 12px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.arch canvas{position:absolute;inset:0;width:100%;height:100%}
.fault__stage{position:relative;width:100%;aspect-ratio:4/3;max-width:32rem;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)}
.fault__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. strike */
.js .strike{opacity:0}
.js .strike.in{animation:strike .9s steps(1,end) forwards}
@keyframes strike{0%{opacity:0}8%{opacity:1}14%{opacity:.25}22%{opacity:1}30%{opacity:.5}38%{opacity:1}100%{opacity:1}}

/* 2. underglow */
.js .strike .y{position:relative;display:inline-block}
.js .strike .y::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:-.06em;height:.12em;border-radius:1em;background:var(--amber);filter:blur(.12em);opacity:0}
.js .strike.in .y::after{animation:glow 1.1s ease-out .5s forwards}
@keyframes glow{to{opacity:.75}}

/* 3. dimmer up */
.js .fx{opacity:0;transform:translateY(10px)}
.js .fx.in{animation:dim .7s cubic-bezier(.2,.7,.2,1) forwards}
.js .fx.d1.in{animation-delay:.09s}.js .fx.d2.in{animation-delay:.18s}.js .fx.d3.in{animation-delay:.27s}.js .fx.d4.in{animation-delay:.36s}
@keyframes dim{to{opacity:1;transform:none}}
.js .fx.strike{transform:none}
.js .fx.strike.in{animation:strike .9s steps(1,end) forwards}

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

/* 5. breaker rows flip on */
.row__sw{width:2.4rem;height:1.2rem;border-radius:.6rem;background:#59645F;position:relative;flex:none;transition:background .3s}
.row__sw::after{content:"";position:absolute;top:.2rem;left:.2rem;width:.8rem;height:.8rem;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.row:hover .row__sw,.row.in .row__sw{background:var(--amber)}
.row:hover .row__sw::after,.row.in .row__sw::after{transform:translateX(1.2rem)}

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

/* 7. surfaces */
.row,.rev,.medal,.ph{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.rev:hover,.medal:hover{border-color:var(--amber)}
.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,.8,.2,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 28px -12px rgba(232,163,61,.8)}
.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 .strike,.js .strike.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .js .strike .y::after,.js .strike.in .y::after{opacity:.75;animation:none}
  .js .motif path{stroke-dashoffset:0;animation:none}
  .hd__phone:hover svg{animation:none}
  .rev:hover,.medal:hover,.ph:hover img{transform:none}
}