/* One black page, one shared decorative canvas, content always above it. */
:root{--night:#000000}
body{background:#000;isolation:isolate}
#menuView,.foot{position:relative;z-index:1}
.hero{isolation:isolate;background:#000}
.hero::before,#menuView::before{display:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-2;background:url("assets/backgrounds/honey-space.svg") center/cover no-repeat}
.hero.has-honeycomb::after{display:none}
body.has-site-depth .hero{background:transparent}
.hero .stage{background:none}
/* Isolate the opaque sticky rail: Chromium/SwiftShader otherwise leaves
   a mirrored occlusion strip on the fixed WebGL canvas. No blur or opacity change. */
.rail{filter:opacity(1)}
.site-depth{opacity:0;transition:opacity 240ms var(--ease);position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.site-depth canvas{display:block;width:100%;height:100%;pointer-events:none}
body:not([data-screen="menu"]) .site-depth{display:none}
/* Телефон и планшет: холст внутри героя и прокручивается вместе со страницей (scene.js, size).
   Под текстом героя, над его фоном. Горизонтальный свайп по роллу крутит его, вертикальный прокручивает страницу. */
.site-depth.in-hero{position:absolute;inset:0;z-index:-1}
@media(pointer:coarse){.hero .stage{touch-action:pan-y}}
/* Живые соты: не сплошная сетка, а небольшие группы. Появляются в случайных свободных местах и гаснут,
   у каждой свой ритм (см. конец site.js). Анимируются только прозрачность и сдвиг. */
.comb-live{position:fixed;inset:var(--top-h) 0 0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s cubic-bezier(.23,1,.32,1);contain:strict;
  background:radial-gradient(44vw 56vh at 92% 28%,rgba(255,190,46,.05),transparent 72%),radial-gradient(38vw 50vh at 3% 86%,rgba(255,106,61,.03),transparent 72%)}
.comb-live.on{opacity:1}
.comb-cluster{position:absolute;left:0;top:0;width:var(--w,180px);aspect-ratio:var(--r,1.2);opacity:0;will-change:opacity,transform;background:center/contain no-repeat;animation:comb-life 11s cubic-bezier(.45,0,.55,1) infinite}
.comb-cluster.a{background-image:url("assets/backgrounds/comb-a.svg")}
.comb-cluster.b{background-image:url("assets/backgrounds/comb-b.svg")}
.comb-cluster.c{background-image:url("assets/backgrounds/comb-c.svg")}
@keyframes comb-life{0%{opacity:0;transform:translateY(6px) scale(.97)}22%,58%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px) scale(1.02)}}
body:not([data-screen="menu"]) .comb-live{display:none}
body:has(dialog[open]) .comb-cluster{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.comb-cluster{display:none}}
body[data-quality="low"] .comb-cluster{display:none}
@media(forced-colors:active){.comb-live{display:none}}
#menu .card{background:#000}
/* Тёмный фон снимка растворяется в карточке, прямоугольника вокруг блюда не видно. */
/* Снимок целиком и по центру: размер картинки равен видимому фото, поэтому мягкие края не обрезаются. */
#menu .ph{position:relative}
#menu .ph img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
/* У банок светлый ореол на снимке: овальная маска убирает его прямоугольную границу. */
#menu [data-card^="drink-"] .ph img{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);-webkit-mask-composite:source-over;mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-composite:add}
.menu-tools{background-color:transparent !important}
.menu-tools input{background:#000}
/* Preserve photographic masks; protect all copy and ordering controls. */
#menu .body{background:transparent}
#menu .body>*{background-color:transparent;text-shadow:0 0 3px #000,0 0 6px #000}
#menu .row,.menu-tools{background-color:#000}
#menu .ph{background:transparent}
#menu h2{background:linear-gradient(90deg,#000 0 45%,transparent 70%);text-shadow:0 1px 6px #000}
.foot{background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax)}
@media(max-width:700px){.hero::after{background-size:900px 350px;background-position:80% bottom;opacity:.65}}
@media(forced-colors:active){.hero::after,.site-depth{display:none}}
@media(prefers-reduced-motion:reduce){.site-depth{display:none}}
/* Static fallback follows category rhythm; no canvas, loops or moving gradients. */
body:not(.has-live-comb) #menu .section{position:relative;isolation:isolate}
body:not(.has-live-comb) #menu .section:nth-child(3n+1)::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:0;top:24px;width:210px;height:170px;
  background:url("assets/backgrounds/honeycomb-glass.webp") center/190px 190px no-repeat;
  opacity:.65;
}
body:not(.has-live-comb) #menu .section:nth-child(6n+4)::before{right:auto;left:0;transform:rotate(12deg);opacity:.5}
@media(max-width:700px){body:not(.has-live-comb) #menu .section:nth-child(3n+1)::before{width:110px;height:100px;background-size:100px 100px;opacity:.8}}
@media(forced-colors:active){body:not(.has-live-comb) #menu .section::before{display:none}}

body.has-rendered-scene .site-depth{opacity:1}

/* Пчела над меню: выше контента (1), ниже шапки (30) и окон. Нажатия проходят сквозь неё. */
.catalog-bee{position:fixed;left:0;top:0;width:44px;height:33px;z-index:5;pointer-events:none;contain:layout style;opacity:0;will-change:transform;transition:opacity .22s cubic-bezier(.23,1,.32,1);filter:drop-shadow(0 2px 8px rgba(255,190,46,.4))}
.catalog-bee.on{opacity:1}
.catalog-bee img{position:absolute;inset:0;width:44px;height:33px;max-width:none;pointer-events:none}
.catalog-bee-wings{transform-origin:61% 43%;animation:bee-wing 70ms linear infinite alternate}
@keyframes bee-wing{from{transform:scaleY(1) rotate(-4deg)}to{transform:scaleY(.55) rotate(4deg)}}
body:not([data-screen="menu"]) .catalog-bee,body[data-quality="low"] .catalog-bee{display:none}
@media(max-width:900px),(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce),(forced-colors:active){.catalog-bee{display:none}}

/* Mobile/coarse pointers always use the GLB still, even while hero is live. */
@media(max-width:700px),(pointer:coarse){
 #menu .section{position:relative;isolation:isolate}
 #menu .section:nth-child(3n+1)::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:0;top:24px;width:110px;height:100px;background:url("assets/backgrounds/honeycomb-glass.webp") center/100px 100px no-repeat;opacity:.8}
 #menu .section:nth-child(6n+4)::before{right:auto;left:0;transform:rotate(12deg);opacity:.7}
}
@media(forced-colors:active){#menu .section::before{display:none}}
/* На этих снимках вверху золотая полоса. Фото заменит владелица, пока её прячем мягким краем. */
#menu [data-card="ca-shrimp"] .ph img,[data-dish="ca-shrimp"] img,#menu [data-card="ca-crab"] .ph img,[data-dish="ca-crab"] img,#menu [data-card="ca-eel"] .ph img,[data-dish="ca-eel"] img,#menu [data-card="ca-vegan"] .ph img,[data-dish="ca-vegan"] img{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent 12%,#000 19%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent 12%,#000 19%,#000 92%,transparent)}