/* Shared material only. Each scene's movement lives in motion-123.css / motion-456.css. */
.project-art{height:460px;container-type:inline-size;background-color:var(--cream);background-image:linear-gradient(#aebcd37a 1px,transparent 1px),linear-gradient(90deg,#aebcd37a 1px,transparent 1px);background-size:45px 45px}
.project-art .art-number{top:36px;left:50%;translate:-50% 0;width:112px;padding:0 12px 125px;background:var(--yellow);text-align:center;font-size:62px;line-height:1.2;z-index:-3}
.project-art .mini-label{top:20px;left:50%;right:auto;translate:-50% 0;white-space:nowrap;background:var(--yellow);padding:7px 12px;z-index:8}
.project-art::before,.project-art::after{content:'';position:absolute;inset:16% -7% 12%;pointer-events:none;background:url('assets/bubble-wrap-photo.webp') center/cover no-repeat;transform:none;animation:none;transition:none}
.project-art::before{z-index:-2;opacity:.44}
.project-art::after{z-index:7;mix-blend-mode:screen;opacity:.4}
.project-open:is(:hover,:focus-visible) .project-art::after{transform:none}
.project-art>.scene-props,#dialog-art .project-art>.scene-props{position:absolute;inset:0;z-index:-1;pointer-events:none;scale:1}
.scene-props>*{position:absolute;filter:drop-shadow(2px 4px 1px #45415b30)}
.prop-flower{font-size:82px;line-height:1;color:#a58cda;-webkit-text-stroke:1px var(--blue)}
.project-art>:is(.brand-box,.campaign-poster,.cassette,.cd-sleeve,.disc,.tea-pack,.illustration-book),.project-open:hover .project-art>:is(.brand-box,.campaign-poster,.cassette,.cd-sleeve,.disc,.tea-pack,.illustration-book){translate:0 32px}
.brand-box>b>span,.campaign-poster .poster-flower,.tea-pack .tea-flower,.illustration-book img{animation:none}
#dialog-art .project-art{height:430px}
@media(max-width:760px){.project-art{height:420px}#dialog-art .project-art{height:390px}}
@media(prefers-reduced-motion:reduce){.scene-props *, .project-art .disc{animation:none!important}}