/* The scroll timeline owns these properties: no CSS easing behind the playhead. */
.flavour-journey { height: 400svh; }
.hero-stage { isolation: isolate; transition: none; }
.hero-can, .hero-can.active { transform: none; transition: none; will-change: opacity; }
.hero-product { transform-origin: 50% 52%; will-change: transform; }
.hero-title { z-index: 1; }
.hero-title > span { will-change: transform; }
#hero-word { display: inline-block; will-change: transform, opacity; }
.hero-eyebrow, .sun-doodle { z-index: 1; }
.hero-grain { z-index: 7; }
.flavour-wipe {
  position: absolute; top: 54%; left: 50%; width: 240vmax; height: 240vmax;
  border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  transform-origin: center; pointer-events: none; z-index: -1; will-change: transform;
}
.ingredient-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.flying-ingredient {
  position: absolute; object-fit: contain; opacity: 0; visibility: hidden;
  will-change: transform, opacity; filter: drop-shadow(12px 20px 13px #543b2926);
}
.ingredient-slot-0 { left: 23%; top: 53%; width: clamp(160px, 18vw, 275px); }
.ingredient-slot-1 { left: 79%; top: 39%; width: clamp(125px, 14vw, 210px); }
.ingredient-slot-2 { left: 66%; top: 65%; width: clamp(90px, 10vw, 150px); }
.sun-doodle { left: 7%; top: 34%; width: 60px; }
.flavour-controls { z-index: 8; }
.scroll-hint { z-index: 4; }
.can-shadow { will-change: opacity, transform; }
#hero-category, #hero-flavour, #hero-description { will-change: transform, opacity; }
.is-scrolled .site-header { transition: top .2s, background .15s; }
@media(max-width:1100px) and (min-width:761px) {
  .ingredient-slot-0 { left: 20%; top: 50%; width: 170px; }
  .ingredient-slot-1 { left: 83%; top: 42%; width: 140px; }
  .ingredient-slot-2 { left: 67%; top: 63%; width: 100px; }
}
@media(max-width:760px) {
  .flavour-journey { height: 340svh; }
  .hero-stage { min-height: 640px; }
  .hero-product { top: 35%; height: 43%; width: 46vw; }
  .ingredient-slot-0 { left: 14%; top: 47%; width: 110px; }
  .ingredient-slot-1 { left: 87%; top: 39%; width: 95px; }
  .ingredient-slot-2 { left: 76%; top: 61%; width: 72px; }
  .sun-doodle { left: 5%; top: 36%; width: 30px; }
  .flavour-controls { right: 4%; bottom: 28%; gap: 6px; }
  .flavour-dot { width: 25px; height: 25px; }
  .flavour-note { bottom: 9%; }
}
@media(max-height:740px) and (max-width:760px) {
  .hero-eyebrow { top: 17%; }
  .hero-title { top: 22%; }
  .hero-product { top: 34%; height: 40%; }
  .hero-copy { bottom: 8%; }
  .flavour-note { bottom: 8%; }
  .flavour-note h2 { font-size: 21px; }
  .flavour-controls { bottom: 30%; }
}
@media(prefers-reduced-motion:reduce), (max-height:600px) and (min-width:600px) {
  .flavour-journey { height: auto; }
  .hero-stage { position: relative; }
  .hero-can, .hero-product, .flying-ingredient, .hero-title > span, #hero-word { will-change: auto; }
  .flavour-wipe { display: none; }
  .journey-progress { display: none; }
}
/* A full-scene WebGL canvas renders the actual curved can, its metal and lighting. */
.can-webgl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; touch-action: pan-y; }
.has-3d .hero-can { display: none !important; }
.has-3d .hero-product { pointer-events: none; }
.has-3d .can-shadow { filter: blur(17px); }
.can-inspect-hint { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 4; pointer-events: none; font-size: 8px; letter-spacing: 1.4px; display: none; }
.has-3d .can-inspect-hint { display: block; }
@media(max-width:760px) { .has-3d .can-inspect-hint { display: none; } }
.can-webgl { visibility: hidden; }
.has-3d .can-webgl { visibility: visible; }
.can-webgl:focus-visible { outline: 2px solid var(--scene-ink); outline-offset: -4px; }
/* Packaging is a real model change, with identical flavour and scroll controls. */
.hero-format-switch { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; padding: 3px; gap: 3px; border: 1px solid #333c2840; border-radius: 30px; background: #f8f6ed70; backdrop-filter: blur(8px); }
.hero-format-switch button { padding: 7px 20px; border-radius: 24px; font-size: 10px; line-height: 1.25; min-width: 72px; }
.hero-format-switch button[aria-pressed="true"] { color: #f8f6ed; background: var(--scene-ink); }
.hero-format-switch button:focus-visible { outline-offset: 2px; }
.hero-stage .hero-eyebrow { top: 18.5%; }
.hero-pack-size { display: block; font-size: 9px; margin: -4px 0 8px; opacity: .8; }
.product-webgl { position: absolute; inset: 0; touch-action: pan-y; }
.has-3d > .product-view-fallback { visibility: hidden; }
@media(max-width:760px) {
  .hero-format-switch { top: 101px; }
  .hero-format-switch button { padding: 7px 18px; font-size: 9px; }
  .hero-stage .hero-eyebrow { top: 145px; }
  .hero-stage .hero-title { top: 177px; }
  .hero-pack-size { font-size: 7px; margin: 3px 0 6px; }
}
@media(max-height:740px) and (max-width:760px) {
  .hero-stage .hero-title { font-size: 16vw; }
  .hero-stage .hero-eyebrow { top: 141px; }
  .hero-stage .hero-title { top: 171px; }
}
@media(max-height:600px) and (min-width:600px) {
  .hero-format-switch { top: 100px; left: 7%; transform: none; }
}