/* The food is rendered as volumetric geometry; the original photos remain as fallback. */
.food-webgl{display:block;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}
.has-real-3d #scene{inset:0;width:100%;height:100svh;aspect-ratio:auto;transform:none;will-change:opacity;pointer-events:none}
.has-real-3d .burger-stack{display:none}
.has-real-3d #menu-object{transform:none!important}
.has-real-3d[data-webgl-stage=menu] #menu-object:not([data-product=cola]) #menu-image{visibility:hidden}
.has-real-3d .cold-product{transform:none;filter:none;aspect-ratio:1}
#hero-rotate-area{position:fixed;left:55.5%;top:50%;transform:translate(-50%,-50%);width:52vw;height:66vh;z-index:7;cursor:grab;touch-action:pan-y;border-radius:45%;outline-offset:0}
#hero-rotate-area:active{cursor:grabbing}
#hero-3d-controls{--controls-left:55.5%;position:fixed;z-index:9;left:var(--controls-left);bottom:15svh;transform:translateX(-50%);display:flex;gap:10px;white-space:nowrap;align-items:center;pointer-events:auto}
#hero-3d-controls button{font-size:16px;font-weight:700;border:1px solid #f0dfb35c;border-radius:30px;line-height:1.35;padding:11px 19px;background:#151009c9;backdrop-filter:blur(12px);transition:border-color .2s,color .2s;min-height:44px}
#hero-3d-controls button:hover{color:var(--yellow);border-color:var(--yellow)}
#hero-3d-controls button:first-child{color:var(--yellow)}
#hero-3d-controls button[aria-pressed=true]{color:#171008;background:var(--yellow);border-color:var(--yellow)}
#hero-3d-controls .orbit-glyph{font-size:21px;line-height:1;vertical-align:-1px;margin-right:5px}
html:not(.has-real-3d) #hero-rotate-area,html:not(.has-real-3d) #hero-3d-controls{display:none}
.has-real-3d[data-chapter=anatomy] #hero-3d-controls{bottom:4svh}
@media(min-width:801px){.has-real-3d .hero-line-solid{z-index:0}.has-real-3d .hero-bottom{bottom:7%}}
@media(max-width:800px){#hero-3d-controls{bottom:22svh;gap:7px}#hero-3d-controls button{font-size:16px;padding:10px 13px}.has-real-3d[data-chapter=anatomy] #hero-3d-controls{bottom:14svh}.has-real-3d .cold-product{opacity:1}.has-real-3d .hero-line-outline{top:61%}}
@media(max-width:380px){#hero-3d-controls{bottom:20svh}#hero-3d-controls button{padding:9px 11px}.has-real-3d[data-chapter=anatomy] #hero-3d-controls{bottom:14svh}}

.has-real-3d[data-chapter=anatomy] #explode-burger{display:none}

#anatomy{scroll-margin-top:-96px}
@media(max-width:800px){#anatomy{scroll-margin-top:-82px}}

/* Quiet photographic first view; scrolling reveals the existing ingredient geometry. */
.quiet-hero .hero-burger .steam,.quiet-hero .ambient .embers{display:none}
.quiet-hero .ambient *{animation:none!important}
.quiet-hero #hero-3d-controls{display:none!important}
.quiet-hero.has-real-3d .hero-burger{
  display:block;inset:auto;left:55%;top:50%;width:var(--burger-width);height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-5deg);
  opacity:calc(1 - var(--hero-transition,0));will-change:opacity;pointer-events:none;
}
.quiet-hero.has-real-3d .hero-burger>img{width:100%;height:100%;object-fit:contain}
.quiet-hero.has-real-3d #scene>.food-webgl{z-index:1}
@media(max-width:800px){
  .quiet-hero.has-real-3d .hero-burger{left:50%;top:calc(49% + var(--hero-transition,0)*13%)}
}

/* Match the photo handoff to the reserved center column before ingredients spread. */
@media(min-width:801px){
  .quiet-hero.has-real-3d .hero-burger{left:calc(55% - var(--hero-transition,0)*1%);transform:translate(-50%,-50%) rotate(-5deg) scale(calc(1 - var(--hero-transition,0)*.20))}
}