/* ============================================================================
   KILLER CRAB — "FULL BOIL" motion layer                             (2026-09-15)
   Canvas instruments live in boil.js (boil, crab, steam). Here: headlines drop
   like a tray hitting the table, the accent line gets a butter smear under it,
   content lands, the ticker rolls, dishes lean in when you hover.
   ========================================================================== */

.boil{position:absolute;pointer-events:none;overflow:hidden;--boil-to:var(--paper-2);-webkit-mask-image:linear-gradient(transparent,#000 26%);mask-image:linear-gradient(transparent,#000 26%)}
/* the water never ends on an edge: it dissolves into the colour of whatever comes next
   (the cream dock under a hero, the footer under the closing band), and the steam fades
   in at the top instead of being clipped by the box */
.boil::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to bottom,transparent,var(--boil-to) 92%);pointer-events:none}
.cta__boil{--boil-to:var(--cedar-2)}
.boil canvas{position:absolute;inset:0;width:100%;height:100%}
.dock{position:relative;height:6.5rem;overflow:hidden}
.dock canvas{position:absolute;inset:0;width:100%;height:100%}
.dish{position:relative}
.dish .steam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* 1. tray hits the table */
.js .slam{opacity:0}
.js .slam.in{animation:slam .5s cubic-bezier(.2,.9,.25,1.15) forwards}
@keyframes slam{0%{opacity:0;transform:translateY(-18px) scale(1.04)}70%{opacity:1;transform:translateY(2px) scale(.99)}100%{opacity:1;transform:none}}

/* 2. butter smear under the accent */
.js .slam .y{position:relative;display:inline-block;z-index:0}
.js .slam .y::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.28em;background:var(--butter);z-index:-1;transform:scaleX(0);transform-origin:0 50%;border-radius:2px}
.js .slam.in .y::after{animation:smear .6s cubic-bezier(.25,.85,.2,1) .35s forwards}
@keyframes smear{to{transform:scaleX(1)}}
.section--cedar .slam .y::after,.cta .slam .y::after,.phero .slam .y::after,.hero .ticket .slam .y::after{background:var(--red)}
.hero .ticket .slam .y::after{background:var(--butter)}

/* 3. content lands */
.js .fx{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.25,.85,.2,1),transform .7s cubic-bezier(.25,.85,.2,1)}
.js .fx.in{opacity:1;transform:none}
.js .fx.d1{transition-delay:.08s}.js .fx.d2{transition-delay:.16s}.js .fx.d3{transition-delay:.24s}.js .fx.d4{transition-delay:.32s}

/* 4. the ticker */
.marq{overflow:hidden;background:var(--red);color:var(--paper);border-block:3px solid var(--cedar-3)}
.marq__track{display:flex;gap:2rem;width:max-content;padding-block:.8rem;font-family:'Archivo Black',sans-serif;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;animation:marq 34s linear infinite}
.marq__track i{width:.5rem;height:.5rem;background:var(--butter);align-self:center;transform:rotate(45deg)}
@keyframes marq{to{transform:translateX(-50%)}}

/* 5. dishes lean in */
.dish img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dish:hover img{transform:scale(1.04)}
.dish figcaption{transition:transform .5s cubic-bezier(.25,.85,.2,1)}
.dish:hover figcaption{}
.loc,.rev,.hit{transition:transform .35s cubic-bezier(.25,.85,.2,1),box-shadow .35s}
.loc:hover,.rev:hover{}
.hit:hover{transform:translateX(4px)}

/* 6. the button seats */
.btn{transition:transform .22s cubic-bezier(.25,.85,.2,1),background .22s,color .22s,box-shadow .22s}
.btn--red:hover{}

@media (prefers-reduced-motion:reduce){
  .js .slam,.js .slam.in{opacity:1;animation:none}
  .js .slam.in .y::after{animation:none;transform:scaleX(1)}
  .js .fx{opacity:1;transform:none;transition:none}
  .marq__track{animation:none}
  .dish:hover img,.loc:hover,.rev:hover,.hit:hover,.btn--red:hover{transform:none}
}