.hero .hero-sticker-stack{position:relative;inset:auto;order:4;width:min(100%,800px);height:320px;margin:36px auto 30px;isolation:isolate;pointer-events:auto}
.hero .hero-sticker-stack .collection-sticker{position:absolute;top:45px;bottom:auto;left:50%;right:auto;width:220px;height:220px;margin:0;transform:translateX(calc(-50% + var(--fan-x))) translateY(var(--fan-y)) rotate(var(--fan-angle));transition:transform .4s cubic-bezier(.22,1,.36,1),filter .25s;filter:drop-shadow(0 12px 10px #0003);z-index:var(--fan-z)}
.hero-sticker-stack #sticker-hero-left{--fan-x:-225px;--fan-y:12px;--fan-angle:-13deg;--fan-z:1}
.hero-sticker-stack #sticker-hero-right{--fan-x:-75px;--fan-y:32px;--fan-angle:-4deg;--fan-z:2}
.hero-sticker-stack #sticker-hero{--fan-x:75px;--fan-y:0px;--fan-angle:5deg;--fan-z:3}
.hero-sticker-stack #sticker-closing{--fan-x:225px;--fan-y:20px;--fan-angle:13deg;--fan-z:4}
.hero .hero-sticker-stack .collection-sticker:is(:hover,:focus-visible,.dragging){transform:translateX(calc(-50% + var(--fan-x))) translateY(calc(var(--fan-y) - 32px)) rotate(0deg) scale(1.07);z-index:10;filter:drop-shadow(0 24px 16px #0004)}
.hero .hero-sticker-stack .sticker-controls{position:absolute;inset:auto 0 -10px;justify-content:center;opacity:0;transition:opacity .2s}
.hero-sticker-stack:is(:hover,:focus-within) .sticker-controls{opacity:1}
@media(max-width:760px){.hero .hero-sticker-stack{height:220px;margin-top:15px}.hero .hero-sticker-stack .collection-sticker{width:135px;height:135px;top:35px}.hero-sticker-stack #sticker-hero-left{--fan-x:-100px}.hero-sticker-stack #sticker-hero-right{--fan-x:-34px}.hero-sticker-stack #sticker-hero{--fan-x:34px}.hero-sticker-stack #sticker-closing{--fan-x:100px}.hero .hero-sticker-stack .sticker-controls{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .hero-sticker-stack .collection-sticker{transition:none}}
.motion-paused .hero-sticker-stack .collection-sticker{transition:none}

.hero .hero-sticker-stack{order:initial;flex-shrink:0;margin:48px auto 22px;max-width:100%}
.hero .hero-sticker-stack .sticker-controls{top:auto;bottom:-10px;left:0;right:0}
.hero .hero-sticker-stack .shuffle-stickers{opacity:1}
.hero .hero-bottom{margin-top:0;min-height:0;padding:0;height:0}

/* Compact hero rhythm. */
main>.hero{min-height:0;padding-top:56px;padding-bottom:26px}
.hero h1{margin:0 auto 22px;padding:0 0 10px}
.hero .hero-copy{max-width:560px;line-height:1.5;margin:0 auto}
.hero .actions{margin-top:22px;margin-bottom:0}
.hero .hero-sticker-stack{margin-top:24px;margin-bottom:12px;height:290px}
@media(max-width:760px){main>.hero{padding-top:36px;padding-bottom:20px}.hero h1{margin-bottom:18px}.hero .hero-copy{max-width:34ch}.hero .actions{margin-top:20px}.hero .hero-sticker-stack{margin-top:18px;height:220px}}

/* Reserve a clear control row below the fan, above every draggable card. */
.hero .hero-sticker-stack{height:390px}
.hero .hero-sticker-stack .sticker-controls{top:auto;bottom:0;z-index:20;opacity:1;pointer-events:none}
.hero .hero-sticker-stack .shuffle-stickers{pointer-events:auto}
.hero .actions>.button{width:max-content;min-width:0;flex:0 0 auto;justify-content:center;gap:12px;padding-inline:20px}
@media(max-width:760px){.hero .hero-sticker-stack{height:310px}}