/* Learning Gem - welcome hero restyle (design slice 1, lg-v113).
   Visual layer only, loaded after landing-LG4.css: a deep-navy gem-sky
   backdrop for the welcome hero plus the Explorer Buddy artwork, with
   the welcome header and footer carried into the same navy family.
   No layout, copy or behavior changes; every landing control works
   exactly as before. All selectors are scoped to the landing page. */

/* Gem-sky backdrop: layered star sparkles over a navy gradient,
   with a soft violet glow behind the welcome video frame. */
#lg-land .lg2-hero {
  background-color: #172554;
  background-image:
    radial-gradient(ellipse 65% 55% at 50% 30%, rgba(124, 58, 237, .38), rgba(124, 58, 237, 0) 70%),
    radial-gradient(2px 2px at 24px 36px, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(1.6px 1.6px at 132px 96px, rgba(245, 183, 0, .95) 50%, rgba(245, 183, 0, 0) 51%),
    radial-gradient(1.4px 1.4px at 76px 168px, rgba(147, 197, 253, .9) 50%, rgba(147, 197, 253, 0) 51%),
    radial-gradient(2.2px 2.2px at 198px 190px, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(1.5px 1.5px at 268px 44px, rgba(249, 115, 82, .9) 50%, rgba(249, 115, 82, 0) 51%),
    linear-gradient(180deg, #0b1130 0%, #172554 58%, #1e3a8a 100%);
  background-size: 100% 100%, 300px 300px, 300px 300px, 300px 300px, 340px 340px, 340px 340px, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
}

/* Readability on navy: the rainbow headline letters keep their colors
   (brightened a touch), the plain headline text and the sub-copy go light. */
#lg-land .lg2-hero .lg2-h1 { color: #ede9fe; }
#lg-land .lg2-hero .lg2-h1 span:not(.shine) { filter: brightness(1.55) saturate(1.1); }
#lg-land .lg2-hero .lg2-sub { color: #c7d2fe; }

/* The framed welcome video keeps its white frame and lavender ledge,
   with a deeper sky shadow and a soft violet halo. */
#lg-land .lg2-hero .lg2-frame {
  box-shadow: 0 10px 0 #c4b5fd, 0 30px 60px -18px rgba(2, 6, 23, .75), 0 0 90px -18px rgba(124, 58, 237, .55);
}

/* Welcome header: carry the gem sky upward so the sticky bar and hero
   read as one navy scene. The wordmark stays white, and the grown-ups
   pills gain a light border for contrast while keeping their size,
   position and tap behaviour from landing-LG4.css. */
#lg-land .lg2-top {
  background-color: #0b1130;
  background-image:
    radial-gradient(ellipse 58% 135% at 50% 118%, rgba(124, 58, 237, .34), rgba(124, 58, 237, 0) 70%),
    radial-gradient(1.5px 1.5px at 22px 16px, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(1.3px 1.3px at 148px 42px, rgba(245, 183, 0, .9) 50%, rgba(245, 183, 0, 0) 51%),
    radial-gradient(1.2px 1.2px at 238px 12px, rgba(147, 197, 253, .85) 50%, rgba(147, 197, 253, 0) 51%),
    linear-gradient(180deg, #172554 0%, #0b1130 100%);
  background-size: 100% 100%, 280px 64px, 340px 64px, 300px 64px, 100% 100%;
  background-repeat: no-repeat, repeat-x, repeat-x, repeat-x, no-repeat;
  box-shadow: 0 4px 0 rgba(2, 6, 23, .32), 0 12px 26px -18px rgba(2, 6, 23, .85);
}
#lg-land .lg2-top .lg2-brand { color: #fff; text-shadow: 0 1px 12px rgba(147, 197, 253, .35); }
#lg-land .lg2-grown a {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(191, 219, 254, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
#lg-land .lg2-grown a:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(191, 219, 254, .68);
}

/* Hero exit: the following section starts under a short navy fade,
   matching the hero gradient's bottom colour and dissolving into the
   section's own pale background. Only this transition strip changes;
   the section below keeps its background and content untouched. */
#lg-land .lg2-hero + .lg2-sec { position: relative; isolation: isolate; }
#lg-land .lg2-hero + .lg2-sec::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(96px, 12vw, 148px);
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 36px 22px, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(1.3px 1.3px at 186px 54px, rgba(245, 183, 0, .7) 50%, rgba(245, 183, 0, 0) 51%),
    linear-gradient(180deg, #1e3a8a 0%, rgba(30, 58, 138, .72) 28%, rgba(23, 37, 84, .30) 58%, rgba(23, 37, 84, 0) 100%);
  background-size: 320px 148px, 380px 148px, 100% 100%;
  background-repeat: repeat-x, repeat-x, no-repeat;
}

/* Welcome footer: close the page in the same deep sky, with quiet
   star/gem sparkles made only from CSS gradients. Link text, order,
   destinations and tap size stay exactly as landing-LG4.css defines. */
#lg-land .lg2-foot {
  background-color: #0b1130;
  background-image:
    radial-gradient(ellipse 62% 155% at 50% -30%, rgba(124, 58, 237, .28), rgba(124, 58, 237, 0) 70%),
    radial-gradient(1.5px 1.5px at 28px 34px, rgba(255, 255, 255, .88) 50%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(1.8px 1.8px at 164px 92px, rgba(245, 183, 0, .82) 50%, rgba(245, 183, 0, 0) 51%),
    radial-gradient(1.3px 1.3px at 252px 142px, rgba(147, 197, 253, .85) 50%, rgba(147, 197, 253, 0) 51%),
    radial-gradient(1.2px 1.2px at 92px 168px, rgba(249, 115, 82, .75) 50%, rgba(249, 115, 82, 0) 51%),
    linear-gradient(180deg, #172554 0%, #0b1130 58%, #020617 100%);
  background-size: 100% 100%, 300px 210px, 360px 240px, 320px 220px, 380px 260px, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, no-repeat;
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(191, 219, 254, .22);
}
#lg-land .lg2-foot nav a { color: #e0e7ff; }
#lg-land .lg2-foot nav a:hover { background: rgba(147, 197, 253, .14); }
#lg-land .lg2-foot p { color: #c7d2fe; }
#lg-land .lg2-foot p a {
  color: #fde68a;
  text-decoration-color: rgba(253, 230, 138, .6);
  text-underline-offset: 3px;
}

/* Explorer Buddy: a transparent cutout (no backdrop) standing at the
   video frame's bottom-left corner - feet at about the frame's bottom
   edge, its body overlapping the corner modestly while most of the
   creature sits over the navy sky. The glow follows its silhouette
   (drop-shadow filters). Decorative only - it never intercepts taps.
   Added by hero-lg1.js. */
#lg-land .lg-hero-buddy {
  position: absolute;
  left: -30px;
  bottom: -18px;
  width: clamp(230px, 38%, 330px);
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(23, 37, 84, .45)) drop-shadow(0 0 34px rgba(124, 58, 237, .35));
}
@media (max-width: 560px) {
  #lg-land .lg-hero-buddy { left: -16px; bottom: -14px; width: 180px; }
}

/* Gentle float - transform only. */
@media (prefers-reduced-motion: no-preference) {
  #lg-land .lg-hero-buddy { animation: lgHeroFloat 5.5s ease-in-out infinite; }
}
@keyframes lgHeroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Reduced motion: nothing in the hero animates. */
@media (prefers-reduced-motion: reduce) {
  #lg-land .lg2-hero *, #lg-land .lg-hero-buddy { animation: none !important; }
}