/* Hero, orbiting food, food-name strip */
.hero{position:relative;overflow:hidden;padding:56px 0 84px}
.corner{position:absolute;top:0;right:0;width:clamp(90px,17vw,170px);aspect-ratio:1;background:url(../images/brand/corner-light.webp) right top/contain no-repeat;animation:cor 1.3s .1s var(--ease) both}
@keyframes cor{from{opacity:0;transform:translate(35%,-35%)}}
.hg{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;position:relative}
.kh{font:400 22px var(--khmer);color:var(--stone);margin:0 0 10px}
h1{font-size:clamp(40px,7.4vw,76px);line-height:1.06;color:var(--maroon);margin:0 0 18px}
.ln{display:block}
.sub{max-width:520px;color:var(--muted);margin:0 0 24px;font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{border:1.5px solid var(--maroon);color:var(--maroon);border-radius:99px;padding:5px 15px;font-weight:600;font-size:14.5px}
/* logo with food orbiting around it */
.medal{--W:min(42vw,380px);position:relative;justify-self:center;width:var(--W);animation:spin 1.6s .25s var(--ease) both}
@keyframes spin{from{opacity:0;transform:rotate(-18deg) scale(.84)}}
.logo{display:block;width:100%;aspect-ratio:1;background:url(../images/brand/logo-light.webp) center/contain no-repeat;animation:bob 8s 1.9s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-9px) rotate(1.2deg)}}
.orbit{position:absolute;inset:0;animation:rot 48s linear infinite,fadein 1.2s 1s both}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes rotr{to{transform:rotate(-360deg)}}
@keyframes fadein{from{opacity:0}}
.fl{position:absolute;left:50%;top:50%;width:calc(var(--W)*.25);height:calc(var(--W)*.25);margin:calc(var(--W)*-.125) 0 0 calc(var(--W)*-.125);
  transform:rotate(var(--a)) translateY(calc(var(--W)*-.6)) rotate(calc(var(--a)*-1))}
.cr{width:100%;height:100%;animation:rotr 48s linear infinite}
.sw{width:100%;height:100%;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .4s ease}
.sw.out{opacity:0;transform:scale(.15) rotate(-70deg);transition:transform .3s ease-in,opacity .3s ease-in}
.cr img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.4));animation:lev 4.5s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes lev{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(6deg)}}
/* moving food-name strip */
.mq{background:var(--band);color:#F7F1E6;overflow:hidden;white-space:nowrap;padding:12px 0}
.mq>div{display:inline-flex;align-items:center;gap:46px;padding-right:46px;animation:mq 60s linear infinite}
.mq:hover>div{animation-play-state:paused}
.mq .it{display:inline-flex;align-items:center;gap:12px;font:700 23px var(--serif);animation:wob 3.2s ease-in-out infinite;animation-delay:calc(var(--n)*-.37s)}
.mq .it img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35))}
.mq .it img.ph{border-radius:50%;object-fit:cover;border:2px solid #F7F1E6}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes wob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}

.cr img.ph{border-radius:50%;object-fit:cover;border:3px solid #F7F1E6;filter:none;box-shadow:0 10px 18px rgba(0,0,0,.4)}