/* r2: ネイティブスクロールに固定した演出。値は scroll-scene.js が計算する。 */
.town-scroll-ready .header { position: fixed; }
.hero-scroll-track { position: relative; }
.hero.scroll-driven { position: sticky; transition: none; }
.scroll-driven .stage { transform: none; }
.scroll-driven .hero-gnome,
.scroll-driven .hero-product,
.scroll-driven .mascot-shadow,
.scroll-driven .ingredient { animation: none; }
.scroll-driven .hero-gnome { transform: rotate(-3deg); }
.scroll-driven .ghost { transition: filter .2s; }
.scroll-driven .hero-product,
.scroll-driven .mascot-button,
.scroll-driven .ingredient,
.scroll-driven .ghost { will-change: transform; }
.scroll-foreground {
  position: absolute; left: 50%; top: 51%;
  width: clamp(460px, 80vw, 1180px); aspect-ratio: 1;
  background: url(assets/ingredient-atlas-r3.webp) no-repeat;
  background-size: 200% 200%; opacity: 0;
  filter: drop-shadow(8px 18px 14px #32251919);
  z-index: 11; pointer-events: none; will-change: transform;
}
.scroll-scene-hint {
  position: absolute; bottom: 9px; left: 4.5%; right: 4.5%;
  z-index: 13; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; pointer-events: none;
  font-size: 10px; line-height: 1.2; letter-spacing: .15em; font-weight: 800;
}
.scroll-scene-hint i {
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; background: var(--ink); opacity: .48;
  transform-origin: left center;
}
@media (max-width: 760px) {
  .scroll-scene-hint { left: 6%; right: 6%; font-size: 9px; bottom: 9px; }
  .scroll-foreground { top: 55%; width: 125vw; min-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-track { height: auto !important; }
  .hero.scroll-driven { position: relative; top: auto !important; }
  .scroll-foreground, .scroll-scene-hint { display: none; }
}

/* 小さな食材の一部を主役より奥に置き、表情を隠さない。 */
.scroll-driven .ingredient{z-index:2}

@media(max-width:760px){.hero[data-flavor="2"] .hero-title{font-size:19vw!important}}