/* ============================================================================
   VESTIGE — "INK & STEAM" motion layer                          (2026-09-15)
   The canvas instruments live in ink.js. This file is the CSS half:
   - headings PLATE: set down and come to rest
   - the accent phrase takes a single sauce stroke beneath it
   - courses arrive in sequence, never together
   - the pinned five-course stage, its numeral, its ink line
   - nothing bounces; a tasting room has no bounce in it
   ========================================================================== */

/* enso host + canvas */
.enso-host{position:absolute;inset:0;pointer-events:none;z-index:0}
.enso{position:absolute;inset:0;width:100%;height:100%}

/* brush dividers */
.brush{display:block;width:100%;height:18px;margin-block:clamp(2.2rem,5vw,3.6rem)}
.brush canvas{display:block;width:100%;height:18px}

/* steam overlay on a dish photograph */
.steam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* 1. plating */
.js .plate{opacity:0}
.js .plate.in{animation:plate 1.35s cubic-bezier(.16,.68,.18,1) forwards}
@keyframes plate{0%{opacity:0;transform:translateY(-14px) scale(1.014);letter-spacing:.04em}70%{opacity:1}100%{opacity:1;transform:none;letter-spacing:inherit}}

/* 2. sauce stroke under the accent phrase */
.js .plate em{position:relative}
.js .plate em::after{content:"";position:absolute;left:2%;right:2%;bottom:-.13em;height:1.5px;background:currentColor;opacity:.34;border-radius:99px;transform:scaleX(0);transform-origin:0 50%}
.js .plate.in em::after{animation:stroke 1.5s cubic-bezier(.18,.7,.2,1) .7s forwards}
@keyframes stroke{to{transform:scaleX(1)}}

/* 3. courses arrive one at a time */
.js .fx{opacity:0;transform:translateY(13px);transition:opacity 1.2s cubic-bezier(.16,.68,.18,1),transform 1.2s cubic-bezier(.16,.68,.18,1)}
.js .fx.in{opacity:1;transform:none}
.js .fx.d1{transition-delay:.2s}.js .fx.d2{transition-delay:.4s}.js .fx.d3{transition-delay:.6s}.js .fx.d4{transition-delay:.8s}

/* 4. the pinned course stage */
.courses.is-pinned .courses__stage{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.courses.is-pinned .course{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,.68,.18,1),transform .7s cubic-bezier(.16,.68,.18,1);pointer-events:none}
.courses.is-pinned .course.is-on{opacity:1;transform:none;pointer-events:auto}
.courses.is-pinned .courses__shot{position:absolute;inset:0;opacity:0;transition:opacity 1.1s cubic-bezier(.16,.68,.18,1),transform 1.4s cubic-bezier(.16,.68,.18,1);transform:scale(1.03)}
.courses.is-pinned .courses__shot.is-on{opacity:1;transform:none}
.courses__fill{transform:scaleY(0);transform-origin:top;transition:transform .25s linear}
.courses.is-flat .courses__rail,.courses.is-flat .courses__num{display:none}

/* the room warms as you approach the reservation */
.btn{transition:background .55s ease,color .55s ease,transform .55s cubic-bezier(.16,.68,.18,1),box-shadow .55s}
.btn--seal:hover{}

/* one candle's worth of movement on the dark bands */
.section--ink,.hero,.cta{position:relative}
.candle::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 50% 0%,color-mix(in srgb,var(--seal) 9%,transparent),transparent 70%);animation:candle 9s ease-in-out infinite alternate}
@keyframes candle{from{opacity:.55}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .js .plate,.js .plate.in{opacity:1;transform:none;animation:none;letter-spacing:inherit}
  .js .plate.in em::after{animation:none;transform:scaleX(1)}
  .js .fx{opacity:1;transform:none;transition:none}
  .btn--seal:hover{transform:none}
  .candle::after{animation:none;opacity:.7}
}