/* The physical drink and interactive ingredients are separate, crisp layers. */
.cocktail-transition{--cocktail-colour:#e9d9c8;position:relative;background:var(--cocktail-colour);color:#402b29;isolation:isolate}
.cocktail-stage{position:relative;min-height:850px;overflow:hidden}
.cocktail-static{display:none}
.cocktail-layer{position:absolute;width:min(70vw,1800px);aspect-ratio:16/9;left:50%;top:2%;transform:translateX(-40%);pointer-events:none;z-index:2}
.cocktail-layer canvas{width:100%;height:100%;display:block;position:absolute;inset:0;contain:strict}
.spill-colour{position:absolute;inset:0;background:#e9d9c8;z-index:0;pointer-events:none;clip-path:ellipse(0 0 at 50% 70%)}
.spill-glow{position:absolute;inset:0;background:radial-gradient(ellipse at var(--impact-x,55%) var(--impact-y,55%),#edc975 0, #efd1a1 17%,#e9d9c8 55%);opacity:0}
.ingredient-field{position:absolute;inset:0;z-index:4;pointer-events:none}
.ingredient{position:absolute;left:0;top:0;width:80px;aspect-ratio:1;border:0;background:transparent;padding:0;pointer-events:auto;cursor:grab;touch-action:none;will-change:transform;user-select:none;-webkit-user-select:none}
.ingredient img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 9px #5e3a1614)}
.ingredient:active{cursor:grabbing}.ingredient:focus-visible{outline:1px solid #7f553a;outline-offset:9px;border-radius:35%}
.cocktail-intro,.cocktail-skip{display:none}
.cocktail-reviews{position:relative;z-index:5;width:min(800px,70%);margin:auto;padding:130px 0}
.cocktail-reviews h2{font-size:clamp(3.4rem,5.3vw,5.6rem)}
.cocktail-rating{font-size:.76rem;display:flex;gap:15px;align-items:baseline;margin-top:26px}
.cocktail-rating strong{font-size:1.2rem;font-weight:500}.cocktail-rating a{text-decoration:underline;text-underline-offset:4px}
.cocktail-quotes{margin-top:45px;display:grid;grid-template-columns:1.08fr .92fr 1fr;gap:35px}
.cocktail-quote{border-top:1px solid #70513d44;padding-top:25px}.cocktail-quote blockquote{font-family:Editorial,Georgia,serif;font-size:1.85rem;line-height:1.18}
.cocktail-quote figcaption{display:block;color:#665046;font-size:.68rem;margin-top:22px}.cocktail-quote figcaption a{display:inline-block;padding-block:4px;margin-left:8px}
.cocktail-transition[data-enhanced=true]{height:430svh;background:var(--paper)}
.cocktail-transition[data-enhanced=true] .cocktail-stage{height:100svh;min-height:640px;position:sticky;top:0}
.cocktail-transition[data-enhanced=true] .cocktail-reviews{position:absolute;top:50%;left:50%;translate:-50% -50%;margin:0;padding:0;opacity:0}
.cocktail-transition[data-enhanced=true] .cocktail-intro{display:block;position:absolute;left:9%;top:23%;z-index:3;max-width:35%;pointer-events:none}
.cocktail-intro h2{font-size:clamp(3rem,4.7vw,5.5rem)}.cocktail-intro .eyebrow{font-size:.67rem}
.cocktail-transition[data-enhanced=true] .cocktail-skip{display:block;position:absolute;left:9%;bottom:12%;z-index:6;border:0;border-bottom:1px solid #73553e;background:transparent;color:inherit;padding:9px 0;cursor:pointer;font-size:.78rem}
.cocktail-skip span{margin-left:30px}
.cocktail-transition:not([data-enhanced=true]) .cocktail-layer{display:none}
.cocktail-transition:not([data-enhanced=true]) .ingredient-field{display:none}
@media(min-width:2100px){.cocktail-layer{top:0}.cocktail-transition .cocktail-reviews{width:900px}.cocktail-reviews h2{font-size:6rem}.cocktail-quotes{gap:40px}.cocktail-quote blockquote{font-size:2.1rem}}
@media(max-width:760px){
 .cocktail-stage{min-height:900px}.cocktail-transition[data-enhanced=true]{height:390svh}
 .cocktail-transition[data-enhanced=true] .cocktail-stage{height:100svh;min-height:760px}
 .cocktail-layer{width:132vw;max-width:850px;left:50%;top:15%;transform:translateX(-48%)}
 .cocktail-reviews{width:78%;padding:110px 0}
 .cocktail-reviews h2{font-size:3rem}.cocktail-quotes{grid-template-columns:1fr;gap:20px;margin-top:26px}
 .cocktail-quote{padding-top:16px}.cocktail-quote blockquote{font-size:1.55rem;line-height:1.13}
 .cocktail-quote figcaption{margin-top:10px;font-size:.64rem;display:flex;gap:10px;align-items:baseline}.cocktail-quote figcaption a{margin-left:0}
 .cocktail-rating{margin-top:18px;font-size:.64rem;gap:8px;flex-wrap:wrap}.cocktail-rating strong{font-size:1rem}
 .cocktail-transition[data-enhanced=true] .cocktail-intro{left:7%;top:5%;max-width:86%}
 .cocktail-intro h2{font-size:2.7rem}.cocktail-intro .eyebrow{font-size:.56rem;margin-bottom:12px}
 .cocktail-transition[data-enhanced=true] .cocktail-skip{left:7%;bottom:8%;font-size:.7rem}
 .cocktail-reviews .eyebrow{font-size:.6rem;margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
 .cocktail-transition{height:auto!important;background:#e9d9c8}
 .cocktail-stage{position:relative!important;height:auto!important;min-height:0}
 .cocktail-layer,.cocktail-intro,.cocktail-skip,.spill-colour{display:none!important}
 .cocktail-reviews{position:relative!important;inset:auto!important;translate:none!important;transform:none!important;opacity:1!important;margin:auto!important;padding:110px 0!important}
 .ingredient{will-change:auto}
}