/* ==========================================================================
   LEGIBILITY LAYER — loaded after each template's own style.css.
   It has exactly one job: no line of copy may be sat on top of, or blended
   into, the decoration around it.

   Three faults it corrects, all of them shared by every template:

     1. .deco-float sprites paint at z-index:1, i.e. ON TOP of the section
        copy that follows them in the markup. Birds, cherubs and lanterns
        positioned at top:8%..22% land squarely on the hero quote, so the
        first words of a verse were being covered by a bird.
     2. The big storybook art (scenes, garlands, vines, birds, cherubs) came
        in at near-full strength directly behind the type. Even once it sits
        behind the text, a solid maroon bird under grey italic body copy is
        still unreadable — this layer turns that art into true background
        art so the copy always wins.
     3. The falling-petal shower is fixed above the whole page, so its
        petals crossed every line of type at full strength.

   Per-theme corrections — text tones, shimmer gradients, and the opacity of
   each frame's own repeating pattern — live at the bottom of each template's
   style.css under "READABILITY", because the right value differs per palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Copy always paints above the decoration.

   Every non-sprite child of a panel is lifted onto its own layer above the
   z-index:1 sprites. The cover's own absolutely-positioned framing art
   (deco bands, corner ornaments) is excluded — that art is meant to sit at
   the edges behind the type, and lifting it would recreate the exact bug
   this rule exists to fix.
   -------------------------------------------------------------------------- */
.section > *:not(.deco-float):not(.copy-scrim),
.footer > *:not(.deco-float):not(.copy-scrim),
.cover > *:not(.deco-float):not(.copy-scrim):not(.cover__deco-top):not(.cover__deco-bottom):not(.cover__corner){
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   1b. …and the decoration that strays into the text column is quieted.

   Painting above the art is necessary but not sufficient: a bird, a leaf or
   a lantern crossing a 14px line still costs it a point of contrast. main.js
   drops one .copy-scrim into every panel — a pool of the paper colour that
   sits above every sprite and scene but below every line of type, and fades
   out long before the panel edges, so the art at the margins is untouched
   and only what crosses the copy is softened.

   Both pseudo-elements of .cover, .section and .footer are already spent on
   per-template ornament, which is why this is a real element.
   -------------------------------------------------------------------------- */
.footer{ position: relative; }
.copy-scrim{
  position: absolute;
  inset: 0;
  z-index: 2;   /* above the z-index:1 sprites, below the copy at 3 */
  pointer-events: none;
  background: radial-gradient(ellipse 78% 62% at 50% 50%,
    var(--color-bg) 0%,
    var(--color-bg) 36%,
    transparent 76%);
  opacity: .62;
}

/* The cover holds one short stack of type in the middle of a full-height
   panel, so its pool is wider and flatter — the garland at the top and the
   flowerbed at the bottom stay outside it. */
.cover .copy-scrim{
  background: radial-gradient(ellipse 86% 44% at 50% 52%,
    var(--color-bg) 0%,
    var(--color-bg) 42%,
    transparent 78%);
  opacity: .66;
}

/* --------------------------------------------------------------------------
   2. The storybook illustrations read as background art.

   Sitting behind the type is necessary but not sufficient: a solid maroon
   bird or a saturated hibiscus under dark body copy is still hard to read a
   word over. So every sprite gives up a little strength, and the pieces big
   enough to land across the text column give up a lot — the depth order
   between foreground, mid-ground and far background art is preserved, just
   shifted down as a whole.

   Written against .is-entered because that is the class motion.js adds when
   it fades each sprite in; these override base.css's and each template's own
   entered-state opacities by source order. Each rule is doubled with a
   .js-motion prefix to outrank base.css's own prefixed versions.
   -------------------------------------------------------------------------- */
.deco-float.is-entered,
.js-motion .deco-float.is-entered{ opacity: .74; }

.deco-float.is-bird.is-entered,
.js-motion .deco-float.is-bird.is-entered{ opacity: .3; }

.deco-float.is-cherub.is-entered,
.js-motion .deco-float.is-cherub.is-entered{ opacity: .3; }

.deco-float.is-garland.is-entered,
.js-motion .deco-float.is-garland.is-entered{ opacity: .5; }

.deco-float.is-vine.is-entered,
.js-motion .deco-float.is-vine.is-entered{ opacity: .38; }

.deco-float.is-scene.is-entered,
.js-motion .deco-float.is-scene.is-entered{ opacity: .42; }

.deco-float.is-scene.is-soft.is-entered,
.js-motion .deco-float.is-scene.is-soft.is-entered{ opacity: .26; }

.deco-float.is-scene.is-ghost.is-entered,
.js-motion .deco-float.is-scene.is-ghost.is-entered{ opacity: .06; }

.deco-float.is-back.is-entered,
.js-motion .deco-float.is-back.is-entered{ opacity: .1; }

/* The small margin sprites (roses, ferns, sparkles, butterflies) keep their
   presence — they live at the edges, not in the text column — but the ones
   flagged as mid-ground still step back a little further than before. */
.deco-float.is-far.is-entered,
.js-motion .deco-float.is-far.is-entered{ opacity: .42; }

/* --------------------------------------------------------------------------
   3. Overlays that cross the whole panel.

   The petal shower is fixed above everything (it has to be — the frame's
   background is opaque, so it cannot be layered underneath), so it is
   softened instead of moved.
   -------------------------------------------------------------------------- */
.petals-overlay{ opacity: .55; }

@media (prefers-reduced-motion: reduce){
  .petals-overlay{ opacity: .4; }
}