#shop-intro{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:24px;border:0;border-radius:0;box-shadow:none;background-color:var(--ice);background-image:url("../images/polka-dots.svg");color:var(--ink);overflow:auto;z-index:100}
#shop-intro[open]{display:grid;place-items:center}
#shop-intro::backdrop{background:var(--ice)}
.intro-stage{position:relative;width:min(100%,560px);text-align:center;padding:62px 24px 32px}
#intro-skip{position:absolute;top:0;right:0;padding:8px 14px;background:white;border:var(--line);box-shadow:3px 3px var(--ink);border-radius:5px;font-size:13px;font-weight:700}
.intro-sticker{position:relative;width:112px;margin:0 auto 24px;animation:intro-stamp .35s steps(4,end) both}
.intro-sticker img{display:block;width:112px;height:112px;border:var(--line);border-radius:18px;box-shadow:7px 7px var(--ink);rotate:-7deg}
.intro-sticker>span{position:absolute;right:-22px;top:-24px;font-size:46px;color:#ffe56b;-webkit-text-stroke:2px var(--ink);animation:intro-star .45s .3s steps(4,end) both}
.intro-tag{display:inline-block;font-weight:800;font-size:11px;letter-spacing:1px;border:2px solid var(--ink);padding:5px 10px;background:white;rotate:-2deg;animation:intro-stamp .25s .15s steps(3,end) both}
#intro-title{font-size:clamp(44px,9vw,78px);line-height:1.05;letter-spacing:-2px;margin:20px 0;font-weight:900}
#intro-title>span{display:block;animation:intro-title .3s .25s steps(4,end) both}
#intro-title>span+span{width:fit-content;margin:8px auto 0;padding:0 14px 5px;background:#ffe56b;border:var(--line);box-shadow:5px 5px var(--ink);rotate:-2deg;animation-delay:.4s}
.intro-star{font-size:.65em;margin-left:12px;display:inline-block}
#intro-copy{font-size:14px;animation:intro-title .25s .55s steps(3,end) both}
.intro-track{height:12px;width:150px;margin:26px auto 0;border:2px solid var(--ink);background:white;box-shadow:3px 3px var(--ink);overflow:hidden}
.intro-track>span{display:block;height:100%;background:var(--primary);transform-origin:left;animation:intro-progress 1.5s steps(8,end) both}
#shop-intro.intro-out .intro-stage{animation:intro-exit .18s steps(3,end) both}
@keyframes intro-stamp{from{opacity:0;transform:scale(.65) rotate(-12deg)}70%{opacity:1;transform:scale(1.06) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes intro-title{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-star{from{transform:scale(0) rotate(-45deg)}to{transform:scale(1) rotate(0)}}
@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-exit{to{opacity:0;transform:translateY(-18px) scale(.96)}}
@media(max-height:650px){.intro-stage{padding-top:44px}.intro-sticker,.intro-sticker img{width:76px;height:76px}.intro-sticker{margin-bottom:12px}#intro-title{font-size:46px;margin:12px 0}.intro-track{margin-top:16px}}
@media(prefers-reduced-motion:reduce){#shop-intro *,#shop-intro.intro-out .intro-stage{animation:none!important}}