/* v4 welcome animation: pancakes (breakfast) and a burger (lunch) stack up, steam rises, logo pops, "Hungry?".
   Shown only when js/welcome-gate.js adds .welcome-on to <html> (first visit of the session, motion allowed).
   The exit is pure CSS, so the overlay always clears by itself in about 3 seconds. */
html:not(.welcome-on) .welcome{display:none}
html.welcome-lock{overflow:hidden}
.welcome{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  background:var(--bg);color:var(--ink);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  animation:w-exit .6s cubic-bezier(.7,0,.25,1) 2.45s forwards}
@keyframes w-exit{to{transform:translateY(-100%);visibility:hidden}}
html.welcome-skip .welcome{animation:w-fade .22s ease forwards}
@keyframes w-fade{to{opacity:0;visibility:hidden}}
.w-rays{position:absolute;left:50%;top:50%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;
  background:repeating-conic-gradient(from 0deg,rgba(249,199,79,.10) 0deg 7.5deg,transparent 7.5deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 42%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 42%);
  animation:w-spin 18s linear infinite}
@keyframes w-spin{to{transform:rotate(360deg)}}
.w-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(249,199,79,.20),transparent 52%)}
.w-stage{position:relative;display:grid;justify-items:center;width:min(92vw,620px);text-align:center}
.w-logo{background:var(--ink);border-radius:16px;padding:6px 12px;line-height:0;box-shadow:0 10px 30px rgba(0,0,0,.45);
  animation:w-pop .6s cubic-bezier(.34,1.56,.64,1) 1s both}
.w-logo img{width:clamp(100px,24vw,150px);height:auto}
@keyframes w-pop{from{opacity:0;transform:scale(.35) rotate(-8deg)}to{opacity:1;transform:none}}
.w-food{width:100%;height:auto;margin-top:clamp(8px,2vh,18px);overflow:visible}
.w-food .plate{animation:w-in .35s ease-out both}
.w-food .lyr{transform-box:fill-box;transform-origin:50% 100%;animation:w-drop .55s cubic-bezier(.25,1.35,.5,1) both}
@keyframes w-drop{0%{opacity:0;transform:translateY(-190px)}55%{opacity:1;transform:translateY(0) scale(1.06,.84)}78%{transform:translateY(-6px) scale(.98,1.03)}100%{transform:none}}
.d1{animation-delay:.10s!important}.d2{animation-delay:.18s!important}.d3{animation-delay:.27s!important}.d4{animation-delay:.35s!important}
.d5{animation-delay:.44s!important}.d6{animation-delay:.52s!important}.d7{animation-delay:.74s!important}.d8{animation-delay:.60s!important}
.d9{animation-delay:.68s!important}.d10{animation-delay:.80s!important}
.w-food .syrup{animation:w-in .3s ease-out .66s both}
.w-food .drip{transform-box:fill-box;transform-origin:50% 0;animation:w-drip .6s cubic-bezier(.4,0,.2,1) both}
.dr1{animation-delay:.95s!important}.dr2{animation-delay:1.08s!important}.dr3{animation-delay:1.2s!important}
@keyframes w-drip{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.w-food .steam{fill:none;stroke:rgba(245,238,227,.6);stroke-width:5;stroke-linecap:round;stroke-dasharray:72;stroke-dashoffset:72;
  transform-box:fill-box;animation:w-steam 1.35s ease-out both}
.s1{animation-delay:1.05s!important}.s2{animation-delay:1.2s!important}.s3{animation-delay:1.35s!important}
@keyframes w-steam{0%{stroke-dashoffset:72;opacity:0;transform:translateY(10px)}35%{opacity:1}100%{stroke-dashoffset:0;opacity:0;transform:translateY(-16px)}}
@keyframes w-in{from{opacity:0}to{opacity:1}}
.w-h{margin-top:clamp(6px,1.6vh,14px);font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,9vw,3.8rem);line-height:1;letter-spacing:-.01em;
  animation:w-up .5s cubic-bezier(.34,1.56,.64,1) 1.3s both}
.w-sub{margin-top:6px;font-size:clamp(1.1rem,3.6vw,1.35rem);font-weight:700;color:var(--sun);animation:w-up .45s ease-out 1.48s both}
@keyframes w-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.w-skip{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.9rem;color:var(--muted);
  animation:w-in .4s ease-out .5s both}
/* the header logo gives a little bounce as the curtain lifts */
html.welcome-on .brand{animation:brand-hi .55s cubic-bezier(.34,1.56,.64,1) 2.85s}
@keyframes brand-hi{0%,100%{transform:none}45%{transform:scale(1.12) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.welcome{display:none!important}}