/* ============================================================
   Shared by every seasonal theme (Halloween, Christmas, Easter...).
   Loaded only while a theme is active or previewed.

   Performance: the themes animate the page background (sky, fog, snow,
   petals, bats). Every glass panel with backdrop-filter then has to blur
   the moving pixels behind it again on every frame, which is what made the
   panel slow on phones. The frosted look is replaced by a solid tint of the
   theme background, which looks almost the same and costs nothing.
   ============================================================ */

/* Popups, modals and dropdowns keep their blur: they are open only briefly
   and need it to stay readable over the page behind them. */
html[data-site-theme] body *:not(.mo):not(.mb):not(.ds-overlay):not(.bj-overlay):not(.notif-dd):not(.discount-popup-backdrop):not(.spm-backdrop):not(.home-account-dropdown) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Panel glass surfaces: a denser tint stands in for the blur. */
html[data-site-theme] .sb,
html[data-site-theme] .mn,
html[data-site-theme] .ac {
  background-color: color-mix(in srgb, var(--bg, #0a0a0c) 84%, transparent) !important;
}

html[data-site-theme] .gc {
  background-color: color-mix(in srgb, var(--bg, #0a0a0c) 72%, transparent) !important;
}

/* Background layers are decoration: keep them on their own compositor
   layer so they never trigger a repaint of the content above. */
.hw-sky, .hw-fog, .hw-leaves, .xm-sky, .xm-snow, .xm-lights, .ea-sky, .ea-petals, .ea-grass {
  contain: strict;
  transform: translateZ(0);
}

/* The sky is added once the page is idle; fade it in instead of popping. */
.hw-sky, .xm-sky, .ea-sky { animation: site-theme-sky-in .9s ease-out both; }
@keyframes site-theme-sky-in { from { opacity: 0; } to { opacity: 1; } }