/* A quick branded opening; the store underneath stays interactive throughout. */
:root{--motion-out:cubic-bezier(.16,1,.3,1);--motion-spring:cubic-bezier(.2,.9,.25,1.12)}
body{overflow-x:clip}
.welcome-intro{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden;contain:paint}
.intro-curtain{position:absolute;inset-block:0;width:50.15%;background:#fff4d3;will-change:transform;animation:pm-curtain-left .66s cubic-bezier(.76,0,.24,1) .58s both}
.intro-curtain::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#e9c96a22 1px,transparent 1px),linear-gradient(90deg,#e9c96a22 1px,transparent 1px);background-size:60px 60px}
.intro-left{left:0;border-right:4px solid #f58b36}
.intro-right{right:0;border-left:4px solid #ffd15b;animation-name:pm-curtain-right}
.intro-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;color:#382b22;animation:pm-intro-brand-out .3s var(--motion-out) .58s both}
.intro-mark{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:69px;height:69px;rotate:-9deg}
.intro-mark i{display:block;background:#ef7325;border-radius:6px;animation:pm-tile-in .38s var(--motion-spring) both;--tile-x:-35px;--tile-y:-32px;--tile-r:-28deg}
.intro-mark i:nth-child(2){background:#ffd263;animation-delay:45ms;--tile-x:35px;--tile-y:-32px;--tile-r:28deg}
.intro-mark i:nth-child(3){background:#d8973b;animation-delay:90ms;--tile-x:-35px;--tile-y:32px;--tile-r:28deg}
.intro-mark i:nth-child(4){animation-delay:135ms;--tile-x:35px;--tile-y:32px;--tile-r:-28deg}
.intro-brand strong{font-size:clamp(29px,5vw,47px);line-height:1.05;letter-spacing:-.06em;font-weight:800;animation:pm-intro-word .38s var(--motion-out) .11s both}
.intro-brand strong>span{color:#c5581c}
.intro-brand em{display:block;margin-top:14px;font-size:10px;line-height:1.5;letter-spacing:.3em;font-style:normal;font-weight:700;color:#946b3b;animation:pm-intro-word .3s var(--motion-out) .22s both}
.intro-orbit{position:absolute;left:50%;top:50%;width:270px;height:270px;margin:-135px;border:1px solid #e8bd5566;border-radius:50%;animation:pm-orbit .8s var(--motion-out) .1s both}
.intro-orbit::before,.intro-orbit::after{content:"";position:absolute;inset:-55px;border:1px solid #e8bd5533;border-radius:50%}
.intro-orbit::after{inset:-120px}
[data-theme="dark"] .intro-curtain{background:#292218}
[data-theme="dark"] .intro-brand{color:#fff1d3}
[data-theme="dark"] .intro-brand strong>span{color:#ffad68}
[data-theme="dark"] .intro-brand em{color:#d1b18a}
@keyframes pm-tile-in{0%{opacity:0;translate:var(--tile-x) var(--tile-y);rotate:var(--tile-r);scale:.55}70%{opacity:1;translate:0 0;rotate:3deg;scale:1.08}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes pm-intro-word{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes pm-intro-brand-out{to{opacity:0;translate:0 -18px;scale:.96}}
@keyframes pm-curtain-left{to{transform:translateX(-101%)}}
@keyframes pm-curtain-right{to{transform:translateX(101%)}}
@keyframes pm-orbit{0%{opacity:0;scale:.6}40%{opacity:1}100%{opacity:0;scale:2.4}}

/* Actual page content is choreographed behind the reveal, never a loading screen. */
.welcome-playing{--welcome-delay:740ms}
.welcome-returning{--welcome-delay:0ms}
.campaign-mascot{animation:none}
:is(.welcome-playing,.welcome-returning) .welcome-copy>*{animation:pm-copy-rise .68s var(--motion-out) calc(var(--welcome-delay) + 30ms) both}
:is(.welcome-playing,.welcome-returning) .welcome-copy h1{animation-delay:calc(var(--welcome-delay) + 90ms)}
:is(.welcome-playing,.welcome-returning) .welcome-copy>p{animation-delay:calc(var(--welcome-delay) + 160ms)}
:is(.welcome-playing,.welcome-returning) .welcome-actions{animation-delay:calc(var(--welcome-delay) + 230ms)}
:is(.welcome-playing,.welcome-returning) .welcome-copy>.welcome-replay{animation-delay:calc(var(--welcome-delay) + 280ms)}
:is(.welcome-playing,.welcome-returning) .welcome-art img{animation:pm-hero-art 1s var(--motion-out) calc(var(--welcome-delay) + 30ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-banner{animation:pm-banner-arrive .85s var(--motion-spring) calc(var(--welcome-delay) + 100ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-mascot{animation:pm-mascot-arrive .85s var(--motion-spring) calc(var(--welcome-delay) + 170ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-copy>*{animation:pm-copy-rise .68s var(--motion-out) calc(var(--welcome-delay) + 240ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-copy h2{animation-delay:calc(var(--welcome-delay) + 290ms)}
:is(.welcome-playing,.welcome-returning) .campaign-copy>p{animation-delay:calc(var(--welcome-delay) + 340ms)}
:is(.welcome-playing,.welcome-returning) .campaign-button{animation-delay:calc(var(--welcome-delay) + 400ms)}
:is(.welcome-playing,.welcome-returning) .campaign-copy>small{animation-delay:calc(var(--welcome-delay) + 450ms)}
:is(.welcome-playing,.welcome-returning) .banner-doodles span{animation:pm-spark-arrive .7s var(--motion-spring) calc(var(--welcome-delay) + 440ms) both}
:is(.welcome-playing,.welcome-returning) .banner-doodles span:nth-child(2){animation-delay:calc(var(--welcome-delay) + 540ms)}
:is(.welcome-playing,.welcome-returning) .banner-doodles span:nth-child(3){animation-delay:calc(var(--welcome-delay) + 620ms)}
:is(.welcome-playing,.welcome-returning) .banner-doodles span:nth-child(4){animation-delay:calc(var(--welcome-delay) + 690ms)}
.welcome-replay{display:inline-flex;align-items:center;gap:7px;min-height:32px;margin:12px 0 -13px;padding:4px 0;color:#ffe3ac;background:none;border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:550;text-underline-offset:4px}
.welcome-replay[hidden]{display:none}
.welcome-replay svg{width:14px;height:14px}
.welcome-replay:hover{text-decoration:underline;color:#fff}
.welcome-replay:focus-visible{outline:2px solid #ffe3ac;outline-offset:5px;border-radius:2px}
.welcome-replay:disabled{opacity:.55;cursor:default;text-decoration:none}
.welcome-copy .livechip{margin-left:12px}
@keyframes pm-copy-rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes pm-hero-art{from{opacity:0;translate:35px 15px;scale:1.035}to{translate:0 0;scale:1}}
@keyframes pm-banner-arrive{from{opacity:0;translate:0 35px;scale:.965}to{opacity:1;translate:0 0;scale:1}}
@keyframes pm-mascot-arrive{0%{opacity:0;translate:-30px 35px;rotate:-10deg;scale:.9}65%{opacity:1;translate:0 -5px;rotate:3deg;scale:1.015}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes pm-spark-arrive{from{opacity:0;rotate:-70deg;scale:.15}to{opacity:1;rotate:0deg;scale:1}}

/* One entrance per visible card. Defaults remain visible when JS/observers are absent. */
.is-arriving{animation:pm-card-arrive .62s var(--motion-out) var(--arrival-delay,0ms) both}
.welcome-playing .picture-category.is-arriving{animation-delay:calc(1000ms + var(--arrival-delay,0ms))}
.is-arriving:focus-within{animation:none}
@keyframes pm-card-arrive{from{opacity:.1;translate:0 20px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
/* Keep navigation grounded while the page crossfades. */
::view-transition-old(root){animation:pm-page-out .12s ease-out both}
::view-transition-new(root){animation:pm-page-in .24s ease-out both}
::view-transition-group(sitehdr),::view-transition-group(topbar),::view-transition-group(quicknav){animation-duration:.24s;animation-timing-function:var(--motion-out)}
.mobile-quick-nav{view-transition-name:quicknav}
@keyframes pm-page-out{to{opacity:0}}
@keyframes pm-page-in{from{opacity:0}}
html[data-reduce-motion="true"]::view-transition-group(*),html[data-reduce-motion="true"]::view-transition-old(*),html[data-reduce-motion="true"]::view-transition-new(*){animation:none!important}
html[data-reduce-motion="true"] .welcome-intro{display:none}
@media(max-width:760px){
 .intro-mark{width:51px;height:51px;gap:5px}.intro-mark i{border-radius:4px}.intro-brand{gap:14px}
 .intro-brand strong{font-size:32px}.intro-brand em{font-size:8px;letter-spacing:.26em;margin-top:11px}
 .welcome-replay{min-height:44px;margin-top:3px;margin-bottom:-15px;font-size:10px}
 .welcome-copy .livechip{margin-left:9px}
 @keyframes pm-banner-arrive{from{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
 @keyframes pm-hero-art{from{opacity:0;translate:12px 8px}to{translate:0 0}}
}
@media(prefers-reduced-motion:reduce){
 .welcome-intro{display:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}