/**
 * Decorative animated asset system — see GitHub issue #259.
 *
 * Zone percentages below started as pixel measurements off the Figma
 * reference (RTE-TIA-2026-Update, "Competition Overview") and were then
 * tuned against a higher-fidelity reference the client supplied directly.
 * They're relative to the block's own actual rendered box (the block
 * itself, not a fixed-aspect-ratio hint) — see decorative.js, which
 * mounts each composition into `.th-decorative-root` as a direct,
 * position:relative child of the block <section>. Because that section's
 * height is genuinely CMS-driven (body copy length varies), bleed-to-edge
 * assets are always positioned/sized relative to whatever that real
 * height ends up being, not an assumed one — deliberately, after an
 * earlier version of this system got bitten by exactly that mismatch.
 */

.th-decorative-root {
  position: absolute;
  inset: 0;
  overflow: hidden; /* compositions are confined/cropped by their own block — never bleed into neighbors */
  pointer-events: none;
  /* No z-index here deliberately. This block's <section> only gets
     position:relative (no z-index), so it never establishes its own
     stacking context — giving this root an explicit z-index (even 0)
     made it compete in whatever stacking context sits above the whole
     page rather than staying scoped to this block, and it got buried
     behind an unrelated element somewhere else on the page. Verified by
     removing z-index entirely: the composition renders correctly.
     Stacking is instead just DOM order (see below and decorative.js). */
}

.th-decorative-slot {
  position: absolute;
  pointer-events: none;
}

.th-decorative-slot picture,
.th-decorative-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Stacking order relies on DOM order, not z-index (see note on
   .th-decorative-root above) — decorative.js appends slots in the order
   COMPOSITIONS defines them, paper first, so later slots (primary,
   sprinkle) naturally paint on top of it without needing an explicit
   z-index at all. */

/* Paper is a full-bleed background fill, not a posed figure — cover its
   box edge-to-edge (cropping is fine/expected) rather than contain. */
.th-decorative-slot[data-role="paper"] img { object-fit: cover; }

/* --- "hero_cluster" composition --- */

/* Paper: dominant background texture, matches the block's own background
   color (see decorative.js) — full width, bleeds left/right/bottom.
   object-position: bottom — the torn-edge detail sits in the lower ~35%
   of the source asset's own crop; anchoring to the top instead shows the
   asset's transparent padding and the paper effectively vanishes. */
.zone-hero-paper {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.zone-hero-paper img { object-position: center bottom; }

/* Hand: right-aligned, bleeds off the bottom edge. */
.zone-hero-hand {
  left: 62%;
  top: 5%;
  width: 30%;
  height: 100%;
}
.zone-hero-hand img { object-position: center bottom; }

/* Doodle: bottom-right, near the hand's wrist. Sized generously — the
   squiggle asset is a very wide/flat shape (~3.8:1), so a boxy zone
   leaves most of its own height empty via object-fit:contain's
   letterboxing; a wide, short box matching that ratio actually fills
   with visible squiggle instead of mostly blank space. */
.zone-hero-doodle {
  left: 40%;
  bottom: -2%;
  width: 46%;
  height: 26%;
}
.zone-hero-doodle img { object-position: bottom center; }

/* --- "hero_cluster_alt" composition --- */
/* Uses zone-hero-paper (above) for its backdrop. */

/* Art supplies: right-anchored at a fixed offset (not a %) so its
   distance from the lamb/doodle cluster stays constant regardless of
   block width. A flat duotone photo (no color variants to pick from,
   unlike the doodle/paper families), so referenced by its literal name
   in decorative.js. */
.zone-hero-alt-brushes {
  right: 250px;
  bottom: -6%;
  width: 24%;
  height: 55%;
}
.zone-hero-alt-brushes img { object-position: bottom left; }

/* nature-lambs already has 2-3 lambs baked into the one image (see
   resources/images/decorative), so a single instance is enough on its
   own - two instances (an earlier version of this) read as too busy.
   Right-edge-anchored, full block height (like hero_cluster's own
   zone-hero-hand), sized wide enough to overlap zone-hero-alt-doodle
   below - the composition array in decorative.js orders the doodle
   before the lamb so the lamb paints on top of it. */
.zone-hero-alt-lamb-1 {
  right: 2%;
  top: 0;
  width: 40%;
  height: 100%;
}
.zone-hero-alt-lamb-1 img { object-position: center center; }

/* Doodle: sized up and pushed past the block's own right/top edges -
   .th-decorative-root's overflow:hidden crops it at the block boundary
   (the "never bleed into neighbors" rule is about not spilling into
   the *next section*, not about staying inside this one's edges). */
.zone-hero-alt-doodle {
  right: -12%;
  top: -10%;
  width: 42%;
  height: 60%;
}
.zone-hero-alt-doodle img { object-position: top right; }

/* --- "corner_accent" composition --- */

/* Big doodle: top-right corner, bleeding well off the top+right edges. */
.zone-accent-doodle {
  right: -38%;
  top: -18%;
  width: 90%;
  height: 115%;
}
.zone-accent-doodle img { object-position: top right; }

/* Pointing hand: enters from the right edge specifically (not a corner).
   The source asset is a vertical pose (wrist at bottom, finger pointing
   straight up); it's rotated -90deg on the whole slot box (not just the
   img) so object-fit sizing is computed against the box's real,
   un-rotated aspect ratio — rotating only the <img> let contain shrink it
   down to near-nothing to fit a box shaped for the *rotated* result. The
   box below is portrait, matching the source asset's own ~0.59 aspect
   ratio, and its visual footprint after rotation is roughly its height x
   width swapped — position/size it with that swap in mind. */
.zone-accent-hand {
  right: -2%;
  top: 8%;
  width: 30%;
  height: 55%;
  transform: rotate(-90deg);
  transform-origin: center center;
}
.zone-accent-hand img { object-position: center center; }

/* --- "corner_accent_alt" composition (Inspiration page header) --- */
/* Same idea as corner_accent above, re-tuned for a much shorter section:
   corner_accent's own numbers were designed against the tall cta_banner
   blocks, and at this header's height they left the star almost entirely
   clipped off-canvas and the hand short of the edge. */

/* Paper backdrop, painted first (behind the doodle/hand) - same asset
   family as hero_cluster/hero_cluster_alt's paper-grass, but those anchor
   it bottom-edge-to-edge, full width, in a color matched to the block's
   own background (:closest). Here it needs to read as entering from the
   right/top-right corner instead of blending into the background, so it
   uses the same whole-box-rotation technique as .zone-accent-alt-hand
   below (rotating just the <img> would let object-fit:cover crop against
   the *rotated* result instead of the box's real aspect ratio): the
   source asset's solid fill sits along its own bottom edge, and
   object-position keeps that edge anchored pre-rotation, so rotating the
   box -90deg swings that solid edge round to the right, bleeding off
   that edge instead. */
.zone-accent-alt-paper {
  right: -2%;
  top: -34%;
  width: 44%;
  height: 160%;
  transform: rotate(-90deg);
  transform-origin: center center;
}
.zone-accent-alt-paper img { object-position: center bottom; }

/* Squiggle is a very wide/flat shape (~3.8:1, see zone-hero-doodle's own
   note) - a tall boxy zone sized for the old star doodle just letterboxed
   it down to a thin, oddly-cropped sliver poking above the section, so
   this needs its own wide/short box instead. */
.zone-accent-alt-doodle {
  right: -4%;
  top: 10%;
  width: 85%;
  height: 38%;
}
.zone-accent-alt-doodle img { object-position: top right; }

/* Same rotated-box technique as .zone-accent-hand (see note above it),
   just wider/taller so the hand's visual footprint actually reaches the
   right edge of a much shorter section instead of stopping short. */
.zone-accent-alt-hand {
  right: -14%;
  top: 2%;
  width: 46%;
  height: 85%;
  transform: rotate(-90deg);
  transform-origin: center center;
}
.zone-accent-alt-hand img { object-position: center center; }

@media (max-width: 1023px) {
  /* Belt-and-braces: decorative.js already skips rendering sprinkle slots
     below the breakpoint, but this hides anything left over (no-JS
     fallback, or a slot added later without updating the JS gate). */
  .th-decorative-slot[data-role="sprinkle"] {
    display: none;
  }

  /* corner_accent's pointing hand collides with body copy once the
     section narrows to a single mobile-width column (it's positioned to
     read alongside a text column that's only that wide on desktop) — drop
     it below the breakpoint and keep just the doodle. */
  .zone-accent-hand {
    display: none;
  }

  /* Same reasoning for corner_accent_alt's hand: it collides with the
     filter pills once the banner reflows to mobile width. The paper panel
     is sized/positioned against the desktop layout too - at mobile width
     its torn edge cuts straight across the filter pills - so it comes
     down too, leaving just the doodle. */
  .zone-accent-alt-hand,
  .zone-accent-alt-paper {
    display: none;
  }
}