/* ============================================================================
   CRONIER AIR CONDITIONING — "SIXTY-EIGHT SUMMERS" motion layer       (2026-09-15)
   Canvas scenes live in summers.js (summers, checklist). Here: headings settle
   the way a room comes to temperature, warm to cool; the blue phrase gets a rule
   that cools in from the left; content arrives on a slow dimmer; the arc draws.
   ========================================================================== */

.ledger{position:relative;width:100%;height:clamp(12rem,20vw,15rem);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;background:var(--paper)}
.ledger canvas{position:absolute;inset:0;width:100%;height:100%}
.checklist__stage{position:relative;width:100%;aspect-ratio:4/3;max-width:32rem;justify-self:center;border-radius:8px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.checklist__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. come to temperature */
.js .settle{opacity:0}
.js .settle.in{animation:settle 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{0%{opacity:0;transform:translateY(8px);filter:sepia(.6) saturate(1.6)}60%{opacity:1;filter:sepia(.2)}100%{opacity:1;transform:none;filter:none}}

/* 2. the cool rule */
.js .settle .y{position:relative;display:inline-block}
.js .settle .y::after{content:"";position:absolute;left:0;bottom:-.06em;height:.07em;width:100%;background:linear-gradient(90deg,var(--acc-d),var(--acc-lite));transform:scaleX(0);transform-origin:left}
.js .settle.in .y::after{animation:cool 1s cubic-bezier(.2,.7,.2,1) .5s forwards}
@keyframes cool{to{transform:scaleX(1)}}

/* 3. dimmer */
.js .fx{opacity:0;transform:translateY(10px)}
.js .fx.in{animation:dimmer .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .fx.d1.in{animation-delay:.1s}.js .fx.d2.in{animation-delay:.2s}.js .fx.d3.in{animation-delay:.3s}.js .fx.d4.in{animation-delay:.4s}
@keyframes dimmer{to{opacity:1;transform:none}}
.js .fx.settle{transform:none}
.js .fx.settle.in{animation:settle 1.1s cubic-bezier(.2,.7,.2,1) forwards}

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

/* 5. stat figures count in (CSS only: they slide up under a mask) */
.stat{overflow:hidden}
.js .stat .stat__n{display:inline-block;transform:translateY(110%)}
.js .stat.in .stat__n{animation:statup .7s cubic-bezier(.2,.8,.2,1) forwards}
.js .stat.d1.in .stat__n{animation-delay:.1s}.js .stat.d2.in .stat__n{animation-delay:.2s}.js .stat.d3.in .stat__n{animation-delay:.3s}
@keyframes statup{to{transform:none}}

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

/* 7. surfaces */
.entry,.rate,.chapter{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s}
.entry:hover,.rate:hover{border-color:var(--acc)}
.btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 26px -12px rgba(46,155,214,.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 .settle,.js .settle.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none;filter:none}
  .js .settle .y::after,.js .settle.in .y::after{transform:none;animation:none}
  .js .motif path,.js .motif circle{stroke-dashoffset:0;animation:none}
  .js .stat .stat__n,.js .stat.in .stat__n{transform:none;animation:none}
  .hd__phone:hover svg{animation:none}
  .entry:hover,.rate:hover{transform:none}
}