/* One full-screen opening, followed by ordinary document sections. */
.site-header{position:absolute;inset:0 0 auto;z-index:10}
.intro-scene{--intro-header-height:94px;--intro-progress:0;position:relative;height:max(100svh,640px)}
.intro-scene>.poster-hero{position:sticky;top:0;height:max(100svh,640px);min-height:0;background-position:center bottom}
.intro-scene .hero-copy{position:absolute;inset:0 auto 0 0;width:54%;height:100%;padding:calc(var(--intro-header-height) + 22px) 0 80px max(6%,calc(50vw - 690px));display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.intro-scene .hero-copy .calligraphy-heading{width:min(47vw,calc((100svh - var(--intro-header-height) - 210px)*2.08));max-width:710px;margin:0;flex:none}
.intro-scene .hero-english{font-size:clamp(24px,2.8vw,42px);margin:14px 0 0 8px;white-space:nowrap}
.intro-scene .hero-description{font-size:14px;margin:25px 0 0 8px}
.intro-scene .hero-actions{position:static;inset:auto;margin:29px 0 0 8px;justify-content:flex-start;gap:26px;pointer-events:auto}
.intro-scene .hero-food{top:var(--intro-header-height);height:calc(100% - var(--intro-header-height) - 48px);width:56%;right:0}
.intro-scene .hero-bowl{height:94%;width:116%;left:-9%;top:-2%}
.intro-scene .food-caption{bottom:14px;left:7%;right:14%}
.hero-scroll-cue{position:absolute;left:50%;bottom:19px;z-index:4;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:50%;transform:translateX(-50%);color:var(--muted)}
.hero-scroll-cue>svg{width:17px;height:22px;animation:intro-scroll-hint 2s ease-in-out infinite}
.hero-scroll-cue:hover{color:var(--red);border-color:var(--red)}
.intro-motion .intro-scene{height:calc(max(100svh,640px) + 28svh)}
.intro-motion .intro-scene .hero-copy{transform:translate3d(calc(var(--intro-progress)*-26px),calc(var(--intro-progress)*-100px),0);opacity:calc(1 - var(--intro-progress)*.78)}
.intro-motion .intro-scene .hero-food{transform:translate3d(calc(var(--intro-progress)*82px),calc(var(--intro-progress)*-72px),0) rotate(calc(var(--intro-progress)*4deg)) scale(calc(1 - var(--intro-progress)*.08));opacity:calc(1 - var(--intro-progress)*.3);transform-origin:58% 50%}
.intro-motion .intro-scene .hero-mascot{opacity:calc(.92 - var(--intro-progress)*.8)}
.intro-motion .hero-scroll-cue{opacity:calc(1 - var(--intro-progress)*.85)}
.intro-scene .hero-scroll-cue:focus-visible{visibility:visible;opacity:1;pointer-events:auto}
.intro-motion #favourites .favourites-heading{transform:translateY(calc((1 - var(--favourites-enter,1))*32px));opacity:calc(.35 + var(--favourites-enter,1)*.65)}
.intro-motion #favourites .recommendations-carousel{transform:translateY(calc((1 - var(--favourites-enter,1))*18px));opacity:calc(.55 + var(--favourites-enter,1)*.45)}
@keyframes intro-scroll-hint{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media(min-width:701px) and (max-width:1000px){.intro-scene .hero-actions{gap:16px;flex-wrap:wrap}.intro-scene .hero-actions>.button{font-size:14px;padding-inline:19px}.intro-scene .hero-actions .text-link{font-size:12px}.intro-scene .hero-english{font-size:clamp(22px,2.8vw,28px)}.intro-scene .food-caption>span{font-size:25px}}
@media(min-width:701px) and (max-width:1000px) and (min-height:900px){
  .intro-scene .hero-copy{width:100%;display:block;padding:calc(var(--intro-header-height) + 34px) 6% 0}
  .intro-scene .hero-copy .calligraphy-heading{width:min(76vw,600px)}
  .intro-scene .hero-english{font-size:32px;margin-top:12px}
  .intro-scene .hero-description{font-size:13px;margin-top:12px}
  .intro-scene .hero-food{top:45%;height:calc(55% - 100px);width:100%}
  .intro-scene .hero-bowl{width:112%;left:-6%;top:0;height:100%}
  .intro-scene .food-caption{display:none}
  .intro-scene .hero-mascot{top:36%}
  .intro-scene .hero-actions{position:absolute;left:18%;right:18%;top:auto;bottom:80px;margin:0;justify-content:center;gap:26px}
}
@media(max-width:700px){
  .intro-scene{--intro-header-height:75px}
  .intro-motion .intro-scene{height:calc(max(100svh,640px) + 16svh)}
  .intro-scene .hero-copy{width:100%;padding:calc(var(--intro-header-height) + 18px) 22px 0;display:block}
  .intro-scene .hero-copy .calligraphy-heading{width:min(100%,calc((100svh - var(--intro-header-height))*.48));max-width:420px;margin:0}
  .intro-scene .hero-english{font-size:clamp(20px,4.9vw,27px);margin:10px 0 0 3px;white-space:normal}
  .intro-scene .hero-description{font-size:11px;margin:9px 0 0 3px}
  .intro-scene .hero-food{top:41%;height:calc(59% - 130px);width:100%;right:0}
  .intro-scene .hero-bowl{top:0;left:-6%;width:112%;height:calc(100% - 42px)}
  .intro-scene .food-caption{left:0;right:0;bottom:4px}
  .intro-scene .food-caption>span{font-size:22px;line-height:1.25}
  .intro-scene .food-caption small{font-size:8px;margin-top:5px}
  .intro-scene .hero-actions{position:absolute;left:22px;right:22px;top:auto;bottom:77px;margin:0;justify-content:center;gap:21px;flex-wrap:nowrap}
  .intro-scene .hero-actions>.button{min-height:46px;padding:11px 18px;font-size:14px}
  .intro-scene .hero-actions>.button>span{font-size:10px}
  .intro-scene .hero-actions .text-link{font-size:11px}
  .hero-scroll-cue{bottom:14px}
  .intro-motion .intro-scene .hero-copy{transform:translate3d(0,calc(var(--intro-progress)*-52px),0)}
  .intro-motion .intro-scene .hero-food{transform:translate3d(calc(var(--intro-progress)*24px),calc(var(--intro-progress)*-38px),0) rotate(calc(var(--intro-progress)*2deg)) scale(calc(1 - var(--intro-progress)*.05))}
  .intro-at-top:not(.has-order) .mascot-guide{bottom:8px;width:60px}
  .intro-at-top:not(.has-order) .mascot-trigger{width:60px;height:64px}
  .intro-at-top:not(.has-order) .mascot-body{inset:0 3px 6px}
  .intro-at-top:not(.has-order) .mascot-portrait{width:54px;height:58px}
  .intro-at-top:not(.has-order) .mascot-note{bottom:80px}
  .intro-at-top:not(.has-order) .mascot-hint{left:50px;bottom:30px}
  .intro-at-top.has-order .mascot-guide{visibility:hidden}
}
@media(max-width:360px){.intro-scene .hero-copy{padding-inline:18px}.intro-scene .hero-description{font-size:10px}.intro-scene .hero-actions{left:17px;right:17px;gap:14px}.intro-scene .hero-actions>.button{font-size:13px;padding-inline:15px}.intro-scene .hero-actions .text-link{font-size:10px}.intro-scene .food-caption>span{font-size:20px}}
@media(prefers-reduced-motion:reduce){.intro-scene{height:max(100svh,640px)!important}.intro-scene>.poster-hero{position:relative}.intro-scene .hero-copy,.intro-scene .hero-food,#favourites .favourites-heading,#favourites .recommendations-carousel{transform:none!important;opacity:1!important}.hero-scroll-cue>svg{animation:none}}