/* Learning Gem - welcome screen "Storybook Path" (design slice 1, lg-v116).
   Visual layer only, loaded after hero-lg1.css: the whole welcome page
   becomes one deep-navy gem sky. A dotted golden path (inserted by
   story-lg1.js) winds down the "Pick a world" section through the six
   worlds, restyled as floating islands, and the gem-buddy, grade and
   grown-ups sections rest on calm dark-translucent panels under the
   same stars. No layout of controls, copy or behaviour changes: every
   button, link and the sign-up flow work exactly as before. All
   selectors are scoped to the landing page. */

/* ---- One sky: stars over a deep navy gradient, header to footer. ----
   Root cause of the old lavender middle: landing-LG4.css paints the
   #lg-land.lg2 root itself - background-color #ede4fe plus a tiled
   diamond-outline image - at specificity (1,1,0), and paints the page
   body #ede4fe under html.lg-landing. The sections were transparent,
   so that root lavender showed through everywhere the hero, header
   and footer did not paint their own navy. The sky rule below uses
   #lg-land.lg2 (same specificity, and this file loads later, so it
   wins), and the body is carried into the same navy. */
html.lg-landing body { background: #0b1130; }
#lg-land.lg2 {
  background-color: #0b1130;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 36px, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(1.3px 1.3px at 132px 96px, rgba(245, 183, 0, .8) 50%, rgba(245, 183, 0, 0) 51%),
    radial-gradient(1.2px 1.2px at 76px 168px, rgba(147, 197, 253, .8) 50%, rgba(147, 197, 253, 0) 51%),
    radial-gradient(2px 2px at 198px 190px, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 51%),
    linear-gradient(180deg, #0b1130 0%, #172554 34%, #1e3a8a 62%, #172554 84%, #0b1130 100%);
  background-size: 300px 300px, 340px 340px, 380px 380px, 460px 460px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  color: #dbeafe;
}

/* Sections sit directly on the sky: the pale grown-ups background and
   the bright purple gem-cave background are gone. */
#lg-land .lg2-sec,
#lg-land .lg2-adults { background: transparent; }
#lg-land .lg2-cave { background: transparent; border-radius: 0; color: #dbeafe; }

/* The lg-v113 hero-exit fade strip dissolved into a pale section;
   under one sky there is nothing to fade into, so it is removed. */
#lg-land .lg2-hero + .lg2-sec::before { content: none; }

/* Section headings read in starlight now. */
#lg-land .lg2-sec .lg2-h2 { color: #f1f5f9; }

/* ---- Hero: calm headline. The per-letter rainbow spans carry inline
   colours, so white needs !important; the hop animation is stilled.
   "Earn Gems!" keeps a gold shine instead of the rainbow gradient. ---- */
#lg-land .lg2-hero .lg2-h1 { color: #f8fafc; }
#lg-land .lg2-hero .lg2-h1 span:not(.shine) {
  color: #f8fafc !important;
  filter: none;
  animation: none;
}
#lg-land .lg2-hero .lg2-h1 .shine {
  background: linear-gradient(90deg, #f5b700, #fde68a, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f5b700;
}

/* ---- The journey: the worlds grid becomes a winding path of islands.
   DOM order and buttons are untouched; only presentation changes. ---- */
#lg-land .lg2-worlds {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Generous storybook spacing: long stretches of the dotted path
     stay visible between islands, so its wide swing (story-lg1.js)
     reads as sweeping arcs instead of hops hidden behind the cards. */
  gap: clamp(38px, 7.5vw, 108px);
  padding: clamp(6px, 1vw, 12px) 0;
}

/* Dotted golden trail behind the islands (SVG added by story-lg1.js). */
#lg-land .lg-story-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Floating islands: the saturated colour block becomes a deep glassy
   panel lit by its world colour (kept as a border and a soft glow),
   with a gentle organic radius. The artwork and name plate are the
   card's own, unchanged. */
#lg-land .lg2-world {
  position: relative;
  z-index: 1;
  width: min(47%, 440px);
  border-radius: 36px 40px 34px 38px;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--c) 20%, #131c42) 0%,
    color-mix(in srgb, var(--d) 30%, #0b1130) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 55%, rgba(255, 255, 255, .14));
  box-shadow:
    0 26px 44px -20px rgba(2, 6, 23, .85),
    0 0 46px -10px color-mix(in srgb, var(--c) 55%, transparent);
}
#lg-land .lg2-world .pic { border-radius: 26px; }
/* Name bar: the bar the eye sees is .lbl, stretched full-width at
   the card's foot by negative margins, and landing-LG4.css paints it
   with the world's SOLID colour (its late rule: background: var(--d)).
   The lg-v115 override - a 26% tint of --c over the card's own
   --d-tinted glass - composited to a bar that still read solid and
   saturated (Music stayed bright purple). So the bar is now painted
   outright: --d blended deep into the sky navy, fully opaque, so
   every bar visibly deepens while keeping its hue identity - Music
   reads deep violet-navy - and the white name text stays readable. */
#lg-land .lg2-world .lbl {
  border-radius: 0 0 30px 30px;
  background: color-mix(in srgb, var(--d) 45%, #0b1130);
  border-top: 1px solid color-mix(in srgb, var(--d) 60%, rgba(255, 255, 255, .22));
}

/* Islands alternate along the path, each with a slight tilt. The tilt
   uses the standalone `rotate` property so the button's own press
   transform (translateY on :active) keeps working untouched. */
#lg-land .lg2-world:nth-child(odd) { align-self: flex-start; rotate: -.8deg; }
#lg-land .lg2-world:nth-child(even) { align-self: flex-end; rotate: .8deg; }

/* Gentle float - the standalone `translate` property only, so it never
   fights the button's transform or tilt. */
@media (prefers-reduced-motion: no-preference) {
  #lg-land .lg2-world { animation: lgStoryFloat 6.5s ease-in-out infinite; }
  #lg-land .lg2-world:nth-child(2) { animation-duration: 7.4s; animation-delay: -1.4s; }
  #lg-land .lg2-world:nth-child(3) { animation-duration: 6.9s; animation-delay: -2.6s; }
  #lg-land .lg2-world:nth-child(4) { animation-duration: 7.8s; animation-delay: -.8s; }
  #lg-land .lg2-world:nth-child(5) { animation-duration: 7.1s; animation-delay: -3.4s; }
  #lg-land .lg2-world:nth-child(6) { animation-duration: 6.7s; animation-delay: -2s; }
}
@keyframes lgStoryFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

/* ---- The travelling spark (lg-v123). The spark itself is two SVG
   circles (gold halo + bright core) that story-lg1.js positions from
   the path's own geometry; it lives inside the path SVG, which is
   pointer-events: none, so it can never intercept a tap. Only its
   flare hand-off needs styles here. ---- */
#lg-land .lg-spark { pointer-events: none; }

/* Island flare: story-lg1.js adds .lg-flare to a card for ~900ms as
   the spark passes its centre. A swapped island lights up three
   ways: its world-coloured glow ellipse swells and brightens, its
   picture gains a warm halo, and it lifts a touch via the standalone
   `scale` property (its bob animates `translate`, so the two never
   fight). A card still showing its framed artwork instead flares
   through its outer glow shadow. The transitions live on the base
   elements so the light swells and settles instead of snapping. */
@media (prefers-reduced-motion: no-preference) {
  #lg-land .lg2-world .lg-island { transition: filter .45s ease, scale .45s ease; }
  #lg-land .lg2-world.lg-island-on::after { transition: scale .5s ease, filter .5s ease; }
  #lg-land .lg2-world.lg-flare .lg-island {
    scale: 1.045;
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--c) 80%, transparent)) drop-shadow(0 22px 20px rgba(2, 6, 23, .45));
  }
  #lg-land .lg2-world.lg-flare.lg-island-on::after { scale: 1.3; filter: brightness(1.45); }
  #lg-land .lg2-world.lg-flare {
    box-shadow:
      0 26px 44px -20px rgba(2, 6, 23, .85),
      0 0 68px -6px color-mix(in srgb, var(--c) 78%, transparent);
  }
}

/* Narrow screens: islands stack centred on the path, spacing moderate. */
@media (max-width: 720px) {
  #lg-land .lg2-worlds { gap: 44px; }
  #lg-land .lg2-world { width: min(88%, 400px); }
  #lg-land .lg2-world:nth-child(odd),
  #lg-land .lg2-world:nth-child(even) { align-self: center; }
}

/* ---- Calm panels: gem-buddy/grade pickers and grown-ups rest on
   dark-translucent panels under the sky. Controls keep their own
   colours and behaviour; only the ground beneath them changes. ---- */
#lg-land .lg2-cave .lg2-wrap,
#lg-land .lg2-adults .lg2-wrap {
  background: linear-gradient(180deg, rgba(30, 41, 82, .66), rgba(11, 17, 48, .78));
  border: 1px solid rgba(147, 197, 253, .2);
  border-radius: 36px;
  box-shadow: 0 30px 60px -30px rgba(2, 6, 23, .8), inset 0 1px 0 rgba(219, 234, 254, .12);
  padding: clamp(26px, 4vw, 44px) clamp(16px, 3vw, 36px);
}

/* Grown-ups cards: white becomes deep glass, text goes light. */
#lg-land .lg2-card {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(191, 219, 254, .28);
  color: #e0e7ff;
  box-shadow: 0 4px 0 rgba(2, 6, 23, .4);
}
#lg-land .lg2-card span { color: #c7d2fe; }
#lg-land .lg2-card span b { color: #fff; }

/* Trust pills on the panel. */
#lg-land .lg3-trust li {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(191, 219, 254, .28);
  color: #e0e7ff;
}

/* About card on the panel. */
#lg-land .lg3-about {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(191, 219, 254, .24);
  box-shadow: 0 18px 36px -22px rgba(2, 6, 23, .8);
}
#lg-land .lg3-about h3 { color: #fff; }
#lg-land .lg3-about p { color: #dbeafe; }
#lg-land .lg3-about a { color: #fde68a; }

/* Fine print under the panel. */
#lg-land .lg2-fine { color: #a5b4fc; }
#lg-land .lg2-fine a { color: #fde68a; }

/* Reduced motion: the journey stands still. story-lg1.js never
   builds the spark under reduce; this hides it outright as well, so
   the path renders exactly as it did before lg-v123. */
@media (prefers-reduced-motion: reduce) {
  #lg-land .lg2-world { animation: none !important; }
  #lg-land .lg-spark { display: none; }
}