/* Decoration stays inside the wallpaper stacking context, below usable content. */
.theme-atmosphere {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.theme-atmosphere *, .theme-atmosphere::before, .theme-atmosphere::after { pointer-events: none; }
.theme-atmosphere-layer { position: absolute; inset: 0; }

html[data-ui-theme="space"] {
    --theme-ornament: url("../img/themes/space-orbit.svg");
    --theme-texture: url("../img/themes/space-stars-far.svg");
    --theme-texture-size: 480px 320px;
    --theme-launch-start: #1b304c;
    --theme-launch-end: #0b162b;
    --theme-launch-hover-start: #294362;
    --theme-launch-hover-end: #182841;
    --theme-launch-icon: #c2ddf7;
}

/* Fine, differently coloured stars and a quiet nebula replace the cartoon sky. */
html[data-ui-theme="space"] .theme-atmosphere {
    display: block;
    background:
        radial-gradient(ellipse at 78% 22%, #36568235, transparent 42%),
        radial-gradient(ellipse at 44% 74%, #553f812e, transparent 36%),
        radial-gradient(ellipse at 17% 43%, #21527926, transparent 38%),
        linear-gradient(145deg, #040916, #0c1427 55%, #060b18);
}
html[data-ui-theme="space"] .app-wallpaper:not(.has-personal-wallpaper) :is(.app-wallpaper-image, .app-wallpaper-water) { visibility: hidden; }
html[data-ui-theme="space"] .has-personal-wallpaper .theme-atmosphere { background: none; opacity: .55; }
html[data-ui-theme="space"] .theme-atmosphere-layer {
    --space-flight-start: .8;
    --space-flight-end: 1.35;
    inset: -20%;
    transform-origin: 58% 42%;
    opacity: .7;
    animation: space-star-flight 110s linear -76s infinite;
}
/* Each depth moves away from the same vanishing point. Near stars pass faster;
   fading at the ends hides the reset without a visible jump in the starfield. */
html[data-ui-theme="space"] .theme-atmosphere-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/themes/space-stars-far.svg") 0 0 / 960px 640px repeat;
    opacity: .65;
    animation: space-star-shimmer 8.7s ease-in-out infinite alternate;
}
html[data-ui-theme="space"] .theme-atmosphere-layer:nth-child(2) {
    --space-flight-start: .65;
    --space-flight-end: 1.8;
    animation-duration: 68s;
    animation-delay: -26s;
}
html[data-ui-theme="space"] .theme-atmosphere-layer:nth-child(2)::before {
    background-image: url("../img/themes/space-stars-mid.svg");
    background-size: 1120px 747px;
    background-position: 11% 7%;
    animation-duration: 6.3s;
    animation-delay: -3.8s;
}
html[data-ui-theme="space"] .theme-atmosphere-layer:nth-child(3) {
    --space-flight-start: .78;
    --space-flight-end: 2.15;
    animation-duration: 36s;
    animation-delay: -9s;
}
html[data-ui-theme="space"] .theme-atmosphere-layer:nth-child(3)::before {
    background-image: url("../img/themes/space-stars-near.svg");
    background-size: 1280px 853px;
    background-position: 3% 19%;
    animation-duration: 11.1s;
    animation-delay: -7.4s;
}
@keyframes space-star-flight {
    from { transform: scale(var(--space-flight-start)); }
    to { transform: scale(var(--space-flight-end)); }
    0%, 12%, 100% { opacity: 0; }
    20%, 75% { opacity: .85; }
}

/* A separate layer twinkles without changing the opacity of text or controls. */
html[data-ui-theme="space"] .window-title { position: relative; }
html[data-ui-theme="space"] :is(.app-header, .window-title)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/themes/space-stars-near.svg") 24px 4px / 420px 280px repeat;
    opacity: .4;
    pointer-events: none;
    animation: space-star-shimmer 7.3s ease-in-out -2s infinite alternate;
}
/* Two moving depths across the narrow bar preserve the sense of travelling.
   Negative layers stay inside the header's stacking context, behind its links. */
html[data-ui-theme="space"] .app-header::before {
    z-index: -1;
    --space-chrome-tile: 600px;
    background: url("../img/themes/space-stars-mid.svg") 0 0 / 600px 400px repeat;
    animation: space-star-shimmer 9.3s ease-in-out -3s infinite alternate, space-chrome-travel 72s linear -26s infinite;
}
html[data-ui-theme="space"] .app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    --space-chrome-tile: 420px;
    background: url("../img/themes/space-stars-near.svg") 0 4px / 420px 280px repeat;
    opacity: .8;
    pointer-events: none;
    animation: space-star-shimmer 6.7s ease-in-out -1.4s infinite alternate, space-chrome-travel 26s linear -11s infinite;
}
@keyframes space-chrome-travel {
    from { background-position-x: 0; }
    to { background-position-x: var(--space-chrome-tile); }
}

html[data-ui-theme="floral"] .app-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/themes/floral-breeze.svg") 0 0 / 320px 96px repeat;
    opacity: .55;
    pointer-events: none;
    animation: floral-chrome-breeze 38s linear -13s infinite;
}
@keyframes floral-chrome-breeze {
    from { background-position: 0 0; }
    to { background-position: 320px 96px; }
}
@keyframes space-star-shimmer {
    0%, 12% { opacity: .3; }
    42% { opacity: .75; }
    68% { opacity: .48; }
    100% { opacity: .95; }
}

/* Pausing freezes the current frame; it does not make the whole theme disappear. */
html[data-ui-theme="space"]:is([data-theme-motion="off"], [data-theme-motion="paused"]) .theme-atmosphere-layer,
html[data-ui-theme="space"]:is([data-theme-motion="off"], [data-theme-motion="paused"]) .theme-atmosphere-layer::before,
html[data-ui-theme="space"]:is([data-theme-motion="off"], [data-theme-motion="paused"]) :is(.app-header, .window-title)::before,
html[data-ui-theme="space"]:is([data-theme-motion="off"], [data-theme-motion="paused"]) .app-header::after,
html[data-ui-theme="floral"]:is([data-theme-motion="off"], [data-theme-motion="paused"]) .app-header::before {
    animation-play-state: paused;
}
html:is([data-ui-theme="space"], [data-ui-theme="floral"]):is([data-theme-motion="off"], [data-theme-motion="paused"]) .button:hover::after { transform: none; transition: none; }

[data-theme-motion-control][hidden], [data-theme-motion-status][hidden] { display: none !important; }
html .app-header[data-app-header] .theme-motion-control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    width: 100%;
    max-width: none !important;
    margin: 8px 0 12px;
    color: var(--ink);
    font-size: var(--app-font);
    text-transform: none;
    cursor: pointer;
}
html .app-header[data-app-header] .theme-motion-control input { width: 18px !important; height: 18px; margin: 0; }
.theme-motion-status { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.auth-theme-motion { margin-top: 16px; }
.theme-motion-button { padding: 4px 0; min-height: 32px; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.theme-motion-button:hover { color: var(--ink); }
.theme-motion-button:disabled { cursor: default; }
.theme-motion-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media screen and (max-width: 1200px) {
    html .app-header[data-app-header] .theme-motion-control { min-height: 44px; }
    .theme-motion-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui-theme="space"] .theme-atmosphere-layer,
    html[data-ui-theme="space"] .theme-atmosphere-layer::before,
    html[data-ui-theme="space"] :is(.app-header, .window-title)::before,
    html[data-ui-theme="space"] .app-header::after,
    html[data-ui-theme="floral"] .app-header::before { animation: none; }
    html[data-ui-theme="space"] .theme-atmosphere-layer { transform: none; opacity: .7; }
}
@media (forced-colors: active), print {
    .theme-atmosphere,
    html[data-ui-theme="space"] :is(.app-header, .window-title)::before,
    html[data-ui-theme="space"] .app-header::after,
    html[data-ui-theme="floral"] .app-header::before { display: none !important; animation: none !important; }
}