/* Learning Gem - welcome "Storybook Path" floating islands (design
   slice 1b, lg-v119). Visual layer only, loaded after story-lg1.css.
   Once an island illustration has loaded, islands-lg1.js adds the
   .lg-island-on class to its world button: the button's card chrome -
   the glassy background, border and offset shadow from
   story-lg1.css - falls away, the card's own artwork (.pic) is
   hidden, and the island floats directly on the navy gem sky above
   its name plate, whose deepened lg-v116 colours are unchanged.
   A button that never gets the class (its island could not load)
   keeps its exact lg-v116 appearance. The alternating layout is
   story-lg1.css's; for swapped cards the float moves from the card
   onto the island image itself (see the animation section below).
   Everything is scoped to the landing page. */

/* The island itself: fills the button's stage (roughly 424px wide on
   desktop inside the 440px-capped button, up to the button's width on
   narrow screens). Purely decorative; the button keeps every tap. */
#lg-land .lg2-world .lg-island {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 22px 20px rgba(2, 6, 23, .45));
}

/* Chrome off - only for swapped cards. The extra .lg-island-on class
   outranks story-lg1.css's #lg-land .lg2-world chrome rules, so that
   file stays untouched. The button's own :active press shadow (from
   landing-LG4.css) is stilled too, so no colour slab flashes under
   the island while it is pressed. */
#lg-land .lg2-world.lg-island-on {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  /* The wrapper float (story-lg1.css) is stilled for swapped cards:
     the motion moves onto the island image itself, below, so the
     island hovers while its name plate stays perfectly steady. */
  animation: none;
}
#lg-land .lg2-world.lg-island-on:active { box-shadow: none; }
#lg-land .lg2-world.lg-island-on .pic { display: none; }

/* The name plate becomes a small floating plaque under its island:
   the same deepened world colour painted by story-lg1.css (its
   background rule is not repeated or altered here), now rounded all
   round and inset from the button's edges - landing-LG4.css otherwise
   stretches it full-bleed with negative margins. */
#lg-land .lg2-world.lg-island-on .lbl {
  margin: 10px 6px 2px;
  border-radius: 20px;
  border-top: 0;
}

/* The island's name (lg-v119): a small subtitle under the subject on
   the name plate, in soft gold. islands-lg1.js wraps the subject <b>
   and this subtitle in .lg-lbl-names (a vertical stack) so the
   subtitle sits directly under the name while the play icon stays at
   the plate's right edge. The subtitle is plain text inside the
   button - part of what a screen reader announces - and is added
   whether or not the island picture loads, so these rules do NOT key
   off .lg-island-on: the plate keeps story-lg1.css's deepened paint
   in both states. Readability: story-lg1.css paints each plate as
   the world's --d blended 45/55 into the sky navy; the lightest
   plate, Math's blue, lands near rgb(19,45,124), against which
   #ffd977 contrasts roughly 8:1, so the gold stays readable on every
   plate. The size tracks the subject's clamp(20px, 2.6vw, 26px) at
   about 0.72x, and the plate simply grows a little taller. */
#lg-land .lg2-world .lg-lbl-names {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
#lg-land .lg2-world .lg-island-name {
  font-family: var(--display);
  font-size: clamp(14.5px, 1.9vw, 19px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.3;
  color: #ffd977;
}

/* ---- The islands themselves stay alive. Each island image bobs
   gently on its own (the standalone `translate` property, like the
   story float it replaces), and a soft world-coloured glow breathes
   behind it - opacity only, so both stay cheap and composited. Every
   island keeps its own duration and a negative delay, so no two
   islands rise, fall or glow together: the journey never moves in
   lockstep. The glow is a pseudo-element of the button (which is a
   stacking context above the path), painted under the island image
   and never intercepting taps. ---- */
#lg-land .lg2-world.lg-island-on .lg-island {
  position: relative;
  z-index: 1;
}
#lg-land .lg2-world.lg-island-on::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 30%;
  bottom: 16%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--c) 40%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #lg-land .lg2-world.lg-island-on .lg-island { animation: lgIslandBob 5.8s ease-in-out infinite; }
  #lg-land .lg2-world.lg-island-on::after { animation: lgIslandGlow 7.4s ease-in-out infinite; }
  #lg-land .lg2-world:nth-child(1).lg-island-on .lg-island { animation-duration: 5.3s; animation-delay: -1.1s; }
  #lg-land .lg2-world:nth-child(2).lg-island-on .lg-island { animation-duration: 6.2s; animation-delay: -2.7s; }
  #lg-land .lg2-world:nth-child(3).lg-island-on .lg-island { animation-duration: 5.7s; animation-delay: -.6s; }
  #lg-land .lg2-world:nth-child(4).lg-island-on .lg-island { animation-duration: 6.5s; animation-delay: -3.4s; }
  #lg-land .lg2-world:nth-child(5).lg-island-on .lg-island { animation-duration: 5.5s; animation-delay: -1.9s; }
  #lg-land .lg2-world:nth-child(6).lg-island-on .lg-island { animation-duration: 6s; animation-delay: -2.2s; }
  #lg-land .lg2-world:nth-child(1).lg-island-on::after { animation-duration: 7.9s; animation-delay: -2.4s; }
  #lg-land .lg2-world:nth-child(2).lg-island-on::after { animation-duration: 6.8s; animation-delay: -.9s; }
  #lg-land .lg2-world:nth-child(3).lg-island-on::after { animation-duration: 7.6s; animation-delay: -3.8s; }
  #lg-land .lg2-world:nth-child(4).lg-island-on::after { animation-duration: 6.6s; animation-delay: -1.6s; }
  #lg-land .lg2-world:nth-child(5).lg-island-on::after { animation-duration: 7.2s; animation-delay: -2.9s; }
  #lg-land .lg2-world:nth-child(6).lg-island-on::after { animation-duration: 7.7s; animation-delay: -.3s; }
}
@keyframes lgIslandBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes lgIslandGlow {
  0%, 100% { opacity: .35; }
  50% { opacity: .75; }
}

/* Reduced motion: the islands rest, exactly like the story float. */
@media (prefers-reduced-motion: reduce) {
  #lg-land .lg2-world .lg-island,
  #lg-land .lg2-world.lg-island-on::after { animation: none !important; }
}