@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');
:root{--bg:#ed255a;--ink:#fff5f0;--travel:0;--hue:0;--brightness:1;--saturation:1;--turn:0deg;--lift:0px;--scale:1;--pointer-x:0px;--pointer-y:0px}
*{box-sizing:border-box}html{margin:0;overscroll-behavior-y:none}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}body::-webkit-scrollbar{width:0}.scroll-experience{height:100svh;position:relative}.hero{height:100svh;min-height:480px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:var(--bg)}header{position:absolute;inset:0 5% auto;height:115px;z-index:9;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:55px;line-height:1;letter-spacing:-5px}.header-center{font-size:12px;letter-spacing:2px;font-weight:600;position:absolute;left:50%;transform:translateX(-50%)}.header-right{font-size:14px}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#ffffff1b,transparent 62%);pointer-events:none}.flavor-scene{position:absolute;inset:0;--offset:0;visibility:hidden;pointer-events:none}.scene-0{visibility:visible}.flavor-word{position:absolute;top:48%;left:50%;width:100%;text-align:center;font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-weight:800;line-height:.95;font-size:clamp(110px,18.2vw,310px);letter-spacing:-.025em;transform:translate(calc(-50% + var(--offset)*90vw),-50%);will-change:transform;white-space:nowrap;user-select:none;z-index:0}.scene-1 .flavor-word{font-size:clamp(110px,20.5vw,345px)}.fruit{position:absolute;width:var(--width);height:auto;aspect-ratio:1;object-fit:contain;left:var(--left);top:var(--top);transform:translate(calc(var(--offset)*var(--tx) + var(--pointer-x)*var(--depth)),calc(var(--offset)*var(--ty) + var(--pointer-y)*var(--depth))) rotate(calc(var(--rotation) + var(--offset)*var(--spin)));filter:drop-shadow(12px 20px 14px #39051b24);will-change:transform;user-select:none;-webkit-user-drag:none}.f1{--width:16%;--left:5%;--top:17%;--rotation:-24deg;--tx:110vw;--ty:-36vh;--spin:85deg;--depth:-.6;z-index:3}.f2{--width:12%;--left:77%;--top:18%;--rotation:31deg;--tx:85vw;--ty:-24vh;--spin:-65deg;--depth:.5;z-index:1}.f3{--width:19%;--left:79%;--top:59%;--rotation:-18deg;--tx:120vw;--ty:32vh;--spin:105deg;--depth:1.1;z-index:5}.f4{--width:11%;--left:20%;--top:65%;--rotation:30deg;--tx:95vw;--ty:24vh;--spin:-90deg;--depth:.7;z-index:2}.scene-1 .f1{--width:17%;--left:3%;--top:14%;--rotation:10deg}.scene-1 .f2{--width:14%;--left:80%;--top:17%;--rotation:-30deg}.scene-1 .f3{--width:20%;--left:78%;--top:59%;--rotation:25deg}.scene-1 .f4{--width:13%;--left:18%;--top:65%;--rotation:-15deg}.scene-2 .f1{--width:19%;--left:2%;--top:14%;--rotation:-30deg}.scene-2 .f2{--width:16%;--left:79%;--top:16%;--rotation:20deg}.scene-2 .f3{--width:23%;--left:78%;--top:57%;--rotation:35deg}.scene-2 .f4{--width:14%;--left:16%;--top:63%;--rotation:-15deg}.product{position:absolute;inset:0;z-index:4;pointer-events:none}.product-motion{position:absolute;left:50%;top:48%;width:min(34vw,440px);height:70%;transform:translate(calc(-50% + var(--pointer-x)*.22),calc(-50% + var(--lift) + var(--pointer-y)*.22)) rotate(var(--turn)) scale(var(--scale));will-change:transform}.can{display:block;width:100%;height:100%;object-fit:contain;filter:hue-rotate(calc(var(--hue)*1deg)) saturate(var(--saturation)) brightness(var(--brightness)) drop-shadow(8px 24px 20px #47041d20);user-select:none;-webkit-user-drag:none}.product-shadow{position:absolute;left:50%;top:80%;width:23%;height:2.5%;transform:translateX(-50%) scale(var(--scale));border-radius:50%;background:#43051828;filter:blur(14px)}.footer{position:absolute;bottom:5.8%;left:5%;right:5%;z-index:8;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.flavor-copy{min-width:270px}.copy-clip{height:31px;overflow:hidden;position:relative}.copy{display:block;position:absolute;left:0;top:0;font-size:24px;font-weight:500;line-height:31px;letter-spacing:-.6px;transform:translateY(calc(var(--copy-offset,0)*110%));opacity:var(--copy-opacity,1)}.description-clip{height:25px;position:relative;overflow:hidden;margin-top:4px}.description{position:absolute;left:0;top:0;font-size:13px;line-height:25px;white-space:nowrap;transform:translateY(calc(var(--copy-offset,0)*110%));opacity:var(--copy-opacity,1)}.scroll-hint{display:flex;align-items:center;gap:14px;position:absolute;left:50%;transform:translateX(-50%);bottom:0;white-space:nowrap;font-size:13px}.mouse{display:block;width:21px;height:32px;border:1px solid #fff5f080;border-radius:12px;position:relative}.mouse>span{position:absolute;left:9px;top:7px;width:1px;height:6px;background:var(--ink);animation:scrollWheel 2.2s ease-in-out infinite}.progress{height:2px;background:#fff5f02a;width:100%;margin-top:9px;overflow:hidden}.progress>span{display:block;height:100%;width:calc(var(--travel)*100%);background:var(--ink)}.volume{font-size:13px;white-space:nowrap;padding-bottom:1px;opacity:.9}.volume>span{padding:0 8px;opacity:.6}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes scrollWheel{0%,100%{transform:translateY(0);opacity:.5}45%{transform:translateY(7px);opacity:1}75%{transform:translateY(7px);opacity:0}}
@media(min-width:1600px){.flavor-word{font-size:18vw}.scene-1 .flavor-word{font-size:20vw}.product-motion{width:32vw;max-width:560px}}
@media(max-width:900px){header{height:90px}.brand{font-size:45px}.header-right{font-size:12px}.footer{bottom:5%}.flavor-copy{min-width:200px}.description{font-size:12px}.volume{display:none}.scroll-hint{left:auto;right:0;transform:none}.product-motion{width:44vw;height:65%}.flavor-word{font-size:18vw}.scene-1 .flavor-word{font-size:20.5vw}.f1{--width:19%;--left:1%;--top:23%}.f2{--width:16%;--left:81%;--top:23%}.f3{--width:23%;--left:79%;--top:61%}.f4{--width:15%;--left:10%;--top:62%}}
@media(max-width:600px){.hero{min-height:550px}header{height:86px;inset-inline:7%}.brand{font-size:43px}.header-center{position:static;transform:none;font-size:10px;letter-spacing:1.6px}.header-right{display:none}.flavor-word{font-size:21vw;top:44%;letter-spacing:-.035em}.scene-1 .flavor-word{font-size:23vw}.product-motion{width:76vw;height:55%;top:46%}.product-shadow{top:73%;width:43%;height:2%}.f1{--width:31%;--left:-4%;--top:17%;--rotation:-25deg}.f2{--width:24%;--left:79%;--top:23%;--rotation:30deg}.f3{--width:36%;--left:81%;--top:60%;--rotation:-25deg}.f4{--width:22%;--left:2%;--top:63%;--rotation:30deg}.scene-1 .f1{--width:34%;--left:-7%;--top:18%}.scene-1 .f2{--width:26%;--left:79%;--top:24%}.scene-1 .f3{--width:37%;--left:80%;--top:60%}.scene-1 .f4{--width:25%;--left:0%;--top:64%}.scene-2 .f1{--width:36%;--left:-7%;--top:18%}.scene-2 .f2{--width:28%;--left:79%;--top:24%}.scene-2 .f3{--width:42%;--left:78%;--top:59%}.scene-2 .f4{--width:28%;--left:-3%;--top:64%}.footer{left:7%;right:7%;bottom:4.5%;height:120px;justify-content:center;align-items:flex-start}.flavor-copy{text-align:center;min-width:0;width:100%}.copy-clip{height:29px}.copy{font-size:22px;line-height:29px;width:100%;text-align:center}.description{font-size:12px;width:100%;text-align:center}.scroll-hint{left:50%;right:auto;bottom:0;transform:translateX(-50%);font-size:12px}.mouse{width:18px;height:27px}.mouse>span{left:7.5px;height:5px}.progress{margin-top:7px}}
@media(max-height:600px) and (min-width:601px){header{height:75px}.brand{font-size:40px}.footer{bottom:5%}.product-motion{height:66%;top:48%}.f1,.scene-1 .f1,.scene-2 .f1{--top:10%}.f2,.scene-1 .f2,.scene-2 .f2{--top:12%}}
@media(prefers-reduced-motion:reduce){.mouse>span{animation:none}.fruit{will-change:auto}.product-motion{will-change:auto}}

.can{animation:idleCan 5.5s ease-in-out infinite}.fruit{animation:idleFruit 6.5s ease-in-out infinite}.f2{animation-delay:-2s}.f3{animation-delay:-3.5s}.f4{animation-delay:-1s}@keyframes idleCan{0%,100%{translate:0 0}50%{translate:0 -7px}}@keyframes idleFruit{0%,100%{translate:0 0}50%{translate:0 -10px}}@media(prefers-reduced-motion:reduce){.can,.fruit{animation:none}}

html,body{overflow:hidden}.hero{touch-action:pinch-zoom}