body { overflow-x: hidden; }

/* The full-bleed ocean background is now the shared site-wide rule in
   squiddlr.css (body) — identical scrim/image on every page including this
   splash — so there is no longer a splash-specific background override here.
   Being `fixed` + `cover`, one continuous image sits behind the hero, the
   marketing copy, and the footer with no seam, even when the page is taller
   than one viewport. */

/* main grows via the shared sticky-footer rule (shell.css: body > main) so
   the footer pins to the bottom; make it a column so #splash can fill it.
   Override the global main{max-width:1280px;padding:24px;margin:auto} cap so
   the ocean hero is full-bleed edge to edge. */
#main-content {
  display: flex; flex-direction: column;
  max-width: none; width: 100%; margin: 0; padding: 0;
}

/* The top navbar (the rounded-pill bar with the mascot + section buttons)
   is now the shared .shell-topnav style in shell.css — one source of truth
   used by both this splash (hand-written markup, same classes) and every
   renderShell() page. No splash-specific nav CSS lives here anymore. */

/* ---------------------------------------------------------------------
   Ocean hero — full-bleed underwater background, mascot centered in the
   lower-middle, taglines scattered around it, brand lockup at the bottom.
   --------------------------------------------------------------------- */
#splash {
  flex: 1 0 auto;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 40px 24px 48px; text-align: center;
  /* Transparent: the continuous fixed ocean on body.splash-page shows through,
     so the hero and the marketing section share one unbroken background. */
  background: none;
  overflow: hidden; /* keep drifting taglines from spilling a scrollbar */
}

#splash .mascot-wrap { position: relative; z-index: 1; margin-bottom: 4px; }
#splash .mascot {
  height: 300px; max-height: 46vh; width: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45));
  animation: bob 4.5s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* Permanent brand lockup */
#splash .brand-lockup { position: relative; z-index: 1; }
#splash .brand-lockup h1 {
  font-family: var(--f-script); font-weight: 400; font-size: 4.4em; color: var(--teal-400);
  margin: 0; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65);
}
#splash .brand-lockup .tagline {
  font-family: var(--f-display); font-weight: 600; font-size: 1.35em; color: var(--fog-100);
  margin: 2px 0 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------------------------------------
   Floating taglines. Each lane element drifts across the hero like a bubble
   (@keyframes bubble-float), JS swapping in a fresh tagline on every loop.
   Font matches the permanent subtitle exactly — the normal site display font
   (var(--f-display), weight 600, 1.35em), NOT the decorative script face. A
   soft rounded scrim keeps the moving text legible over the ocean.
   --------------------------------------------------------------------- */
#splash .float-tagline {
  position: absolute; z-index: 1;
  max-width: 38vw; text-align: center; pointer-events: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1.35em; line-height: 1.25;
  color: var(--fog-100);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6);
  padding: 10px 18px; border-radius: 16px;
  background: rgba(10, 18, 32, 0.42); backdrop-filter: blur(4px);
  border: 1px solid rgba(79, 209, 197, 0.45);
  opacity: 0; will-change: transform, opacity;
  animation-name: bubble-float; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Lanes live only in the clear side gutters. The centered mascot spans ~42%-58%
   horizontally and most of the hero height, with the brand lockup centered
   below it, so those columns are the only zones clear top-to-bottom. Left gutter:
   left:2vw + max-width:38vw => right edge ~40% (clears the mascot's 42% left
   edge). Right gutter: right:2vw => left edge ~60% (clears the mascot's 58%
   right edge). The float only sways +/-8px horizontally, so the full text stays
   on-screen and never crosses the mascot at any point in the loop. Staggered
   timings + negative delays keep all three visible and readable, never too fast. */
#splash .float-tagline.lane-1 { left: 2vw;            top: 20%; animation-duration: 15s; animation-delay: 0s; }
#splash .float-tagline.lane-2 { right: 2vw; left: auto; top: 28%; animation-duration: 18s; animation-delay: -7s; }
#splash .float-tagline.lane-3 { left: 2vw;            top: 58%; animation-duration: 16s; animation-delay: -11s; }

/* Long items (the two former marketing paragraphs) share the exact same bubble
   look and rising-drift motion as the short taglines — just adapted for length.
   They fill the full gutter width (short taglines rarely do, so these read as
   the "wide" bubbles), drop a step in font-size while keeping the same display
   family/weight, and slow their lane right down so the extra copy stays easily
   readable as it drifts. max-width is unchanged at 38vw, so the right edge still
   lands ~40% and clears the mascot's 42% left / 58% right edges at every point
   of the sway, exactly like the short taglines. Placed after the lane rules so
   the slower duration overrides each lane's own (equal specificity, later wins). */
#splash .float-tagline.is-long {
  font-size: 1.05em; line-height: 1.4;
  padding: 12px 20px;
  animation-duration: 26s;
}

/* Rising-bubble drift: floats up with a gentle horizontal sway, fading in near
   the bottom of its path and out near the top. Horizontal travel is tiny (+/-8px)
   so it never leaves its gutter. */
@keyframes bubble-float {
  0%   { transform: translate(0, 48px)   scale(0.92); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(8px, -4px) scale(1); }
  85%  { opacity: 1; }
  100% { transform: translate(-6px, -56px) scale(0.96); opacity: 0; }
}

/* Respect reduced-motion: stop the drift and show the taglines static in place
   (already positioned in the clear side gutters). */
@media (prefers-reduced-motion: reduce) {
  #splash .float-tagline { animation: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   Marketing CTA — sits just under the ocean hero on the deep-ink background.
   The descriptive paragraphs now float in the hero bubble pool, so all that
   remains here is the script CTA heading plus two pill links mirroring the
   navbar's Course Builder + Content Studio destinations. Top padding is kept
   small so this reads as the hero's natural next beat, not a stranded section
   far down a sparse page.
   --------------------------------------------------------------------- */
#pitch {
  flex: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 22px; padding: 20px 24px 56px;
  /* No solid block — the continuous ocean shows through; copy sits on the
     image with text-shadows carrying legibility. */
  background: none;
}
#pitch .pitch-cta {
  margin: 0;
  font-family: var(--f-script); font-weight: 400; font-size: 2.6em; color: var(--teal-400);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
#pitch .pitch-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
#pitch .pitch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; border-radius: 999px;
  background: linear-gradient(180deg, var(--teal-700), var(--teal-500));
  color: #06281c; text-decoration: none;
  font-family: var(--f-display); font-size: 1.05em; font-weight: 700;
  border: 1px solid var(--teal-400); box-shadow: var(--shadow);
  transition: transform var(--transition), filter var(--transition);
}
#pitch .pitch-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

@media (max-width: 860px) {
  #splash .mascot { height: 220px; }
  #splash .brand-lockup h1 { font-size: 3.2em; }
  /* Narrow screens have no real side gutters, so stack the taglines statically
     near the top of the hero, above the bottom-anchored mascot, spanning the
     width with centered text. */
  #splash .float-tagline {
    animation: none; opacity: 1; transform: none;
    left: 6vw; right: 6vw; max-width: none;
    font-size: 1.05em; padding: 8px 14px;
  }
  #splash .float-tagline.lane-1 { top: 2%; }
  #splash .float-tagline.lane-2 { top: 11%; }
  #splash .float-tagline.lane-3 { top: 20%; }
}