/* Overscan keeps both stills and moving wallpaper inside the screen during parallax. */
.site-background-poster,
.site-background-video,
.site-background-scene {
  inset: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  transform: translate3d(var(--wallpaper-x, 0px), var(--wallpaper-y, 0px), 0) scale(1.025);
  filter: blur(var(--wallpaper-blur, 0px)) brightness(var(--wallpaper-brightness, 1.05)) saturate(.9);
}
.site-background-poster { background-position: 64% 42%; }
.site-background-video { object-position: 64% 42%; }
html[data-theme="light"] .site-background-poster { background-position: 58% 90%; }
html[data-theme="light"] .site-background-video { object-position: 58% 90%; }
html[data-theme="light"] .site-background-shade {
  background: linear-gradient(180deg, rgba(237,247,241,.08), rgba(226,239,228,.02) 40%, rgba(218,233,222,.35)), linear-gradient(90deg, rgba(241,246,228,.12), transparent 65%);
}
.site-background-mist {
  position: absolute;
  inset: -48px;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--wallpaper-x,0px),var(--wallpaper-y,0px),0) scale(1.025);
}
.site-background-mist::before, .site-background-mist::after {
  content: "";
  position: absolute;
  width: 130%; height: 32%; left: -15%; bottom: -6%;
  background: radial-gradient(ellipse at 25% 60%,rgba(245,251,240,.27),transparent 60%), radial-gradient(ellipse at 75% 40%,rgba(229,244,234,.25),transparent 58%);
  filter: blur(26px);
  animation: daytime-mist 28s ease-in-out infinite alternate;
}
.site-background-mist::after { bottom: 12%; opacity: .55; animation-duration: 37s; animation-direction: alternate-reverse; }
.site-background-mist.is-paused::before, .site-background-mist.is-paused::after { animation-play-state: paused; }
@keyframes daytime-mist { from { transform: translate3d(-2%,2%,0); } to { transform: translate3d(4%,-3%,0); } }
.wallpaper-motion-settings { min-width: 0; margin: 16px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.wallpaper-motion-settings legend { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 0 0 5px; }
.wallpaper-motion-option { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 16px; font-size: 13px; }
.wallpaper-motion-option input { width: 17px; height: 17px; accent-color: var(--gold); }
.wallpaper-brightness-label { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wallpaper-brightness-row { display: flex; align-items: center; gap: 10px; }
.wallpaper-brightness-row input { flex: 1; width: 100%; min-width: 0; min-height: 44px; accent-color: var(--gold); }
.wallpaper-brightness-row output { flex: 0 0 40px; text-align: right; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wallpaper-only-toggle { display: inline-grid; place-items: center; min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.wallpaper-only-toggle:hover { color: var(--nav-hover); }
.profile-scene,.profile-scene-shade,.profile-eyebrow,.profile-seal,.music-scene { display: none; }
.profile-card .avatar img.theme-avatar { object-position: 100% 50%; transform: translate(-10%, 12%) scale(1.9); transform-origin: 63% 36%; }
.music-card .album-art img.theme-cover { object-position: 85% 36%; }
body.is-wallpaper-only .page-main, body.is-wallpaper-only .site-footer { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .wallpaper-only-toggle { padding-inline: 4px; font-size: 10px; }
  .site-background-poster { background-position: 61% center; }
  .site-background-video { object-position: 61% center; }
  html[data-theme="light"] .site-background-poster { background-position: 66% 65%; }
  html[data-theme="light"] .site-background-video { object-position: 66% 65%; }
}
@media (prefers-reduced-motion: reduce) { .site-background-poster,.site-background-video,.site-background-scene { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .site-background-mist { transform: scale(1.025); } .site-background-mist::before,.site-background-mist::after { animation: none; } }