/* 動画と同じ冒頭フレームを使い、読み込み中も4人の配置を保つ。 */
.scene-video{opacity:0;pointer-events:none;transition:none;object-fit:contain}
.scene-poster{opacity:1;transition:none}
.video-ready:not(.reduced-video) .scene-video{opacity:1}
.video-ready:not(.reduced-video) .scene-poster{opacity:0}
.reduced-video .scene-video{opacity:0}
.reduced-video .scene-poster{opacity:1}
/* 背景マスクを持つ素材には色抜きを重ねず、服・肌・靴の白を保つ。 */
.scene-video,.scene-poster{filter:blur(var(--figure-blur,0px));mix-blend-mode:normal}
.scene-video-source{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none;filter:none}
/* 透明度を素材に保持した画像は、毎フレームのSVG色抜きを省く。奥のぼけは維持。 */
img[data-cutout="baked"]{filter:none;mix-blend-mode:normal}
.scene-cup[data-cutout="baked"]{filter:blur(var(--figure-blur,0px))}
/* 転がる画像の描画を帯の内側へ限定し、本文のスクロールとは分離する。 */
.js #flavor-story{height:calc(var(--scroll-viewport,100svh) * 9.8)}
.hero-stage{height:var(--scroll-viewport,100svh)}
@media(max-width:760px){.js #flavor-story{height:calc(var(--scroll-viewport,100svh) * 9.4)}}
@media(prefers-reduced-motion:reduce){.js #flavor-story{height:var(--scroll-viewport,100svh)}}
.fruit-roll-track{contain:layout paint;isolation:isolate}
.fruit-roll{overflow-anchor:none}
[data-roll-fruit]{will-change:auto}
.fruit-roll.is-rolling [data-roll-fruit]{will-change:transform}
@media(max-width:1024px),(pointer:coarse){
  .hero-stage:after{background-image:none}
  .scene-foreground,.scene-poster,.scene-cup,[data-roll-fruit]{will-change:auto}
  .product-dialog::backdrop{backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .video-ready .scene-video{opacity:0}
  .video-ready .scene-poster{opacity:1}
}
