/* ============================================================================
   BILL'S AUTOMOTIVE — "FIFTY FOR FIFTY" motion layer                (2026-09-15)
   Canvas instruments live in tally.js (tally, scan). Here: headlines resolve
   out of a blur like a reading coming into focus, the accent phrase gets a gold
   rule that draws itself, cards report in, the review cards fan on hover.
   ========================================================================== */

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

/* 1. resolve */
.js .focus{opacity:0}
.js .focus.in{animation:focus .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes focus{0%{opacity:0;filter:blur(8px);transform:translateY(6px)}100%{opacity:1;filter:blur(0);transform:none}}

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

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

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

/* 5. cards */
.proof,.rev,.chapter{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.proof:hover,.rev:hover{}
.btn{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s,color .22s}
.btn--ink:hover{}

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