/* ============================================================================
   ESCATAWPA ANIMAL CLINIC — "LARGE & SMALL" motion layer            (2026-09-15)
   Canvas instruments live in pulse.js (ECG traces, the sign, the lineup).
   This is the CSS half: headings rise on a slow even beat, the accent phrase
   carries the faintest heartbeat twice and rests, content breathes in on a long
   curve, cards warm rather than jump. Nothing here is sharp; a nervous waiting
   room is the thing you are trying not to build.
   ========================================================================== */

.pulse{display:block;width:100%;height:60px;position:relative}
.pulse canvas{display:block;width:100%;height:100%}
.pulse--divider{height:28px;margin-block:clamp(2rem,4.5vw,3.2rem)}

/* 1. headings rise on the beat */
.js .rise{opacity:0}
.js .rise.in{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 2. two beats under the accent phrase, then rest */
.js .rise em{display:inline-block}
.js .rise.in em{animation:beat 1.5s ease-in-out 1.1s 1}
@keyframes beat{0%,100%{transform:none}14%{transform:scale(1.035)}28%{transform:none}42%{transform:scale(1.02)}56%{transform:none}}

/* 3. content breathes in */
.js .fx{opacity:0;transform:translateY(14px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .fx.in{opacity:1;transform:none}
.js .fx.d1{transition-delay:.15s}.js .fx.d2{transition-delay:.3s}.js .fx.d3{transition-delay:.45s}.js .fx.d4{transition-delay:.6s}

/* 4. the sign draws itself */
.sig{margin-top:2.2rem;max-width:22rem;color:var(--straw-lite)}
.sig__svg{width:100%;height:auto;display:block}
.js .sig__draw{stroke-dasharray:900;stroke-dashoffset:900}
.js .sig.in .sig__horse{animation:draw 2.4s cubic-bezier(.2,.7,.2,1) .4s forwards}
.js .sig.in .sig__cat{animation:draw 2s cubic-bezier(.2,.7,.2,1) 1.3s forwards}
.js .sig.in .sig__ground{animation:draw 1.2s ease-out 2.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* 5. cards warm rather than lift */
.help,.crewcard,.rev,.svcpanel{transition:background .5s ease,border-color .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.help:hover,.crewcard:hover,.rev:hover{border-color:color-mix(in srgb,var(--clay) 45%,transparent)}

/* 6. the lineup */
.lineup.is-pinned .lineup__stage{position:sticky;top:0;height:100vh;display:grid;align-content:center;overflow:hidden;padding-top:5.5rem;padding-bottom:2rem;box-sizing:border-box}
.lineup__track{display:flex;gap:clamp(1rem,2vw,1.6rem);will-change:transform}
.lineup.is-flat .lineup__track{flex-wrap:wrap;justify-content:center}
.lineup.is-flat .lineup__stage{position:static;height:auto}

/* 7. the room warms as you approach the phone */
.btn{transition:background .45s ease,color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.btn--clay:hover{}

@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{opacity:1;animation:none}
  .js .rise.in em{animation:none}
  .js .fx{opacity:1;transform:none;transition:none}
  .js .sig__draw{stroke-dashoffset:0;animation:none}
  .help:hover,.crewcard:hover,.rev:hover,.btn--clay:hover{transform:none}
}