/* Depth, light, and movement. Shared mechanics, distinct worlds. */
:is(.hub,.journey-page) :is(button,input,textarea,select,dialog,[popover]){border:0;outline:0}
:is(.hub,.journey-page) :is(a,button,input,textarea,select,summary):focus-visible{outline:0;background-color:color-mix(in srgb,var(--accent) 18%,var(--bg));box-shadow:0 0 24px color-mix(in srgb,var(--accent) 20%,transparent);border-radius:6px}
:is(.hub,.journey-page) .button:not(.button-primary){background:color-mix(in srgb,var(--ink) 7%,transparent)}
:is(.hub,.journey-page) .choice-select{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.world-card,.adventure-card,.operation,.journey-summary,.archive-strip,.level-panel,.district-card,.springfield-notes{box-shadow:0 14px 45px #00000017}
.world-card{transition:transform .4s,box-shadow .4s;background:linear-gradient(145deg,#20202b,#131319)}
.world-card:hover{box-shadow:0 24px 65px #0006}
.adventure-card{transition:box-shadow .4s,transform .4s;background:linear-gradient(145deg,#19302b,#10201e)}
.adventure-card:hover{box-shadow:0 24px 55px #0004;transform:translateY(-5px)}
.feature-chips>span,.dossier-meta>span,.media-tags>span{background:#ffffff08}
.music-dock{background:#ffffff05}.music-dock #music-toggle{transition:background .2s,scale .2s}.music-dock #music-toggle:hover{background:#ffffff0d;scale:1.06}
.depth-layer{translate:var(--depth-x,0px) var(--depth-y,0px)}
.hero-art>img.depth-layer{height:calc(100% + 160px);width:calc(100% + 32px);max-width:none;margin:-80px -16px;will-change:translate}
.world-art>img.depth-layer,.adventure-scene>img.depth-layer{height:calc(100% + 44px);margin-top:-22px}
.operation.depth-layer{translate:none}.operation.depth-layer:before{background-position:right calc(35% + var(--depth-y,0px))}
.library-poster.depth-layer{translate:var(--depth-x,0px) calc(var(--depth-y,0px) + var(--poster-lift,0px));animation:cover-sway 7s ease-in-out infinite alternate;will-change:translate}
.poster-jak{animation-delay:-2s!important}.poster-sly{animation-delay:-4s!important}.poster-simpsons{animation-delay:-6s!important}
.library-poster:hover{--poster-lift:-12px}.poster-wall{perspective:1000px}
.motion-ready [data-reveal]{transition:opacity .75s ease var(--reveal-delay,0ms),translate .75s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms)}
.motion-ready [data-reveal]:not(.is-visible){opacity:0;translate:0 30px}
.motion-ready [data-reveal].is-visible{opacity:1}
.motion-ready:not(.motion-arrived) :is(.hero-copy,.intro-copy)>*{animation:arrival .85s cubic-bezier(.2,.65,.25,1) both}
.motion-ready:not(.motion-arrived) :is(.hero-copy,.intro-copy)>:nth-child(2){animation-delay:.08s}.motion-ready:not(.motion-arrived) :is(.hero-copy,.intro-copy)>:nth-child(3){animation-delay:.16s}.motion-ready:not(.motion-arrived) :is(.hero-copy,.intro-copy)>:nth-child(4){animation-delay:.24s}.motion-ready:not(.motion-arrived) :is(.hero-copy,.intro-copy)>:nth-child(5){animation-delay:.32s}.motion-ready:not(.motion-arrived) :is(.hero-copy,.intro-copy)>:nth-child(6){animation-delay:.4s}
.live-dot,.library-dot{animation:signal-breathe 3.6s ease-in-out infinite}
.jak-daxter .lore-orbit{animation:eco-breathe 5s ease-in-out infinite}
.jak-daxter .hero-shade:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 62% 90%,#76ad6b24,transparent 45%);animation:eco-breathe 7s ease-in-out infinite;pointer-events:none}
.sly-cooper .hero-shade:after{content:'';position:absolute;inset:-25%;background:conic-gradient(from 20deg at 88% 105%,transparent 0deg,#a6ccff09 10deg,#a6ccff1a 13deg,transparent 18deg);animation:searchlight-sweep 14s ease-in-out infinite alternate;pointer-events:none}
.simpsons-hit-run .journey-hero:after,.simpsons-hit-run .level-panel:before{background-size:68px 100%;animation:road-stripe 3.5s linear infinite}
.level-panel{animation:panel-arrival .45s ease both}.driver-car-art{transition:translate .45s}.driver-card:hover .driver-car-art{translate:7px -3px}
.secret-object:not(.found){animation:treasure-glint 4s ease-in-out infinite}.secret-object.found{animation:treasure-found .5s ease both}
.button,.level-tab,.eco-selector button,.dossier-tabs button,.filters button{transition:background .25s,transform .25s,box-shadow .25s}
:is(.level-tab,.eco-selector button,.dossier-tabs button,.filters button):hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.level-tab[aria-selected=true]{animation:selection-pop .35s ease both}
dialog[open],.music-panel:popover-open{animation:panel-arrival .3s ease both}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@keyframes arrival{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-arrival{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes cover-sway{from{rotate:-1.2deg}to{rotate:1.2deg}}
@keyframes signal-breathe{50%{opacity:.5;box-shadow:0 0 19px var(--accent)}}
@keyframes eco-breathe{50%{opacity:.65;scale:1.035}}
@keyframes searchlight-sweep{from{rotate:-12deg;opacity:.35}to{rotate:10deg;opacity:.85}}
@keyframes road-stripe{to{background-position:68px 0}}
@keyframes treasure-glint{0%,75%,100%{filter:brightness(1);rotate:0deg}82%{filter:brightness(1.7);rotate:-5deg}89%{filter:brightness(1.1);rotate:4deg}}
@keyframes treasure-found{50%{scale:1.3}100%{scale:1}}
@keyframes selection-pop{50%{transform:translateY(-3px)}100%{transform:none}}
@media(max-width:760px){.hero-art>img.depth-layer{height:calc(100% + 120px);margin-top:-60px}.library-poster.depth-layer{animation-duration:9s}}
/* Preferences reset every layer immediately; contents never stay faded out. */
.reduced-motion [data-reveal]{opacity:1!important;translate:none!important}.reduced-motion .depth-layer{translate:none!important}
.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;translate:none!important}.depth-layer{translate:none!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
