/* Restored original flavour takeovers. Scroll, floating and pointer tilt use separate layers. */
html[data-flavour-motion]{scroll-behavior:auto!important;scroll-padding-top:0}
.flavour-dots .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.flavour-scene{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding-block:110px 70px;scroll-margin-top:0}
.flavour-scene .word{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:-1}
.flavour-scene .word span{font:400 clamp(110px,24vw,380px)/.8 var(--display);text-transform:uppercase;color:var(--word);white-space:nowrap;overflow-wrap:normal}
.flavour-scene .stage{position:relative;width:min(440px,46svh,78vw);aspect-ratio:760/800;z-index:2;transform-style:preserve-3d}
.flavour-scene .cup-motion{position:relative;width:100%;z-index:2;transform-origin:50% 50%}
.flavour-scene .cup{width:100%;height:auto;filter:drop-shadow(0 35px 32px #00000036);animation:flavour-cup-float 6.4s ease-in-out infinite;animation-play-state:paused}
.flavour-scene .ingredient-scroll{position:absolute;width:clamp(56px,9vw,120px);z-index:3;pointer-events:none}
.flavour-scene .ing{width:100%;height:auto;filter:drop-shadow(0 16px 18px #00000030);animation:flavour-ingredient-float 6s ease-in-out infinite;animation-play-state:paused}
.flavour-scene .i2 .ing{animation-duration:7s;animation-delay:-2s}.flavour-scene .i3 .ing{animation-duration:5.5s;animation-delay:-1s}.flavour-scene .i4 .ing{animation-duration:8s;animation-delay:-3s}
.flavour-scene[data-floating=running] .cup,.flavour-scene[data-floating=running] .ing{animation-play-state:running}
@keyframes flavour-ingredient-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(10deg)}}
@keyframes flavour-cup-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.flavour-scene .info{position:absolute;left:0;right:0;bottom:44px;z-index:4}
.flavour-scene .info .wrap{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.flavour-scene .num{font:400 18px/1.2 var(--display);letter-spacing:.06em}
.flavour-scene h2{font:400 clamp(44px,6vw,84px)/1 var(--display);text-transform:uppercase;margin:6px 0 10px}
.flavour-scene p{max-width:34ch;margin:0;font-size:17px;opacity:.9}
.flavour-scene .sizes{display:flex;gap:8px;margin:0}
.flavour-scene .sizes b{font:700 12px/1 var(--body);letter-spacing:.08em;border:2px solid currentColor;border-radius:999px;padding:9px 14px}
.flavour-tools{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:40;display:grid;justify-items:center;gap:20px}
.flavour-dots{display:grid;gap:8px;justify-items:center}.flavour-dots a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;text-decoration:none;color:var(--dotc,var(--ink))}.flavour-dots a::before{content:"";width:10px;height:10px;border:2px solid currentColor;border-radius:50%;transition:background .2s}.flavour-dots a[aria-current=true]::before{background:currentColor}

@media(max-width:1000px) and (min-width:761px){.flavour-scene .info .wrap{padding-right:80px}.flavour-scene h2{font-size:clamp(40px,5.6vw,68px)}}
@media(max-width:760px){
 .flavour-scene{align-content:center;padding-block:90px 100px;gap:28px;scroll-margin-top:0}
 .flavour-scene .word{inset:0 0 170px}.flavour-scene .word span{font-size:clamp(110px,28vw,180px)}
 .flavour-scene .stage{width:min(340px,38svh,70vw)}
 .flavour-scene .ingredient-scroll{width:clamp(46px,15vw,70px)}
 .flavour-scene .ingredient-scroll[style*="width:70px"],.flavour-scene .ingredient-scroll[style*="width:80px"],.flavour-scene .ingredient-scroll[style*="width:90px"]{width:clamp(40px,13vw,64px)!important}
 .flavour-scene .ingredient-scroll[style*="width:150px"]{width:clamp(62px,20vw,90px)!important}
 .flavour-scene .info{position:relative;bottom:auto;width:100%;margin:0}
 .flavour-scene .info .wrap{display:grid;gap:20px;max-width:540px}
 .flavour-scene h2{font-size:clamp(36px,10.4vw,54px);line-height:1.05}
 .flavour-scene .num{font-size:15px}.flavour-scene p{font-size:15px;line-height:1.55;max-width:34ch}
 .flavour-tools{inset:auto auto max(12px,env(safe-area-inset-bottom,0px)) 50%;transform:translateX(-50%);display:flex;gap:10px;border-radius:99px;padding:5px 7px 5px 12px;background:#fff6e8f5;box-shadow:0 4px 24px #2a1a1220;max-width:calc(100vw - 24px)}
 .flavour-dots{display:flex;gap:2px}.flavour-dots a{color:var(--ink);width:24px;height:32px}
}
@media(max-width:599px) and (max-height:640px){.flavour-scene{padding-block:82px 94px;gap:20px}.flavour-scene .stage{width:min(64vw,30svh)}.flavour-scene .ingredient-scroll{width:46px}.flavour-scene .word{inset:0 0 150px}.flavour-scene h2{font-size:36px}.flavour-scene p{font-size:13px}.flavour-scene .info .wrap{gap:16px}.flavour-scene .sizes b{font-size:10px;padding:8px 12px}}
@media(max-height:560px) and (min-width:600px){
 .flavour-scene{grid-template-columns:.9fr 1.1fr;gap:24px;padding:84px 28px 72px;align-content:center}
 .flavour-scene .stage{width:min(220px,46svh);grid-column:2;grid-row:1;justify-self:center}
 .flavour-scene .word span{font-size:clamp(110px,21vw,230px)}.flavour-scene .word{inset:0}
 .flavour-scene .info{position:relative;bottom:auto;grid-column:1;grid-row:1}.flavour-scene .info.gut{padding:0}
 .flavour-scene .info .wrap{display:grid;gap:14px;padding:0}.flavour-scene h2{font-size:36px}.flavour-scene p{font-size:12px}.flavour-scene .num{font-size:13px}.flavour-scene .sizes b{font-size:10px;padding:7px 10px}
 .flavour-scene .ingredient-scroll{width:48px}.flavour-scene .ingredient-scroll[style*="width:"]{width:56px!important}
 .flavour-tools{inset:auto max(12px,env(safe-area-inset-right,0px)) 10px auto;transform:none;display:flex;gap:12px;padding:4px 7px 4px 12px;background:#fff6e8f5;border-radius:99px}
 .flavour-dots{display:flex;gap:2px}.flavour-dots a{color:var(--ink);width:24px;height:32px}
}
@media(prefers-reduced-motion:reduce){.flavour-scene .cup,.flavour-scene .ing{animation:none!important}.flavour-scene .word span,.flavour-scene .cup-motion,.flavour-scene .ingredient-scroll,.flavour-scene .stage{transform:none!important}.flavour-scene .ingredient-scroll{opacity:1!important}}

@media(max-width:900px){.flavour-scene{scroll-margin-top:0}}
