/* Sphera's optional motion layer. The editorial news panel is excluded. */
.sphera-effects-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 7px 11px;
    border: 1px solid #e9cf6340;
    border-radius: 8px;
    background: #e9cf6308;
    color: #e9cf63;
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    line-height: 1.2;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: none;
    text-decoration: none;
}
.sphera-effects-toggle[hidden] { display: none; }
.sphera-effects-toggle:hover { border-color: #e9cf6399; background: #e9cf6314; }
.sphera-effects-toggle:focus-visible { outline: 2px solid #e9cf63; outline-offset: 4px; }
.sphera-effects-copy { display: grid; text-align: left; gap: 2px; }
.sphera-effects-copy small { font-size: 10px; color: #aeb8c7; font-weight: 400; }
.sphera-effects-copy strong { font-size: 12px; font-weight: 600; }
.sphera-effects-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.auth-effects-controls { display: flex; justify-content: flex-end; margin-bottom: 20px; }
html[data-effects="essential"] .sphera-effects-toggle { color: #aab8c8; border-color: #ffffff25; background: #ffffff03; }
.sphera-shine {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 36%;
    background: linear-gradient(100deg, transparent, #eeeede09, #eeeede19, transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}
html[data-effects="immersive"] .home-game[data-sphera-ambient],
html[data-effects="immersive"] .group-orbit-center[data-sphera-ambient],
html[data-effects="immersive"] .auth-v2-orbit[data-sphera-ambient] {
    animation: sphera-float 9s ease-in-out infinite;
    animation-play-state: paused;
}
html[data-effects="immersive"] .home-game-2[data-sphera-ambient] { animation-delay: -4s; }
html[data-effects="immersive"] .home-orbit[data-sphera-ambient],
html[data-effects="immersive"] .group-orbit-ring[data-sphera-ambient] {
    animation: sphera-orbit 24s ease-in-out infinite alternate;
    animation-play-state: paused;
}
html[data-effects="immersive"] .ps-hero-symbols[data-sphera-ambient] {
    animation: sphera-float 11s ease-in-out infinite;
    animation-play-state: paused;
}
html[data-effects="immersive"] .steam-event-banner[data-sphera-ambient] > img.steam-event-media {
    animation: sphera-cover-drift 22s ease-in-out infinite alternate;
    animation-play-state: paused;
    transform-origin: center;
}
html[data-effects="immersive"] :is(.home-game, .steam-event-banner)[data-sphera-ambient] > .sphera-shine {
    animation: sphera-light-pass 12s ease-in-out infinite;
    animation-play-state: paused;
}
html[data-effects="immersive"][data-motion-running="true"] [data-sphera-visible="true"][data-sphera-ambient],
html[data-effects="immersive"][data-motion-running="true"] [data-sphera-visible="true"][data-sphera-ambient] > :is(.sphera-shine, img.steam-event-media) {
    animation-play-state: running;
}
html[data-effects="immersive"] .home-route,
html[data-effects="immersive"] .discover-paths > button { transition: transform .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
    html[data-effects="immersive"] .discover-paths > button:hover { transform: translateY(-3px); }
}
/* Disable existing decoration too, while keeping all reading and controls intact. */
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) body *:not(.news-studio, .news-studio *, [data-steam-pane="news"], [data-steam-pane="news"] *),
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) body *:not(.news-studio, .news-studio *, [data-steam-pane="news"], [data-steam-pane="news"] *)::before,
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) body *:not(.news-studio, .news-studio *, [data-steam-pane="news"], [data-steam-pane="news"] *)::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) .sphera-shine { display: none; }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) [data-sphera-ambient] { translate: none; rotate: none; }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) :is(.discover-paths > button:hover, .studio-game-grid .game-card:hover, .steam-recommendation-rail .game-card:hover) { transform: none !important; }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) :is(.home-route:hover, .home-console:hover, .home-primary:hover, .home-secondary:hover, .store-feature-card:hover, .group-lobby-primary:hover, .group-lobby-secondary:hover, .group-quick-nav button:hover, .game-card:hover, .ps-card:hover, .ps-game-card:hover, .ps-store-card:hover, .settings-nav a:hover, .auth-submit-btn:hover):not(.news-studio *, [data-steam-pane="news"] *) { transform: none !important; }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) .game-card:hover .game-cover > img { transform: none !important; }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) .group-area-action:hover { transform: none !important; }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) .home-game-1:hover { transform: rotate(-7deg); }
:is(html[data-effects="essential"], html[data-system-motion="reduce"]) .home-game-2:hover { transform: rotate(6deg); }
@keyframes sphera-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sphera-orbit { from { rotate: -5deg; } to { rotate: 5deg; } }
@keyframes sphera-cover-drift { from { transform: scale(1.015) translateX(-.4%); } to { transform: scale(1.065) translateX(.4%); } }
@keyframes sphera-light-pass { 0%, 65%, 100% { translate: 0 0; opacity: 0; } 70% { opacity: 1; } 88% { translate: 450% 0; opacity: 0; } }
@media (max-width: 700px) {
    .sticky-shell .sphera-effects-toggle { min-height: 38px; width: 38px; padding: 8px; border-radius: 7px; }
    .sticky-shell .sphera-effects-copy,
    .sticky-shell .sphera-effects-dot { display: none; }
    .sphera-effects-copy small { display: none; }
    .public-home-header { flex-wrap: wrap; }
    .public-home-header > div { flex-wrap: wrap; gap: 14px; }
    .settings-topbar .topbar-actions,
    .admin-topbar-actions { flex-wrap: wrap; }
    .notifications-topbar-actions, .ps-page-nav { flex-wrap: wrap; }
}
@media (max-width: 450px) {
    .auth-v2-header { flex-wrap: wrap; gap: 14px; }
    .auth-v2-header .sphera-effects-toggle { min-height: 38px; padding: 7px 9px; }
    .auth-v2-header .sphera-effects-copy,
    .auth-v2-header .sphera-effects-dot { display: none; }
}
/* Horizontal profile reveal, inspired by FAB motion, with native link behavior. */
.sphera-app .shell-profile-link{position:relative;overflow:visible;isolation:isolate}.sphera-app .shell-profile-link>img{border-radius:50%}.profile-fab-label{position:absolute;right:calc(100% + 12px);top:50%;min-width:154px;padding:12px 16px;border:1px solid #d6c47b55;border-radius:13px;background:linear-gradient(120deg,#26333e,#16212e);box-shadow:0 8px 25px #03091055;color:#e8d790;text-align:left;opacity:0;visibility:hidden;transform:translate(14px,-50%) scale(.88);transform-origin:right center;pointer-events:none}.profile-fab-label strong{display:block;font-size:12px;font-weight:600;line-height:1.6}.profile-fab-label small{display:block;font-size:9px;color:#aab7bf;white-space:nowrap;line-height:1.8}.shell-profile-link:hover .profile-fab-label,.shell-profile-link:focus-visible .profile-fab-label{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
@media(prefers-reduced-motion:no-preference){html[data-effects=immersive] .profile-fab-label{transition:opacity .2s ease,transform .3s cubic-bezier(.2,.85,.3,1.15),visibility .2s}}
@media(hover:none){.profile-fab-label{display:none}}
/* The horizontal label sits below the toolbar, clear of notifications. */
.sphera-app .shell-profile-link{z-index:20}.profile-fab-label{right:0;top:calc(100% + 14px);transform:translate(14px,0) scale(.88)}.shell-profile-link:hover .profile-fab-label,.shell-profile-link:focus-visible .profile-fab-label{transform:translate(0,0) scale(1)}