/* 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 .54s cubic-bezier(.76,0,.24,1) .3s 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 .26s var(--motion-out) .3s both}
.intro-mark{display:block;width:86px;height:92px;object-fit:contain;animation:pm-mark-in .42s var(--motion-spring) both}
.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-mark-in{from{opacity:0;translate:0 8px;rotate:-8deg;scale:.82}to{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:430ms}
.welcome-returning{--welcome-delay:0ms}
.campaign-mascot{animation:none}
:is(.welcome-playing,.welcome-returning) .welcome-copy>*{animation:pm-copy-rise .52s 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 .72s var(--motion-out) calc(var(--welcome-delay) + 30ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-banner{animation:pm-banner-arrive .65s var(--motion-spring) calc(var(--welcome-delay) + 100ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-mascot{animation:pm-mascot-arrive .65s var(--motion-spring) calc(var(--welcome-delay) + 170ms) both}
:is(.welcome-playing,.welcome-returning) .campaign-copy>*{animation:pm-copy-rise .52s 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 .42s 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) + 480ms)}
:is(.welcome-playing,.welcome-returning) .banner-doodles span:nth-child(3){animation-delay:calc(var(--welcome-delay) + 520ms)}
:is(.welcome-playing,.welcome-returning) .banner-doodles span:nth-child(4){animation-delay:calc(var(--welcome-delay) + 560ms)}
.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 14px}to{opacity:1;translate:0 0}}
@keyframes pm-hero-art{from{opacity:0;translate:18px 8px;scale:1.018}to{translate:0 0;scale:1}}
@keyframes pm-banner-arrive{from{opacity:0;translate:0 20px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes pm-mascot-arrive{0%{opacity:0;translate:-15px 18px;rotate:-5deg;scale:.96}65%{opacity:1;translate:0 -2px;rotate:1deg;scale:1.005}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes pm-spark-arrive{from{opacity:0;rotate:-25deg;scale:.65}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 .48s var(--motion-out) var(--arrival-delay,0ms) both}
.welcome-playing .picture-category.is-arriving{animation-delay:calc(700ms + var(--arrival-delay,0ms))}
.is-arriving:focus-within{animation:none}
@keyframes pm-card-arrive{from{opacity:.1;translate:0 14px;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:58px;height:58px}.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}
}