/* Motion for revision 15: service. Things are set down on the table, never thrown around.
   One rhythm: --ease-swift for masks, --ease-out for arrivals, --spring for anything that lands.
   Entrances use backwards-filled animations, so the resting pose is always the real layout.
   Without scripts, only the CSS-only hero arrival runs; nothing waits for a script to become visible. */

/* Hero: the plate is set down and the light comes up, then the server's line. */
.hero-photo img{animation:settle 2.2s var(--ease-out) backwards}
@keyframes settle{from{scale:1.035;filter:brightness(.55) saturate(.85)}}
@media (min-width:1024px){
  /* The still keeps a slow life of its own, like light moving across the linen. It grows from the far spoon, so the
     group never drifts more than the gap reserved beside the headline. */
  .hero-photo img{animation:settle 2.2s var(--ease-out) backwards,linen 32s 2.2s var(--ease-out) infinite alternate}
  @keyframes linen{to{translate:-.8% .5%;scale:1.035}}
}
.hero h1 .line-in{animation:rise .95s var(--ease-swift) backwards;animation-delay:calc(var(--i,0) * 130ms + 260ms)}
@keyframes rise{from{translate:0 112%}}
.hero-eyebrow,.hero-lede,.hero-actions,.hero-foot{animation:arrive var(--dur-2) var(--ease-out) backwards}
.hero-eyebrow{animation-delay:120ms}
.hero-lede{animation-delay:620ms}
.hero-actions{animation-delay:760ms}
.hero-foot{animation-delay:1100ms}
@keyframes arrive{from{opacity:0;translate:0 18px}}

/* One entrance rhythm for everything marked .cho, once, when its section arrives. */
.motion .cho:not(.in){opacity:0}
.motion .cho.in{animation:arrive var(--dur-2) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * var(--stagger))}

/* Tonight's menu: the card is laid on the cloth, then the courses are set line by line. */
.motion .menu:not(.drawn) .menu-card,.motion .menu:not(.drawn) .course,.motion .menu:not(.drawn) .plate{opacity:0}
.motion .menu.drawn .menu-card{animation:lay-card 1.05s var(--spring) backwards}
@keyframes lay-card{from{opacity:0;translate:0 70px;rotate:-1.6deg}40%{opacity:1}}
.motion .menu.drawn .course{animation:arrive .6s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 70ms + 420ms)}
.motion .menu.drawn .leader{animation:leader .8s var(--ease-swift) backwards;animation-delay:calc(var(--i,0) * 70ms + 560ms)}
@keyframes leader{from{scale:0 1}}
.motion .menu.drawn .plate{animation:arrive .8s var(--ease-out) 300ms backwards}
.motion .menu.drawn .plate-disc{animation:plate-in 1.2s var(--spring) 350ms backwards}
@keyframes plate-in{from{rotate:-120deg;scale:.86;opacity:0}}
.motion .menu.drawn #plate-img{animation:set-down .9s var(--spring) 700ms backwards}
@keyframes set-down{from{translate:-30% -12%;rotate:-8deg;scale:1.06;opacity:0}35%{opacity:1}}
/* On phones the same set-down follows the thumb: a plate's screen slides in tilted, settles square on its plate at the
   centre, and is lifted off as it leaves. Static where scroll timelines are unsupported. */
.motion .menu:not(.drawn) .plates{opacity:0}
.motion .menu.drawn .plates{animation:arrive .8s var(--ease-out) 300ms backwards}
@supports (animation-timeline:view()){
  @media (max-width:1023px){
    .motion .plated-screen{animation:plate-pass linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
    .motion .plated-disc{animation:disc-pass linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
    @keyframes plate-pass{0%{translate:34% 5%;rotate:10deg;scale:.9}50%{translate:0 0;rotate:-3deg;scale:1}100%{translate:-30% -4%;rotate:-13deg;scale:.9}}
    @keyframes disc-pass{0%,100%{scale:.84;rotate:-40deg}50%{scale:1;rotate:0deg}}
  }
}

/* How it's served: "Pass it on." is passed across the table from the right. */
.motion .service-words span.cho:last-child.in{animation:pass-across 1.1s var(--spring) backwards;animation-delay:calc(3 * var(--stagger) + 120ms)}
@keyframes pass-across{from{opacity:0;translate:38vw 0;rotate:3deg}30%{opacity:1}}
/* The shared table opens up as it scrolls into view. Static where scroll timelines are unsupported. */
@supports (animation-timeline:view()){
  .motion .pass-frame{animation:table-open linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  .motion .pass-frame img{animation:table-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes table-open{from{clip-path:inset(0 var(--open-x,11%) round 30px)}to{clip-path:inset(0 0 round 0)}}
  @keyframes table-drift{from{scale:1.1;translate:0 -3%}to{scale:1.02;translate:0 3%}}
  @media (max-width:760px){.pass{--open-x:5%}}
}

/* House style: Bo's playing piece is slid onto its card and comes to rest. */
.motion .house.drawn .edition-piece{animation:slide-piece 1.25s var(--spring) .75s backwards}
@keyframes slide-piece{from{translate:-70% 40%;rotate:-220deg;opacity:0}25%{opacity:1}}
.motion .house.drawn .edition-screen{animation:arrive .9s var(--ease-out) .45s backwards}

/* The pilot: each ticket drops onto the rail and swings still. */
.motion .ticket.cho.in{animation:hang 1s var(--spring) backwards;animation-delay:calc(var(--i,0) * 140ms + 100ms)}
@keyframes hang{from{opacity:0;translate:0 -46px;rotate:-7deg}30%{opacity:1}}

/* The table card: each new letter is pressed into the paper. */
.print-name i.pressed{animation:press .34s var(--ease-out) backwards}
@keyframes press{from{opacity:0;scale:1.7;filter:blur(3px)}}

/* Footer: the wordmark is set letter by letter and its full stop drops into place. */
.footer-wordmark .glyph{transform-box:fill-box;transform-origin:50% 100%}
.motion .footer:not(.drawn) .glyph{opacity:0}
.motion .footer.drawn .glyph{animation:glyph-rise .9s var(--spring) backwards}
.motion .footer.drawn .glyph-m{animation-delay:70ms}
.motion .footer.drawn .glyph-u{animation-delay:140ms}
.motion .footer.drawn .glyph-s{animation-delay:210ms}
.motion .footer.drawn .glyph-e{animation-delay:280ms}
.motion .footer.drawn .glyph-dot{animation:dot-drop .9s var(--ease-out) 560ms backwards}
@keyframes glyph-rise{from{opacity:0;translate:0 40%}}
@keyframes dot-drop{0%{opacity:0;translate:0 -260%}45%{opacity:1;translate:0 0;scale:1.25 .72}62%{translate:0 -38%;scale:.94 1.06}80%{translate:0 0;scale:1.06 .95}100%{translate:0 0;scale:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}