/* The scroll position is the single clock for the entire pinned story. */
.scroll-story{--accent:#667e42;--ink:#233d2d;background:#f3efdf;color:var(--ink);height:420svh;position:relative;isolation:isolate}
.scroll-stage{position:sticky;top:86px;height:calc(100svh - 86px);min-height:470px;overflow:clip;background:#f3efdf;isolation:isolate}
.scroll-film-canvas,.scroll-world{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scroll-film-canvas{z-index:0}.scroll-world{z-index:2}.scroll-world canvas{width:100%;height:100%;display:block}.scroll-film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#f3efdf 0%,#f3efdfed 29%,#f3efdf00 56%);z-index:1;pointer-events:none}
.scroll-top{position:absolute;top:28px;left:6%;right:6%;display:flex;justify-content:space-between;gap:20px;z-index:6;font-size:8px;letter-spacing:.17em}.scroll-top>span{display:flex;align-items:center;gap:12px}.scroll-top>span:before{content:'';width:28px;height:1px;background:currentColor}.scroll-top button{font-size:9px;letter-spacing:0;padding:7px 12px;border:1px solid #596c493d;border-radius:30px}
.scroll-panel{position:absolute;inset:0;z-index:3;pointer-events:none}.scroll-panel.is-active{pointer-events:auto}.scroll-panel:not(:first-child){opacity:0}.scroll-copy{position:absolute;left:6%;top:49%;translate:0 -50%;width:39%;max-width:550px}.scroll-kicker{font-size:9px;letter-spacing:.17em;color:#7c8569;margin-bottom:20px}.scroll-title{font:600 clamp(62px,7.3vw,112px)/1.05 'Playfair Display',Georgia,serif;letter-spacing:-.064em;margin:0}.scroll-title>span{display:block;overflow:clip;padding-bottom:.13em;margin-bottom:-.13em}.scroll-title b{display:block;font:inherit}.scroll-title em{color:var(--accent);font-weight:600}.scroll-subtitle{font:600 clamp(21px,2.1vw,31px)/1.4 'Playfair Display',Georgia,serif;letter-spacing:-.035em;margin-top:21px}.scroll-description{font-size:12px;line-height:1.9;max-width:310px;color:#6c755f;margin-top:15px}.scroll-actions{display:flex;align-items:center;gap:25px;margin-top:24px}.scroll-order{background:#29422f;color:#fff9e9;padding:14px 20px;display:flex;align-items:center;gap:28px;border-radius:3px;font-size:11px;font-weight:600}.scroll-order span{font-size:18px}.scroll-actions a{font-size:10px;padding-bottom:5px;border-bottom:1px solid #81936b}.scroll-price{font-size:10px;margin-top:15px;color:#6e795f}.scroll-price strong{font:500 11px 'JetBrains Mono',monospace;color:#344c30}
.scroll-product{position:absolute;left:48%;right:1%;top:10%;bottom:15%;display:flex;align-items:end;justify-content:center;border:0;background:transparent;padding:0;transform-origin:50% 90%;cursor:pointer}.scroll-product img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none;user-select:none;-webkit-user-drag:none}.scroll-product:focus-visible{outline:2px solid #6d8156;outline-offset:-20px;border-radius:40%}.scroll-product:after{content:'Chạm ly để tùy chỉnh ↗';position:absolute;bottom:-9%;left:0;right:0;font-size:9px;text-align:center;opacity:.7}
.scroll-label{position:absolute;right:6%;bottom:12%;z-index:4;text-align:right;pointer-events:none}.scroll-label strong{font:600 24px 'Playfair Display',Georgia,serif;display:block}.scroll-label small{font-size:7px;letter-spacing:.14em;display:block;margin-top:6px;color:#6c7c60}
.scroll-bot{position:absolute;bottom:23px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:6}.scroll-hint{font-size:9px;letter-spacing:.08em;display:flex;align-items:center;gap:15px}.scroll-hint span{font-size:22px}.scroll-chapters{display:flex;gap:24px}.scroll-chapters button{font-size:10px;opacity:.45;padding:10px 0;border-bottom:1px solid transparent}.scroll-chapters button[aria-current=step]{opacity:1;border-color:var(--accent)}.scroll-chapters button small{font-size:8px;margin-right:6px;opacity:.6}.scroll-percent{font:500 10px 'JetBrains Mono',monospace;color:#758264;min-width:35px;text-align:right}.scroll-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#9baa7b25;z-index:7}.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--accent)}
.scroll-prop{position:absolute;left:44%;bottom:13%;width:14%;max-width:190px;z-index:4;pointer-events:none;opacity:0}.scroll-prop img{width:100%;height:auto}.scroll-bypass{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.scroll-bypass:focus{width:auto;height:auto;clip-path:none;left:6%;top:65px;padding:12px;background:#fff9e8;z-index:10}
.motion-outro{padding:66px 24px;text-align:center;background:#e9e9da;color:#30412e}.motion-outro-kicker{display:block;font-size:9px;letter-spacing:.2em;color:#7f896a}.motion-outro h2{font:600 clamp(32px,4vw,53px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.045em;margin:20px 0}.motion-outro h2 br{display:none}.motion-outro h2 em{color:#7b8854}.motion-outro p{font-size:12px;line-height:1.95;color:#6e765e}.motion-outro>a{display:inline-flex;gap:25px;font-size:11px;margin-top:25px;border-bottom:1px solid #8e9973;padding-bottom:10px}.motion-menu-status{display:block;margin-top:20px;font-size:9px;color:#838a72}
@media(max-height:720px) and (min-width:768px){.scroll-title{font-size:64px}.scroll-copy{top:48%}.scroll-kicker{font-size:8px;margin-bottom:14px}.scroll-subtitle{font-size:23px;margin-top:15px}.scroll-description{font-size:11px;margin-top:11px;max-width:290px}.scroll-actions{margin-top:19px}.scroll-order{padding:11px 17px}.scroll-price{margin-top:12px}.scroll-label{bottom:15%}.scroll-label strong{font-size:20px}.scroll-top{top:22px}.scroll-product{top:9%;bottom:17%}}
@media(max-width:767px){.scroll-story{height:420svh}.scroll-stage{top:74px;height:calc(100svh - 74px);min-height:620px}.scroll-top{top:18px;left:6%;right:6%;font-size:6px;letter-spacing:.12em}.scroll-top button{font-size:8px;padding:6px 8px}.scroll-copy{top:11%;left:6%;width:88%;max-width:none;translate:none}.scroll-kicker{font-size:7px;margin-bottom:13px}.scroll-title{font-size:clamp(43px,12vw,62px);line-height:1.12}.scroll-title>span{display:inline-block;vertical-align:bottom}.scroll-title>span+span{margin-left:.15em}.scroll-subtitle{font-size:21px;margin-top:12px}.scroll-description{font-size:10px;line-height:1.8;max-width:280px;margin-top:9px}.scroll-actions{gap:23px;margin-top:16px}.scroll-order{font-size:10px;padding:11px 15px;gap:23px}.scroll-actions a{font-size:9px}.scroll-price{font-size:9px;margin-top:10px}.scroll-product{left:6%;right:6%;top:45%;bottom:12%}.scroll-product:after{font-size:8px;bottom:-8%}.scroll-film-canvas{mask-image:linear-gradient(180deg,transparent 43%,#000 62%)}.scroll-film-shade{display:none}.scroll-label{right:5%;bottom:15%;max-width:105px}.scroll-label strong{font-size:16px}.scroll-label small{font-size:5px}.scroll-bot{bottom:12px;gap:8px}.scroll-hint{font-size:7px;gap:7px}.scroll-hint span{font-size:15px}.scroll-chapters{gap:16px}.scroll-chapters button{font-size:8px}.scroll-chapters button small{display:none}.scroll-percent{font-size:8px;min-width:29px}.scroll-prop{left:5%;bottom:14%;width:24%}.motion-outro{padding:48px 24px}.motion-outro h2 br{display:block}.motion-outro p{font-size:11px}}
@media(max-height:740px) and (max-width:767px){.scroll-stage{min-height:580px}.scroll-title{font-size:40px}.scroll-copy{top:12%}.scroll-subtitle{font-size:18px;margin-top:8px}.scroll-description{font-size:9px;max-width:240px}.scroll-actions{margin-top:11px}.scroll-order{padding:9px 13px}.scroll-product{top:47%;bottom:13%}.scroll-label{bottom:17%;max-width:90px}}
.scroll-story.is-reduced{height:auto}.is-reduced .scroll-stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible}.is-reduced .scroll-film-canvas,.is-reduced .scroll-world,.is-reduced .scroll-film-shade,.is-reduced .scroll-prop,.is-reduced .scroll-progress,.is-reduced .scroll-bot{display:none}.is-reduced .scroll-top{position:relative;top:auto;padding-top:20px}.is-reduced .scroll-panel{position:relative;min-height:570px;opacity:1!important;pointer-events:auto;transform:none!important}.is-reduced .scroll-copy{top:48%}.is-reduced .scroll-label{bottom:8%}.is-reduced .scroll-product:after{display:none}
@media(max-width:767px){.is-reduced .scroll-panel{min-height:690px}.is-reduced .scroll-copy{top:30px}.is-reduced .scroll-product{top:43%;bottom:7%}.is-reduced .scroll-label{bottom:8%}}

.scroll-story{flex-shrink:0}.scroll-product{bottom:17%}
@media(max-width:767px){.scroll-product{bottom:12%}}

.scroll-label{background:#f3efdfdf;padding:9px 13px;border-left:1px solid #8b98745c;border-radius:2px}
@media(max-width:767px){.scroll-label{padding:7px 9px}}
.scroll-botanicals,.ingredient-set{position:absolute;inset:0;pointer-events:none}.scroll-botanicals{z-index:5;perspective:900px}.scroll-ingredient{position:absolute;pointer-events:auto;border:0;background:transparent;padding:0;touch-action:pan-y;cursor:pointer;transform-style:preserve-3d}.ingredient-sprite{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:50% 55%}.scroll-ingredient:focus-visible{outline:1px solid #647a44;outline-offset:3px;border-radius:50%}.ingredient-name{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%) rotate(var(--counter-turn,0deg));background:#fff9e8ed;border:1px solid #8c99784a;color:#3c5031;padding:4px 7px;border-radius:20px;font-size:8px;white-space:nowrap;opacity:0;pointer-events:none}.scroll-ingredient.is-reacting .ingredient-name{opacity:1}.is-reduced .scroll-botanicals{display:none}

.ingredient-sprite{transition:rotate .18s ease-out}