/* Learning Gem - welcome "Buddy-front" hero stage (design slice 1c,
   lg-v120; Buddy wave stack lg-v121; Buddy dance lg-v122).
   Visual layer only, loaded after islands-lg1.css. Retires the framed
   welcome video (.lg2-frame in landing-LG4.js): in its place the hero
   stage becomes a frameless layered scene on the navy gem sky - the
   four kids waving and cheering in a short silent loop (buddyhero-lg1.js)
   whose edges melt into the sky, with the Explorer Buddy artwork that
   hero-lg1.js adds standing front and centre in the gap the kids leave.
   lg-v121: buddyhero-lg1.js rebuilds that Buddy as a three-layer stack
   split from the same locked artwork - body, glowing chest core, and
   the raised arm on its own layer - so he waves back at the kids: the
   arm swings, the body bounces gently and the core breathes gold, all
   with transform/opacity only and no face pixel redrawn.
   lg-v122: he dances with the kids - the body layer is armless, the
   scroll arm becomes a layer of its own, and the stack (wrap > rock >
   bounce > layers) rocks side to side while both arms swing in
   counter-phase, continuously, like the kids' loop beside him. The stack
   hides hero-lg1's original img only once its body layer has loaded
   (the .lg-bh-stack-on stage class); on any failure the lg-v120
   single-image presentation stays. The speech bubble keeps
   landing-LG4's element and tap handling; it only gains a z-index so
   it stays tappable above the layers, plus a wide-screen nudge to sit
   beside the Buddy's head. No layout outside the hero stage, no copy
   and no behaviour changes. All selectors are scoped to the landing
   page. */

/* The stage takes the kids loop's own wide shape (768x354) so the
   scene fills it exactly - nothing framed, nothing cropped. */
#lg-land .lg2-stage { aspect-ratio: 768 / 354; }

/* Retire the framed video (buddyhero-lg1.js also pauses it and strips
   its source, so it never downloads or plays). */
#lg-land .lg2-hero .lg2-stage .lg2-frame { display: none; }

/* Kids layer (the loop, or its poster still when video cannot play):
   fills the stage behind the Buddy, edges feathered so its navy melts
   into the gem sky - no visible rectangle. Pure decoration: it never
   intercepts taps. */
#lg-land .lg-bh-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 64% 74% at 50% 46%, #000 56%, rgba(0, 0, 0, 0) 97%);
  mask-image: radial-gradient(ellipse 64% 74% at 50% 46%, #000 56%, rgba(0, 0, 0, 0) 97%);
}
/* Where mask compositing is available, feather each edge separately:
   a cleaner melt that keeps the kids solid almost to the edges. */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  #lg-land .lg-bh-media {
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 14%, #000 86%, rgba(0, 0, 0, 0) 100%);
    mask-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 14%, #000 86%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* The Explorer Buddy (hero-lg1.js's own img.lg-hero-buddy - the exact
   artwork already live, not a copy): front and centre in the gap
   between the kids, feet near the kids' feet line, about as tall as
   the stage. Centring uses the standalone `translate` property, so
   hero-lg1's gentle float (which animates the `transform` property)
   still composes with it, and hero-lg1's drop-shadow glow keeps
   following his silhouette. This remains the presentation whenever
   the wave stack below is not active. */
#lg-land .lg2-stage .lg-hero-buddy {
  left: 50%;
  bottom: 1%;
  height: 92%;
  width: auto;
  translate: -50% 0;
  z-index: 3;
}

/* Once the wave stack's body layer has loaded, buddyhero-lg1.js marks
   the stage .lg-bh-stack-on and hero-lg1's original img steps aside -
   the stack below is the same artwork, split into layers. */
#lg-land .lg2-stage.lg-bh-stack-on .lg-hero-buddy { display: none; }

/* Buddy dance stack (lg-v121, danced lg-v122). The wrapper sits
   exactly where the single img.lg-hero-buddy sat - front and centre,
   feet at the kids' feet line, 92% of the stage tall - and carries
   only the centring `translate`. Inside it the motion nests so each
   piece is exact: the rock layer sways the whole Buddy on the
   standalone `rotate`, the bounce layer hops on its own `translate`
   a quarter-phase behind, and the artwork layers sit inside the
   bounce. Every artwork layer keeps hero-lg1's drop-shadow pair so
   the silhouette glow matches the single-image presentation.
   Decoration only: no taps. */
#lg-land .lg-bh-buddywrap {
  position: absolute;
  left: 50%;
  bottom: 1%;
  height: 92%;
  aspect-ratio: 618 / 649;
  translate: -50% 0;
  z-index: 3;
  pointer-events: none;
}
/* The rock: the whole Buddy sways around a pivot at his feet. */
#lg-land .lg-bh-rock {
  position: absolute;
  inset: 0;
  transform-origin: 50% 98%;
}
#lg-land .lg-bh-buddy { position: absolute; inset: 0; }
#lg-land .lg-bh-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(23, 37, 84, .45)) drop-shadow(0 0 34px rgba(124, 58, 237, .35));
}
/* The chest core's breathing glow: a soft gold radial sitting over
   the core (centre ~50.5% / ~60.5% of the artwork), screened over the
   body layer so it reads as light, not paint. */
#lg-land .lg-bh-core {
  position: absolute;
  left: 33%;
  top: 44%;
  width: 35%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 64, .9) 0%, rgba(255, 170, 40, .38) 46%, rgba(255, 170, 40, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* The arms: full-canvas layers over the body, each swinging on its
   own shoulder pivot via the standalone `rotate` property - the
   raised wave arm on the viewer's left (pivot 50% / 70% of the
   artwork), the scroll arm on the viewer's right (pivot 65.5% /
   47.5%). */
#lg-land .lg-bh-arm, #lg-land .lg-bh-armr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(23, 37, 84, .45)) drop-shadow(0 0 34px rgba(124, 58, 237, .35));
}
#lg-land .lg-bh-arm { transform-origin: 50% 70%; }
#lg-land .lg-bh-armr { transform-origin: 65.5% 47.5%; }

/* Dance motion - transform/opacity only, continuous like the kids'
   loop: the whole Buddy rocks side to side, the bounce hops a
   quarter-phase behind the rock (its -0.55s delay on the same 2.2s
   cycle), the two arms swing against each other, and the core glow
   breathes. */
@media (prefers-reduced-motion: no-preference) {
  #lg-land .lg-bh-rock { animation: lgBhRock 2.2s ease-in-out infinite alternate; }
  #lg-land .lg-bh-buddy { animation: lgBhBounce 2.2s ease-in-out -0.55s infinite alternate; }
  #lg-land .lg-bh-arm { animation: lgBhWave 1.1s ease-in-out infinite alternate; }
  #lg-land .lg-bh-armr { animation: lgBhWaveR 1.1s ease-in-out infinite alternate; }
  #lg-land .lg-bh-core { animation: lgBhGlow 2.8s ease-in-out infinite alternate; }
}
@keyframes lgBhRock {
  from { rotate: -2.5deg; }
  to { rotate: 2.5deg; }
}
@keyframes lgBhBounce {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}
@keyframes lgBhWave {
  from { rotate: -7deg; }
  to { rotate: 6deg; }
}
@keyframes lgBhWaveR {
  from { rotate: 4deg; }
  to { rotate: -4deg; }
}
@keyframes lgBhGlow {
  from { opacity: .25; }
  to { opacity: .65; }
}

/* Speech bubble: the same element with the same tap behaviour
   (landing-LG4's delegated data-hi handler plays the recorded hello).
   It only rises above the new layers so it stays tappable, and on
   wide screens it tucks in beside the Buddy's head instead of
   floating at the stage's far corner. */
#lg-land .lg2-stage .lg2-bubble { z-index: 4; }
@media (min-width: 900px) {
  #lg-land .lg2-stage .lg2-bubble { right: 14px; top: 0; }
}

/* Reduced motion: the loop is replaced by its still (buddyhero-lg1.js)
   and nothing in the stage animates (hero-lg1.css already stills the
   Buddy under the same setting). */
@media (prefers-reduced-motion: reduce) {
  #lg-land .lg-bh-media, #lg-land .lg-bh-rock, #lg-land .lg-bh-buddy, #lg-land .lg-bh-arm, #lg-land .lg-bh-armr, #lg-land .lg-bh-core { animation: none !important; }
}