/* A transparent fixed-angle product reveal; the page retains native scroll. */
.hero-pack-track{position:relative;min-width:0}
.hero .hero-pack-track .hero-art{display:flex;flex-direction:column;justify-content:center;align-items:stretch;position:relative;padding:38px 12px 64px;min-height:0;overflow:visible;aspect-ratio:auto;height:auto}
.hero-pack-view{position:relative;width:100%;min-width:0}
.hero-pack-stage{position:relative;width:100%;height:clamp(330px,36vw,540px);isolation:isolate}
.hero-pack-stage canvas,.hero .hero-pack-stage .hero-pack-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent;object-fit:contain;pointer-events:none;touch-action:pan-y}
.hero .hero-pack-stage .hero-pack-fallback{padding:4%;filter:drop-shadow(0 18px 16px #2D536D22)}
.hero-pack-stage canvas{opacity:0}
.hero-pack-view[data-pack-state="ready"] canvas{opacity:1}
.hero-pack-view[data-pack-state="ready"] .hero-pack-fallback{visibility:hidden}
.hero-pack-caption{display:block;text-align:center;margin:6px 0 0;font:600 12px/1.5 var(--body,"DM Sans",sans-serif);letter-spacing:1.2px;color:var(--ink)}
.hero .hero-pack-cue{display:flex;visibility:hidden;align-items:center;justify-content:center;gap:7px;text-align:center;margin:11px 0 0;font:400 12px/1.5 var(--body,"DM Sans",sans-serif);color:var(--muted)}
.hero-pack-cue svg{width:14px;height:14px}
.hero-pack-manual{display:none;max-width:220px;margin:16px auto 0;font:400 12px/1.5 var(--body,"DM Sans",sans-serif);color:var(--ink)}
.hero-pack-manual label{display:block;margin-bottom:6px;text-align:center}
.hero-pack-manual input{display:block;width:100%;accent-color:#202A31;min-height:32px;cursor:pointer}
.hero-pack-manual input:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.hero-pack-view[data-manual="true"] .hero-pack-manual{display:block}
@media(max-width:720px){.hero .hero-pack-track .hero-art{padding:14px 10px 60px}.hero-pack-stage{height:clamp(250px,72vw,440px)}.hero-pack-caption{font-size:10px;margin-top:0}.hero .hero-pack-cue{font-size:11px;margin-top:8px}}

/* Keep the exploration arrow clear without an extra empty row. */
.hero .hero-pack-track .round-link{bottom:12px}

/* The photographed carton stays in front while its printed foil slips out. */
.hero-photo-rig{position:absolute;left:50%;top:50%;width:68%;aspect-ratio:1499 / 1049;transform:translate(calc(-50% - var(--pack-shift,0%)),-50%);pointer-events:none;touch-action:pan-y}
.hero .hero-photo-rig .hero-photo-carton{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;z-index:2;filter:drop-shadow(0 12px 12px #2D536D26);pointer-events:none}
.hero-photo-insert{position:absolute;left:24%;top:16%;width:65%;height:72%;transform:translateX(var(--insert-shift,0%));z-index:1;visibility:hidden}
.hero .hero-photo-insert img{position:static;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.hero-pack-view[data-pack-state="ready"] .hero-photo-insert{visibility:visible}

/* Reserve the complete layout before artwork decodes. Only the insert moves. */
.hero{align-items:start}
.hero .hero-copy,.hero .hero-pack-track .hero-art{position:relative;top:auto}
.hero-pack-view[data-pack-state="ready"] .hero-pack-cue{visibility:visible}
@media(prefers-reduced-motion:reduce){.hero-pack-manual{display:block}.hero .hero-pack-cue{display:none}.hero-pack-view[data-pack-state="fallback"] .hero-pack-manual{visibility:hidden}}

/* A recessed foil tray, with its own perspective and a slim backing edge. */
.hero-insert-surface{position:relative;width:100%;height:100%;transform-origin:left center;transform:perspective(1100px) rotateY(15deg) rotateZ(-1.8deg);border-radius:3%}
.hero-insert-surface::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,#c0d9e1,#648c9c 55%,#436879);transform:translate(1px,3px);box-shadow:1px 7px 8px #25475f29}
.hero .hero-insert-surface img{position:relative;border-radius:inherit;box-shadow:inset 0 -1px 1px #fff8}
.hero-photo-rig::after{content:"";position:absolute;left:91.2%;top:16%;width:5%;height:72%;z-index:3;opacity:var(--insert-contact,0);background:linear-gradient(90deg,#153a4a66,#153a4a1a 40%,transparent);transform:skewY(-1.8deg);pointer-events:none}
@media(max-width:720px){.hero-insert-surface{transform:perspective(600px) rotateY(15deg) rotateZ(-1.8deg)}.hero-insert-surface::before{transform:translate(.6px,2px)}}