.halloween-season body:has(#publicApp:not([hidden]) > section[data-public-view]:not([hidden]):not([data-public-view="order"]), #panelApp:not([hidden]) > :is([data-panel-view="home"], [data-panel-view="sale"], [data-panel-view="report"]):not([hidden]), #adminApp:not([hidden]) > :is([data-admin-tab="matrix"], [data-admin-tab="operations"], [data-admin-tab="catalog-products"], [data-admin-tab="catalog-providers"]):not([hidden])) {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.halloween-season body:has(#publicApp:not([hidden]) > section[data-public-view]:not([hidden]):not([data-public-view="order"]), #panelApp:not([hidden]) > :is([data-panel-view="home"], [data-panel-view="sale"], [data-panel-view="report"]):not([hidden]), #adminApp:not([hidden]) > :is([data-admin-tab="matrix"], [data-admin-tab="operations"], [data-admin-tab="catalog-products"], [data-admin-tab="catalog-providers"]):not([hidden])):not(:has(.public-receipt-page))::before {
  content: "";
  position: absolute;
  top: 92px;
  left: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1664 / 960;
  pointer-events: none;
  background: url("/src/assets/broopay/halloween-home-background.webp") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 82%, transparent);
  mask-composite: intersect;
}

/* On the full store, the seasonal artwork starts immediately after the banner. */
.halloween-season body:has(#publicApp > .public-products-section:not([hidden]) > .public-all-products-banner:not([hidden]))::before {
  display: none;
}
.halloween-season body:has(#publicApp > .public-detail-section:not([hidden]))::before {
  display: none;
}
.halloween-season body:has(#panelSaleWorkspace:not([hidden]) .inline-sale-dialog, #adminMatrixSaleWorkspace:not([hidden]) .inline-sale-dialog)::before {
  display: none;
}

.halloween-season .public-products-section:has(> .public-all-products-banner:not([hidden])) #publicCatalogStart {
  position: relative;
  isolation: isolate;
}

.halloween-season .public-products-section:has(> .public-all-products-banner:not([hidden])) #publicCatalogStart::before {
  content: "";
  position: absolute;
  top: -54px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  aspect-ratio: 1664 / 960;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("/src/assets/broopay/halloween-home-background.webp") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 82%, transparent);
  mask-composite: intersect;
}

.halloween-season body #publicApp > section[data-public-view]:not([hidden]),
.halloween-season body #panelApp > section:is([data-panel-view="home"], [data-panel-view="sale"], [data-panel-view="report"]):not([hidden]),
.halloween-season body #adminApp > section:is([data-admin-tab="matrix"], [data-admin-tab="operations"], [data-admin-tab="catalog-products"], [data-admin-tab="catalog-providers"]):not([hidden]),
.halloween-season body #panelApp .pay-products-home {
  background-color: transparent !important;
}

.halloween-season body #publicApp .public-products-hero:not([hidden]) {
  min-height: 0;
}

.halloween-season body #publicApp:has(> section[data-public-view]:not([hidden]):not([data-public-view="order"])) {
  min-height: calc(57.7vw + 25px);
}

.halloween-season body #publicCartItems:has(> .empty),
.halloween-season body #publicCartItems > .empty {
  background: transparent !important;
}

.halloween-season body:has(#publicApp > .public-order-page:not([hidden])) .halloween-spider-layer {
  display: none !important;
}

/* Any future banner can use data-halloween-banner to receive the same effect. */
[data-halloween-banner] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.halloween-banner-ghost {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 9px rgba(246, 235, 255, .48));
  will-change: transform, opacity;
}

.halloween-banner-ghost svg { display: block; width: 100%; height: 100%; }

.halloween-season #productsGrid .public-digital-product > .public-product-visual,
.halloween-season .public-featured-card-image,
.halloween-season :is(#panelProductsGrid, #adminMatrixProductsGrid) .panel-product-full-art,
.halloween-season #adminProductCatalogRows .admin-catalog-group-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.halloween-season :is(#panelProductsGrid, #adminMatrixProductsGrid) .panel-product-full-art {
  position: absolute;
}

.halloween-season #productsGrid .public-digital-product > .public-product-visual::before,
.halloween-season #productsGrid .public-digital-product > .public-product-visual::after,
.halloween-season .public-featured-card-image::before,
.halloween-season .public-featured-card-image::after,
.halloween-season :is(#panelProductsGrid, #adminMatrixProductsGrid) .panel-product-full-art::before,
.halloween-season :is(#panelProductsGrid, #adminMatrixProductsGrid) .panel-product-full-art::after,
.halloween-season #adminProductCatalogRows .admin-catalog-group-art::before,
.halloween-season #adminProductCatalogRows .admin-catalog-group-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 30%;
  height: 30%;
  pointer-events: none;
  background-image: url("/src/assets/broopay/halloween-card-webs.webp");
  background-size: 200% auto;
  background-repeat: no-repeat;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}

.halloween-season #productsGrid .public-digital-product > .public-product-visual::before,
.halloween-season .public-featured-card-image::before,
.halloween-season :is(#panelProductsGrid, #adminMatrixProductsGrid) .panel-product-full-art::before,
.halloween-season #adminProductCatalogRows .admin-catalog-group-art::before {
  top: 0;
  right: 0;
  background-position: right top;
}

.halloween-season #productsGrid .public-digital-product > .public-product-visual::after,
.halloween-season .public-featured-card-image::after,
.halloween-season :is(#panelProductsGrid, #adminMatrixProductsGrid) .panel-product-full-art::after,
.halloween-season #adminProductCatalogRows .admin-catalog-group-art::after {
  bottom: 0;
  left: 0;
  background-position: left bottom;
}

.halloween-season #productsGrid .public-digital-product > .public-product-visual .public-sold-out-stamp {
  z-index: 3;
}

.halloween-spider-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.halloween-spider {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  color: #342a38 !important;
  filter: drop-shadow(0 0 2px rgba(122, 79, 137, .4));
  will-change: transform;
}

.halloween-spider svg { display: block; width: 100%; height: 100%; }
.halloween-spider .spider-legs,
.halloween-spider .spider-legs path {
  color: #342a38 !important;
  stroke: #342a38 !important;
}
.halloween-spider.is-walking .spider-legs { transform-origin: 50% 50%; animation: spider-step .24s ease-in-out infinite alternate; }
.halloween-spider.is-walking .spider-legs--right { animation-direction: alternate-reverse; }

@keyframes spider-step { to { transform: rotate(6deg) scaleY(.95); } }

body:has(dialog[open]) .halloween-spider-layer { display: none; }

@media (prefers-reduced-motion: reduce) {
  .halloween-spider-layer { display: none; }
  .halloween-banner-ghost { display: none; }
}