/* ============================================================================
   KNIGHT DDS — "CHAIRSIDE" motion layer                             (2026-09-15)
   Canvas instruments live in chairside.js (smile, chair). Here: headings recline
   into place slowly, the accent phrase brightens with a soft rule, content
   settles like a chair coming to rest, cards lift by a hair. Nothing bounces,
   snaps, flickers or ticks.
   ========================================================================== */

.smile{position:relative;width:100%;aspect-ratio:1/1;max-width:26rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.7)}
.smile canvas{position:absolute;inset:0;width:100%;height:100%}
.chair__stage{position:relative;width:100%;aspect-ratio:16/10;max-width:34rem;justify-self:center;border:1px solid var(--line-w);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.chair__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. recline into place */
.js .calm{opacity:0}
.js .calm.in{animation:calm 1.1s cubic-bezier(.25,.6,.2,1) forwards}
@keyframes calm{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* 2. the soft rule brightens */
.js .calm .y{position:relative;display:inline-block}
.js .calm .y::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.08em;background:var(--terra);opacity:0;border-radius:2px}
.js .calm.in .y::after{animation:brighten 1.2s ease-out .5s forwards}
@keyframes brighten{to{opacity:.75}}

/* 3. settle */
.js .fx{opacity:0;transform:translateY(10px)}
.js .fx.in{animation:rest .9s cubic-bezier(.25,.6,.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 rest{to{opacity:1;transform:none}}

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

/* 5. cards lift by a hair */
.care,.rev,.chapter{transition:transform .5s cubic-bezier(.25,.6,.2,1),box-shadow .5s,border-color .5s}
.care:hover,.rev:hover{border-color:var(--terra)}
.btn{transition:transform .35s cubic-bezier(.25,.6,.2,1),box-shadow .35s,background .35s,color .35s}
.btn--ink:hover{}

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