/* Seasonal movement stays behind content or inside the existing ornaments.
   The wallpaper owns the snow; there is no layer over forms or data grids. */
html[data-ui-theme="christmas"] {
    --holiday-snow-chrome: url("../img/themes/holiday-snow-chrome.svg");
}

html[data-ui-theme="christmas"] :is(.app-header, .window-title) {
    background-image: var(--holiday-snow-chrome), var(--holiday-snow-chrome);
    background-size: 300px 84px, 470px 126px;
    background-position: 0 0, 28px -26px;
    background-repeat: repeat;
    animation: holiday-snow-chrome 16s linear infinite;
}

html[data-ui-theme="christmas"] .window-title {
    animation-duration: 22s;
    animation-delay: -9s;
}

html[data-ui-theme="christmas"] .app-wallpaper > .theme-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
}

html[data-ui-theme="christmas"] .theme-atmosphere-layer {
    --holiday-snow-width: 420px;
    --holiday-snow-height: 420px;
    --holiday-snow-drift: 11px;
    position: absolute;
    inset: calc(-1 * var(--holiday-snow-height)) -40px 0;
    display: block;
    background-image: url("../img/themes/holiday-snow-distant.svg");
    background-size: var(--holiday-snow-width) var(--holiday-snow-height);
    background-repeat: repeat;
    opacity: .43;
    pointer-events: none;
    animation: holiday-snow-fall 48s linear infinite;
    animation-delay: -29s;
}

html[data-ui-theme="christmas"] .theme-atmosphere-layer:nth-child(2) {
    --holiday-snow-width: 520px;
    --holiday-snow-height: 520px;
    --holiday-snow-drift: -17px;
    background-image: url("../img/themes/holiday-snow-middle.svg");
    background-position: 73px 0;
    opacity: .62;
    animation-duration: 35s;
    animation-delay: -13s;
}

html[data-ui-theme="christmas"] .theme-atmosphere-layer:nth-child(3) {
    --holiday-snow-width: 680px;
    --holiday-snow-height: 680px;
    --holiday-snow-drift: 26px;
    background-image: url("../img/themes/holiday-snow-near.svg");
    background-position: 131px 0;
    opacity: .8;
    animation-duration: 28s;
    animation-delay: -19s;
}

html[data-ui-theme="christmas"] .has-personal-wallpaper > .theme-atmosphere {
    opacity: .6;
}

@keyframes holiday-snow-chrome {
    from { background-position: 0 0, 28px -26px; }
    to { background-position: 0 84px, 28px 100px; }
}

/* One complete tile height makes each loop seamless. The small horizontal
   drift returns to its starting point rather than jumping at the repeat. */
@keyframes holiday-snow-fall {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(var(--holiday-snow-drift), calc(var(--holiday-snow-height) * .5), 0); }
    100% { transform: translate3d(0, var(--holiday-snow-height), 0); }
}

/* This separate, transparent 32px layer matches only the two carved eyes in
   theme-flourishes.css. The orange pumpkin and its mouth are never pulsed. */
html[data-ui-theme="halloween"] {
    --holiday-pumpkin-eyes: url("../img/themes/holiday-pumpkin-eyes.svg");
    --holiday-ghost-skull: url("../img/themes/holiday-ghost-skull.svg");
}

/* Wallpaper skulls are expanding refractive waves in wallpaper-water.js.
   The atmosphere layer stays empty; the skull artwork below belongs to chrome. */

/* The header already owns a stacking context. A negative local z-index keeps
   this clipped decoration above its background and below every usable control;
   the header itself remains overflow-visible so menus and the logo can extend. */
html[data-ui-theme="halloween"] .app-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    clip-path: inset(0);
    background-image: var(--holiday-ghost-skull), var(--holiday-ghost-skull);
    background-size: 31px 40px, 25px 32px;
    background-position: 72% 55%, 94% 43%;
    background-repeat: no-repeat;
    opacity: .09;
    pointer-events: none;
    animation: holiday-chrome-phantom 29s ease-in-out -9s infinite alternate;
}

@keyframes holiday-chrome-phantom {
    from { background-position: 72% 55%, 94% 43%; opacity: .055; }
    to { background-position: 67% 43%, 98% 56%; opacity: .14; }
}

html[data-ui-theme="halloween"] :where(.button:not(.ghost):not(.danger):not(.warning), .launch-module-symbol, .fieldset-panel > legend, .window-title .kicker)::before {
    content: "";
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: var(--holiday-pumpkin-eyes) center / contain no-repeat;
    pointer-events: none;
    opacity: .8;
    filter: drop-shadow(0 0 1px #ffc553);
    animation: holiday-pumpkin-ember 4.8s ease-in-out infinite;
}

html[data-ui-theme="halloween"] .button:not(.ghost):not(.danger):not(.warning)::before {
    top: -6px;
    right: -4px;
    transition: transform 160ms ease;
}

/* Keep the light registered to the existing pumpkin when a button tilts. */
html[data-ui-theme="halloween"] .button:not(.ghost):not(.danger):not(.warning):not(:disabled):hover::before {
    transform: translateY(-1px) rotate(8deg);
}

html[data-ui-theme="halloween"] .launch-module-symbol::before {
    width: 22px;
    height: 22px;
    right: -7px;
    bottom: -5px;
    animation-duration: 5.6s;
    animation-delay: -1.7s;
}

html[data-ui-theme="halloween"] .launch-module:nth-child(even) .launch-module-symbol::before {
    animation-duration: 6.3s;
    animation-delay: -3.8s;
}

/* Reserve the same 18px ornament plus its 7px gap. A shared anchor keeps the
   carved eyes aligned even when a long legend wraps or the density changes. */
html[data-ui-theme="halloween"] :is(.fieldset-panel > legend, .window-title .kicker) {
    position: relative;
    width: fit-content;
    max-width: 100%;
    min-height: 18px;
    padding-inline-end: 25px;
}

html[data-ui-theme="halloween"] :is(.fieldset-panel > legend, .window-title .kicker)::before,
html[data-ui-theme="halloween"] :is(.fieldset-panel > legend, .window-title .kicker)::after {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    margin-inline-start: 0;
    transform: translateY(-50%);
}

html[data-ui-theme="halloween"] :is(.fieldset-panel > legend, .window-title .kicker)::before {
    animation-duration: 6.8s;
    animation-delay: -2.6s;
}

@keyframes holiday-pumpkin-ember {
    0%, 100% {
        opacity: .52;
        filter: drop-shadow(0 0 .6px #e99b25);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 1.2px #ffe26a) drop-shadow(0 0 2.7px #ff7e00);
    }
}

html[data-ui-theme="halloween"] .button:is(:disabled, [aria-disabled="true"], .disabled)::before {
    animation: none !important;
    opacity: .25;
    filter: none;
}

html[data-ui-theme="halloween"] .button:is(:disabled, [aria-disabled="true"], .disabled)::before,
html[data-ui-theme="halloween"] .button:is(:disabled, [aria-disabled="true"], .disabled)::after {
    transform: none !important;
    transition: none !important;
}

/* An explicit off choice retains the illustration without movement. Pausing
   (for example when the document is hidden) keeps the current frame intact. */
html[data-ui-theme="christmas"][data-theme-motion="off"] :is(.app-header, .window-title, .theme-atmosphere-layer),
html[data-ui-theme="halloween"][data-theme-motion="off"] .app-header::before,
html[data-ui-theme="halloween"][data-theme-motion="off"] :is(.button, .launch-module-symbol, .fieldset-panel > legend, .window-title .kicker)::before {
    animation: none !important;
}

html[data-ui-theme="christmas"][data-theme-motion="paused"] :is(.app-header, .window-title, .theme-atmosphere-layer),
html[data-ui-theme="halloween"][data-theme-motion="paused"] .app-header::before,
html[data-ui-theme="halloween"][data-theme-motion="paused"] :is(.button, .launch-module-symbol, .fieldset-panel > legend, .window-title .kicker)::before {
    animation-play-state: paused !important;
}

html:is([data-ui-theme="christmas"], [data-ui-theme="halloween"]):is([data-theme-motion="off"], [data-theme-motion="paused"]) .button::before,
html:is([data-ui-theme="christmas"], [data-ui-theme="halloween"]):is([data-theme-motion="off"], [data-theme-motion="paused"]) .button::after {
    transition: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui-theme="christmas"] :is(.app-header, .window-title, .theme-atmosphere-layer),
    html[data-ui-theme="halloween"] .app-header::before,
    html[data-ui-theme="halloween"] :is(.button, .launch-module-symbol, .fieldset-panel > legend, .window-title .kicker)::before {
        animation: none !important;
    }

    html[data-ui-theme="halloween"] .button::before,
    html[data-ui-theme="halloween"] .button::after {
        transition: none !important;
        transform: none !important;
    }
}

@media (forced-colors: active), print {
    html:is([data-ui-theme="christmas"], [data-ui-theme="halloween"]) .theme-atmosphere,
    html[data-ui-theme="halloween"] .app-header::before,
    html[data-ui-theme="halloween"] :is(.button, .launch-module-symbol, .fieldset-panel > legend, .window-title .kicker)::before {
        display: none !important;
        animation: none !important;
    }

    html[data-ui-theme="christmas"] :is(.app-header, .window-title) {
        background-image: none !important;
        animation: none;
    }
}