/* ==========================================================================
   Version B hero: the carton. A rendered frame sequence scrubbed over one
   pinned screen; the frames are on white and multiplied onto the paper.
   --u  0..1  how far the pinned hero has been scrolled (set by home.js)
   ========================================================================== */
.hero.hero--pack { background: var(--rdw-paper); }
.hero--pack .hero__pin { display: block; padding: 0; min-height: 100dvh; background: var(--rdw-paper); }
.hero--pack .hero__pin::after { content: none; }
.hero--pack .hero__pin .unbox__stage { position: absolute; inset: 70px 0 0 0; aspect-ratio: auto; margin: 0; scale: 1; mix-blend-mode: multiply; }
.js-scroll .hero--pack .hero__pin .unbox__stage { scale: 1; }
.hero--pack .unbox__canvas, .hero--pack .unbox__still, .hero--pack .unbox__end { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.hero--pack .hero__col { position: absolute; z-index: 2; left: var(--pad); top: 50%; translate: 0 -46%; width: min(42vw, 620px); display: block; }
.hero--pack .hero__title { font-size: clamp(3rem, 7vw, 6.6rem); }
/* the introduction stays while the lid opens and leaves as the carton falls */
.js-scroll .hero--pack .hero__copy { opacity: clamp(0, calc(1 - (var(--u) - .26) * 7), 1); translate: 0 calc(clamp(0, (var(--u) - .26) * 7, 1) * -50px); }
.js-scroll .hero--pack .hero__pin.is-open .hero__copy { pointer-events: auto; }


/* The four things on the floor are buttons. They lie over the last frame, in the frame's own
   coordinates (percent of the picture), and wake up when the carton is empty. */
.unbox__hots { display: none; }
.js-scroll .hero--pack .unbox__hots { display: block; position: absolute; inset: 70px 0 0 0; z-index: 3; container-type: size; pointer-events: none; }
.unbox__hotbox { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; }
.hot { position: absolute; left: calc(var(--x) * 1% - 1.2%); top: calc(var(--y) * 1% - 2%); width: calc(var(--w) * 1% + 2.4%); height: calc(var(--h) * 1% + 4%);
    border-radius: 18px; outline: 1.5px solid transparent; outline-offset: 0; opacity: 0; visibility: hidden;
    transition: opacity .5s cubic-bezier(.32,.72,0,1) calc(var(--n) * 70ms), visibility 0s .6s, outline-color .3s, background-color .3s, translate .4s cubic-bezier(.32,.72,0,1); }
.hero__pin.is-done .hot { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: calc(var(--n) * 70ms), 0s, 0s, 0s, 0s; }
.hot i { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--rdw-ink, #111); color: var(--rdw-paper, #f5f0e8); transition: background-color .3s, color .3s, translate .4s cubic-bezier(.32,.72,0,1), scale .4s cubic-bezier(.32,.72,0,1); }
.hot:hover, .hot:focus-visible { outline-color: var(--rdw-gold-deep, #9a7422); background-color: rgb(154 116 34 / .07); translate: 0 -3px; }
.hot:hover i, .hot:focus-visible i { background: var(--rdw-gold-deep, #9a7422); color: #fff; translate: 2px -2px; scale: 1.08; }
.hot:active { translate: 0 0; }
/* the closed carton is a button too: a click plays the whole fall, as scrolling does */
.hot--open { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; opacity: 1; visibility: visible; pointer-events: auto; outline-offset: -6px;
    animation: pack-copy 1s cubic-bezier(.32, .72, 0, 1) 5s backwards; }
.hot--open:hover, .hot--open:focus-visible { background-color: transparent; outline-color: transparent; translate: 0 0; }
.hot--open:focus-visible { outline-color: var(--rdw-gold-deep, #9a7422); }
.hot--open i { right: auto; left: 50%; top: auto; bottom: -8px; margin-left: -17px; }
.hot--open:hover i { translate: 0 4px; scale: 1.08; }
.hero__pin.is-open .hot--open, .hero__pin.is-done .hot--open { opacity: 0; visibility: hidden; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The film runs at working resolution; the first and the last frame also exist at twice the size and
   fade in over the canvas whenever the film rests on them (classes is-first / is-last from home.js). */
.hero--pack .unbox__end { opacity: 0; transition: opacity .45s ease; }
.js-scroll .hero--pack .hero__pin .unbox__still { z-index: 1; transition: opacity .45s ease; }
.js-scroll .hero--pack .hero__pin.has-frames .unbox__still { visibility: visible; opacity: 0; }
.js-scroll .hero--pack .hero__pin.has-frames.is-first .unbox__still { opacity: 1; }
.js-scroll .hero--pack .hero__pin.is-last .unbox__end { opacity: 1; }

/* Arrival: the closed carton is sketched in line (the same edges, projected from the 3D scene), then the render fades in over it. */
.unbox__draw { display: none; }
.js-scroll .hero--pack .unbox__draw--wide { display: block; position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #1a1a1a; stroke-width: 1.5; stroke-linejoin: round; animation: pack-ink 1s 4.7s forwards; pointer-events: none; }
.unbox__draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pack-draw 1.9s cubic-bezier(.5, 0, .2, 1) calc(var(--k) * 170ms + .3s) forwards; }
.unbox__draw .g { stroke: var(--rdw-gold-deep, #9a7422); stroke-width: 1.2; }
.js-scroll .hero--pack .unbox__still, .js-scroll .hero--pack .unbox__canvas { animation: pack-real 1.4s 3.9s cubic-bezier(.32, .72, 0, 1) backwards; }
/* ...and the camera starts close on the sketch and pulls back while the carton turns real; the page copy arrives with the wide view */
.js-scroll .hero--pack .hero__pin .unbox__stage { transform-origin: 72% 46%; animation: pack-cam 5.2s cubic-bezier(.6, 0, .15, 1) .3s backwards; }
.js-scroll .hero--pack .hero__copy { animation: pack-copy 1.2s cubic-bezier(.32, .72, 0, 1) 3.7s backwards; }
@keyframes pack-cam { from { scale: 2.3; } }
@keyframes pack-copy { from { opacity: 0; translate: 0 26px; } }
@keyframes pack-draw { to { stroke-dashoffset: 0; } }
@keyframes pack-ink { to { opacity: 0; } }
@keyframes pack-real { from { opacity: 0; } }

@media (max-width: 860px) {
    .hero--pack .hero__col { left: var(--pad); right: var(--pad); top: 96px; translate: none; width: auto; }
    /* a phone gets its own portrait frames: the carton falls towards the viewer and the contents form a column */
    .hero--pack .hero__pin .unbox__stage, .js-scroll .hero--pack .unbox__hots { inset: 64px 0 0 0; }
    .js-scroll .hero--pack .hero__pin .unbox__stage { scale: 1; }
    .hero--pack .unbox__canvas, .hero--pack .unbox__still, .hero--pack .unbox__end { object-position: 50% 100%; }
    .unbox__hotbox { margin: auto auto 0; width: min(100cqw, 100cqh * 9 / 16); aspect-ratio: 9 / 16; }
    .hot { left: calc(var(--xm) * 1% - 2%); top: calc(var(--ym) * 1% - 1.2%); width: calc(var(--wm) * 1% + 4%); height: calc(var(--hm) * 1% + 2.4%); }
    .hot i { width: 30px; height: 30px; right: 6px; top: 6px; }
    .js-scroll .hero--pack .hero__pin .unbox__stage { transform-origin: 50% 76%; }
    .js-scroll .hero--pack .unbox__draw--wide { display: none; }
    .js-scroll .hero--pack .unbox__draw--tall { display: block; position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #1a1a1a; stroke-width: 1.5; stroke-linejoin: round; animation: pack-ink 1s 4.7s forwards; pointer-events: none; }
    /* the carton needs the lower half of the first view: one call to action is enough here */
    .hero--pack .hero__actions .btn--line { display: none; }
}

/* The copy and the carton share a phone screen without touching: the copy is sized from the screen height
   (the carton always starts a little under half-way down), and the open-badge sits at the carton's foot. */
@media (max-width: 860px) {
    .hero--pack .hero__col { top: calc(60px + 1.6vh); }
    .hero--pack .hero__title { font-size: clamp(1.7rem, 5.6vh, 2.5rem); }
    .hero--pack .hero__lead { font-size: clamp(.86rem, 2.2vh, 1.02rem); line-height: 1.4; margin-top: 1.2vh; max-width: 30em; }
    .hero--pack .hero__actions { margin-top: 1.6vh; }
    .hero--pack .hero__actions .btn { padding: .55rem .5rem .55rem 1.1rem; font-size: .92rem; }
    .hero--pack .hero__actions .btn i { width: 1.9rem; height: 1.9rem; }
    .hot.hot--open i { top: auto; bottom: 2px; right: auto; left: 50%; margin-left: -15px; }
}
/* short phone screens: the picture is drawn a little smaller from its foot, which lowers the carton's top */
@media (max-width: 860px) and (max-height: 680px) {
    .js-scroll .hero--pack .hero__pin .unbox__stage { scale: .86; transform-origin: 50% 100%; }
    .js-scroll .hero--pack .unbox__hotbox { scale: .86; transform-origin: 50% 100%; }
}