/* Native scroll controls the sequence. No wheel/touch interception. */
.unpack{--tear:0;--reveal:0;--finish:0;--progress:0;position:relative;height:320svh;background:var(--off);border-bottom:1px solid var(--line)}
.unpack-sticky{position:sticky;top:0;height:100svh;min-height:440px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:28px 6% 24px;overflow:hidden;background:var(--off)}
.unpack-heading{text-align:center;position:relative;z-index:5;pointer-events:none}
.unpack-heading .eyebrow{font-size:10px;letter-spacing:1.7px;margin-bottom:14px}
.unpack-heading h2{position:relative;font-size:clamp(37px,4.6vw,65px);line-height:1.01;min-height:2.05em}
.unpack-title-start,.unpack-title-end{display:block}
.unpack-title-start{opacity:calc(1 - var(--finish));transform:translateY(calc(var(--finish) * -12px))}
.unpack-title-end{position:absolute;inset:0;opacity:var(--finish);transform:translateY(calc((1 - var(--finish)) * 12px));font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em}
.unpack-title-end em{color:var(--purple);font-weight:400}
.unpack-scene{position:relative;width:100%;height:100%;min-height:0;max-width:1180px;margin:0 auto;overflow:hidden;background:var(--off);isolation:isolate}
.unpack-cube,.unpack-pouch,.unpack-lid{position:absolute;top:0;left:0;will-change:transform,opacity;transform-origin:center;pointer-events:none}
.unpack-cube{z-index:2;mix-blend-mode:multiply;opacity:0}
.unpack-cube img{width:100%;height:100%;object-fit:contain;user-select:none}
.unpack-pouch{z-index:3;filter:drop-shadow(10px 17px 12px #32154728)}
.pouch-face,.lid-face{position:absolute;inset:0;background-image:url('ohsip-packaging-front-back.png');background-size:208.9% 100%;background-position:left top}
.pouch-face{clip-path:polygon(0 10%,5% 9.4%,10% 10.1%,15% 9.5%,20% 10%,25% 9.4%,30% 10.1%,35% 9.4%,40% 10%,45% 9.3%,50% 10%,55% 9.5%,60% 10%,65% 9.4%,70% 10%,75% 9.4%,80% 10%,85% 9.5%,90% 10%,95% 9.4%,100% 10%,100% 100%,0 100%);border-radius:0 0 9px 9px}
.pouch-face::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffff22,transparent 9%,transparent 90%,#32154728);border:1px solid #32154720}
.pouch-opening{position:absolute;top:8.4%;left:1%;width:98%;height:6%;border-radius:50%;background:#25112e;border:3px solid #b4a9ba;transform:scaleY(var(--tear));transform-origin:center bottom}
.unpack-lid{z-index:4;filter:drop-shadow(4px 5px 5px #32154720)}
.lid-face{clip-path:polygon(0 0,100% 0,100% 10%,95% 9.4%,90% 10%,85% 9.5%,80% 10%,75% 9.4%,70% 10%,65% 9.4%,60% 10%,55% 9.5%,50% 10%,45% 9.3%,40% 10%,35% 9.4%,30% 10.1%,25% 9.4%,20% 10%,15% 9.5%,10% 10.1%,5% 9.4%,0 10%)}
.tear-guide{position:absolute;left:-12px;right:-12px;top:9.7%;height:1px;border-top:1px dashed var(--cream);display:flex;justify-content:space-between;align-items:center;opacity:calc(1 - var(--tear))}
.tear-guide span{background:var(--cream);color:var(--dark);font-size:9px;font-weight:800;padding:6px 9px;letter-spacing:1px;border-radius:3px}
.unpack-aside{position:absolute;right:15%;top:35%;display:grid;justify-items:center;gap:12px;transform:rotate(10deg);opacity:calc(1 - var(--reveal));pointer-events:none}
.unpack-aside img{width:65px}.unpack-aside span{font-size:10px;font-weight:800;line-height:1.4;text-align:center;letter-spacing:.7px}
.unpack-caption{position:absolute;top:48%;transform:translateY(calc((1 - var(--finish)) * 20px));opacity:var(--finish);z-index:5;width:195px;pointer-events:none}
.caption-left{left:3%}.caption-right{right:2%}
.unpack-caption::before{content:'';display:block;width:36px;height:1px;background:var(--purple);margin-bottom:16px}
.unpack-caption span{font-size:10px;letter-spacing:1px;font-weight:800}.unpack-caption p{font-size:13px;line-height:1.7;margin-top:10px}
.unpack-controls{max-width:460px;width:100%;margin:8px auto 0;position:relative;z-index:6}
.unpack-status{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1px;font-weight:800;margin-bottom:10px}
.unpack-status a{font-weight:400;letter-spacing:0;font-size:11px;border-bottom:1px solid var(--line);padding:4px 0}
.unpack-slider-label{display:block;font-size:10px;color:var(--purple);margin-bottom:3px}
#unpack-slider{display:block;width:100%;height:24px;margin:0;cursor:ew-resize;accent-color:var(--purple);background:transparent}
#unpack-slider:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
.unpack-chapters{display:flex;justify-content:space-between;gap:10px;font-size:8px;font-weight:700;letter-spacing:.9px;color:#695c6c;margin-top:3px}
.unpack-chapters .active{color:var(--purple);text-decoration:underline;text-underline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.unpack-link{display:inline-block;margin-top:18px;padding:6px 0;font-size:11px;font-weight:800;border-bottom:1px solid var(--dark);letter-spacing:.5px}
.unpack-static{height:auto}.unpack-static .unpack-sticky{position:relative;height:720px}.unpack-static .unpack-slider-label,.unpack-static #unpack-slider,.unpack-static .unpack-chapters{display:none}
@media(max-width:900px){.unpack-caption{width:150px}.caption-left{left:0}.caption-right{right:0}.unpack-caption span{font-size:9px}.unpack-caption p{font-size:12px}.unpack-aside{right:8%}}
@media(max-width:650px){.unpack{height:300svh}.unpack-sticky{padding:24px 6% 20px}.unpack-heading .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:13px}.unpack-heading h2{font-size:38px}.unpack-caption{top:auto;bottom:0;width:46%}.unpack-caption::before{margin-bottom:9px;width:25px}.unpack-caption span{font-size:8px;letter-spacing:.2px}.unpack-caption p{font-size:11px;line-height:1.5;margin-top:6px}.unpack-aside{right:0;top:24%;gap:8px}.unpack-aside img{width:45px}.unpack-aside span{font-size:8px;letter-spacing:0}.unpack-status{gap:8px;font-size:8px;letter-spacing:.4px}.unpack-status a{font-size:10px}.unpack-chapters{font-size:7px;letter-spacing:.3px}.unpack-controls{margin-top:20px}.unpack-static{height:auto}.unpack-static .unpack-sticky{height:740px}}
@media(max-height:600px){.unpack-sticky{padding-top:17px;padding-bottom:16px}.unpack-heading h2{font-size:32px}.unpack-heading .eyebrow{margin-bottom:8px}.unpack-controls{margin-top:10px}.unpack-caption{top:43%;bottom:auto}.unpack-caption p{font-size:11px}.unpack-caption::before{margin-bottom:7px}.unpack-aside img{width:44px}}
@media(max-width:650px) and (max-height:600px){.unpack-heading h2{font-size:30px}.unpack-caption{top:auto;bottom:0}.unpack-caption p{font-size:9px}.unpack-caption span{font-size:7px}.unpack-caption::before{display:none}}
@media(prefers-reduced-motion:reduce){.unpack{height:auto}.unpack-sticky{position:relative;height:720px;min-height:0}.unpack-slider-label,#unpack-slider,.unpack-chapters{display:none}}
@media(max-width:650px){.unpack-aside{top:8%;right:2%}}