/* Halloween overlays - the final scoped correction for /halloween.html.
 *
 * The repeated wide landscape bands (storybook-paper-border.webp) and the empty
 * rows they reserved are gone. Instead: clearly varied peach/gold/lilac/plum
 * gradients with soft radial glows, a few fine corner webs in selected corners
 * and four small individual pumpkins on occasional outer edges. Everything is
 * a background or a pseudo-element: pointer-events:none, decorative only, behind
 * the real content, no reserved layout space.
 *
 * Loaded after storybook.css; it overrides that layer's band images, its extra
 * bottom padding and its near-white gallery islands, and changes nothing else:
 * hero, header, footer, previews, cards, 52px Play buttons, disclosures and the
 * audio panel keep their behaviour and content. */

/* ---------- 1. remove the rejected bands and their reserved space ---------- */

body.halloween-page main #hw-adventures,
body.halloween-page main .hw-headbands,
body.halloween-page main .hw-more {
  background-image: none;          /* replaced below, never the band URL */
  padding-bottom: clamp(44px, 5.6vw, 72px);
}

@media (max-width: 900px) {
  body.halloween-page main #hw-adventures,
  body.halloween-page main .hw-headbands,
  body.halloween-page main .hw-more {
    padding-bottom: clamp(32px, 4.6vw, 48px);
  }
}

/* ---------- 2. decoration clay and layering ---------- */

body.halloween-page main {
  --ov-web: clamp(110px, 12vw, 170px);
  --ov-pumpkin: clamp(36px, 4.8vw, 72px);
}

/* The wrappers that hold real content sit above the decorations, so nothing can
   be hidden or blocked and the CSS never needs a negative z-index. */
body.halloween-page main #hw-adventures > .wrap,
body.halloween-page main .hw-collection > .wrap,
body.halloween-page main .hw-lanterns > .wrap,
body.halloween-page main .hw-headbands > .wrap,
body.halloween-page main .hw-more > .wrap {
  position: relative;
  z-index: 1;
}

body.halloween-page main > section::before,
body.halloween-page main > section::after {
  pointer-events: none;
}

/* ---------- 3. corner webs in selected corners ---------- */

/* atmosphere-web-ink.svg is a symmetric fan anchored at its top centre: showing
   one half of it (background-size 200% 100%) yields a square web with its origin
   in the box corner. `background-position: right top` puts the origin top-left,
   `left top` mirrors it to the top-right. */
body.halloween-page main #hw-adventures::after,
body.halloween-page main .hw-lanterns::after,
body.halloween-page main .hw-more::after,
body.halloween-page main .hw-collection::after,
body.halloween-page main .hw-headbands::after {
  content: "";
  position: absolute;
  /* Explicit reset: atmosphere.css leaves bottom/left/transform values on these
     pseudo-elements, which must not leak into the chosen corner. */
  left: auto;
  bottom: auto;
  transform: none;
  top: 0;
  right: 0;
  width: var(--ov-web);
  height: var(--ov-web);
  background-image: url("/assets/halloween/atmosphere-web-ink.svg");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: left top;          /* origin top-right */
  opacity: .8;
  z-index: 0;
}

/* The two left-hand corners (collection, headbands). */
body.halloween-page main .hw-collection::after,
body.halloween-page main .hw-headbands::after {
  right: auto;
  left: 0;
  background-position: right top;         /* origin top-left */
}

/* ---------- 4. four small pumpkins on occasional outer edges ---------- */

body.halloween-page main #hw-adventures::before,
body.halloween-page main .hw-collection::before,
body.halloween-page main .hw-headbands::before,
body.halloween-page main .hw-more::before {
  content: "";
  position: absolute;
  /* Stem up, bottom anchored: atmosphere.css leaves top and a mirrored
     transform on this pseudo-element, so both are reset explicitly. */
  top: auto;
  bottom: 4px;
  transform: none;
  width: var(--ov-pumpkin);
  height: var(--ov-pumpkin);
  background: url("/assets/halloween/overlay-pumpkin.webp") no-repeat center bottom / contain;
  opacity: .95;
  z-index: 0;
}

body.halloween-page main #hw-adventures::before,
body.halloween-page main .hw-headbands::before { left: 2.5%; right: auto; }
body.halloween-page main .hw-collection::before,
body.halloween-page main .hw-more::before { left: auto; right: 2.5%; }

/* Small screens: the webs move to the opposite bottom corner (mirrored, still a
   real corner web) and everything shrinks into the section's own padding. */
@media (max-width: 900px) {
  body.halloween-page main { --ov-web: clamp(60px, 10vw, 90px); }

  body.halloween-page main #hw-adventures::after,
  body.halloween-page main .hw-lanterns::after,
  body.halloween-page main .hw-more::after,
  body.halloween-page main .hw-collection::after,
  body.halloween-page main .hw-headbands::after {
    top: auto;
    bottom: 2px;
    transform: scaleY(-1);                /* the corner anchor moves to the bottom */
  }
}

/* ---------- 5. the varied world, section by section ---------- */

/* Adventures: cream/gold at the top flowing into visible lilac, with a peach
   radial glow on the left and a feathered join at the top edge. */
body.halloween-page main #hw-adventures {
  background-image:
    radial-gradient(72% 120px at 50% 0%, rgb(255 253 248 / 88%) 0%, rgb(255 253 248 / 0%) 72%),
    radial-gradient(58% 44% at 12% 8%, rgb(255 186 112 / 40%), transparent 70%),
    linear-gradient(180deg, #fff6e2 0%, #ffeccd 32%, #f4e2f6 70%, #e7d3f4 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

/* Collection: a long section that keeps moving - lilac, peach, pale gold,
   lavender - with a restrained coloured glow alternating per gallery. */
body.halloween-page main .hw-collection {
  background-image:
    linear-gradient(180deg,
      #e7d3f4 0%, #fbe4d3 14%, #fff3dd 30%, #efe0f7 46%,
      #fbe6d6 62%, #fff1e0 76%, #f0e2f8 90%, #e9d9f5 100%);
  background-position: center top;
  background-size: auto;
  background-repeat: no-repeat;
  box-shadow: none;
}

/* The gallery islands stay, but as translucent light instead of near-white
   slabs, so the section's colour keeps showing through. */
body.halloween-page main .hw-collection .hw-gallery {
  background: radial-gradient(120% 92% at 50% 0%, rgb(255 255 255 / 34%), rgb(255 255 255 / 0%) 74%);
  box-shadow: 0 22px 46px -34px rgb(74 32 106 / 32%);
}

body.halloween-page main .hw-collection .hw-gallery:nth-child(odd) {
  background-image: radial-gradient(64% 70% at 6% 24%, rgb(255 196 110 / 26%), transparent 72%);
  background-repeat: no-repeat;
}

body.halloween-page main .hw-collection .hw-gallery:nth-child(even) {
  background-image: radial-gradient(64% 70% at 94% 24%, rgb(203 160 240 / 30%), transparent 72%);
  background-repeat: no-repeat;
}

/* Lanterns: lavender into peach. */
body.halloween-page main .hw-lanterns {
  background-image:
    radial-gradient(62% 120px at 50% 0%, rgb(255 253 248 / 84%) 0%, rgb(255 253 248 / 0%) 72%),
    radial-gradient(56% 42% at 88% 12%, rgb(255 186 112 / 32%), transparent 70%),
    linear-gradient(180deg, #e9d9f5 0%, #f7e6e2 48%, #ffe8cc 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
  /* The safety note sat almost on the join: a normal bottom breath, not a band. */
  padding-bottom: clamp(36px, 4vw, 44px);
}

/* Headbands: peach into lilac/rose. */
body.halloween-page main .hw-headbands {
  background-image:
    radial-gradient(70% 120px at 50% 0%, rgb(255 250 241 / 86%) 0%, rgb(255 250 241 / 0%) 74%),
    radial-gradient(56% 42% at 10% 14%, rgb(255 176 130 / 30%), transparent 70%),
    linear-gradient(180deg, #ffe8cc 0%, #fbe0e6 46%, #eee0f7 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

/* Activity sheets and the Vela game: connected lavender / peach / gold stages. */
body.halloween-page main .hw-sheets {
  background-image:
    radial-gradient(60% 120px at 50% 0%, rgb(255 253 248 / 86%) 0%, rgb(255 253 248 / 0%) 72%),
    radial-gradient(52% 40% at 88% 6%, rgb(255 200 130 / 30%), transparent 70%),
    linear-gradient(180deg, #fde8dc 0%, #f7e6f6 58%, #efe2f8 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

body.halloween-page main .hw-buki-sheets {
  background-image:
    radial-gradient(60% 120px at 50% 0%, rgb(255 253 248 / 86%) 0%, rgb(255 253 248 / 0%) 72%),
    radial-gradient(52% 40% at 10% 8%, rgb(208 170 244 / 30%), transparent 70%),
    linear-gradient(180deg, #fff2dc 0%, #fff0da 52%, #fde8dc 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

body.halloween-page main .hw-game {
  background-image:
    radial-gradient(56% 120px at 50% 0%, rgb(255 253 248 / 86%) 0%, rgb(255 253 248 / 0%) 72%),
    radial-gradient(54% 42% at 90% 10%, rgb(255 186 112 / 32%), transparent 70%),
    linear-gradient(180deg, #efe2f8 0%, #ffe9d2 52%, #fff2dc 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

/* Read & Listen: peach into light lavender (the audio panel keeps its own warm
   cream surface from storybook.css). */
body.halloween-page main .hw-more {
  background-image:
    radial-gradient(66% 120px at 50% 0%, rgb(255 253 248 / 86%) 0%, rgb(255 253 248 / 0%) 72%),
    radial-gradient(52% 40% at 12% 10%, rgb(255 190 120 / 28%), transparent 70%),
    linear-gradient(180deg, #efe2f8 0%, #f7e3f2 54%, #ece0f8 100%);
  background-position: center top, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

/* The pack section stays the deepest part of the night, with berry and amber
   glows so it is rich rather than flat; cream copy is untouched. */
body.halloween-page main .hw-ori {
  background-image:
    radial-gradient(46% 42% at 86% 8%, rgb(214 116 168 / 34%), transparent 68%),
    radial-gradient(52% 40% at 12% 92%, rgb(255 168 80 / 26%), transparent 70%),
    linear-gradient(180deg, #3b1553 0%, #2b0f42 58%, #200a33 100%);
  background-position: 0 0, 0 0, center top;
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

/* Each section above already starts with a soft top feather (the translucent
   light band in its first background layer), so neighbouring colours meet
   naturally without any reserved empty row. */