/* ============================================================
   CHORD RUNNER — Landing page scenery backdrop
   ------------------------------------------------------------
   Loaded ONLY by templates/cr/index.html, so the game menu, the
   dashboard and the SEO pages keep the plain dark background.

   Paints the game world behind the page: a golden-hour sky with
   drifting clouds and a low sun, over the same sea / beach /
   rolling hills the runner scrolls through in game
   (static/cr/images/landing-scenery.svg).

   Everything here is fixed and pointer-events:none, so scrolling
   never repaints the scene and no layer can swallow a click.
   ============================================================ */

:root {
  /* Height of the land band, measured from the bottom of the viewport.
     The sky gradient ends where the SVG's sea begins. */
  --lp-land-h: 36vh;
}

/* The demo stylesheet paints its own faint radial wash on body::before.
   The scene replaces it, so switch it off to keep the colours clean. */
body.lp::before {
  display: none !important;
}

body.lp {
  background: #0b1024;
}

.lp-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Composited once and left alone — the layers below only animate
     transform/opacity, so scrolling stays cheap. */
  contain: strict;
}

/* ── Sky ─────────────────────────────────────────────────────
   Dark enough at the top for the fixed navbar and the hero
   headline to stay legible, warming towards the horizon. */
.lp-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #050916 0%,
    #0a1230 12%,
    #101c48 24%,
    #17275e 34%,
    #1f3573 43%,
    #2a4585 50%,
    #365593 55%,
    #44669f 59%,
    #5478aa 62%,
    #6a8db8 64.5%,
    #7fa0c4 68%,
    #93b2d0 100%
  );
}

/* ── Stars, in the dark upper third ──────────────────────────── */
.lp-stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 9%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 26%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 57% 13%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 68% 30%, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 79% 8%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 6% 34%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 34% 40%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 44%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 91% 38%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 20% 50%, rgba(255, 255, 255, 0.35) 50%, transparent 51%);
  /* Fade the field out before it reaches the warm part of the sky. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  animation: lp-twinkle 7s ease-in-out infinite alternate;
}

@keyframes lp-twinkle {
  from { opacity: 0.45; }
  to   { opacity: 0.95; }
}

/* ── Low sun, just above the waterline ───────────────────────── */
.lp-sun {
  position: absolute;
  left: 78%;
  bottom: calc(var(--lp-land-h) - 2vh);
  width: 26vh;
  height: 26vh;
  margin-left: -13vh;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(226, 240, 252, 0.55) 0%,
      rgba(196, 218, 240, 0.36) 16%,
      rgba(160, 192, 224, 0.2) 34%,
      rgba(140, 174, 212, 0.1) 52%,
      rgba(130, 166, 208, 0.04) 70%,
      transparent 78%);
  animation: lp-sun-breathe 11s ease-in-out infinite alternate;
}

@keyframes lp-sun-breathe {
  from { transform: scale(1);    opacity: 0.55; }
  to   { transform: scale(1.06); opacity: 0.75; }
}

/* ── Clouds ──────────────────────────────────────────────────
   Two bands drifting at different speeds. Each band is twice the
   viewport wide and shifts by exactly half its width, so the loop
   is seamless. */
.lp-clouds {
  position: absolute;
  left: 0;
  width: 200%;
  height: 30vh;
  background-repeat: no-repeat;
  will-change: transform;
}

.lp-clouds-far {
  top: 13%;
  opacity: 0.42;
  background-image:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.6), transparent 100%);
  background-size: 22% 34%, 15% 24%, 19% 30%, 13% 20%;
  background-position: 4% 30%, 22% 62%, 33% 12%, 46% 48%;
  animation: lp-drift 150s linear infinite;
}

.lp-clouds-near {
  top: 31%;
  opacity: 0.5;
  background-image:
    radial-gradient(closest-side, rgba(206, 226, 245, 0.9), transparent 100%),
    radial-gradient(closest-side, rgba(188, 212, 236, 0.75), transparent 100%),
    radial-gradient(closest-side, rgba(216, 233, 248, 0.85), transparent 100%);
  background-size: 28% 30%, 20% 22%, 24% 26%;
  background-position: 10% 55%, 30% 20%, 44% 70%;
  animation: lp-drift 95s linear infinite;
}

@keyframes lp-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── A balloon, like the ones floating over the game world ───── */
.lp-balloon {
  position: absolute;
  left: 13%;
  top: 23%;
  width: 4.4vh;
  height: 6.4vh;
  border-radius: 50% 50% 42% 42%;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.22) 0%, transparent 38%),
    repeating-linear-gradient(90deg,
      #7f9fd6 0 22%, #a9c4e6 22% 44%, #8f86d8 44% 66%, #6f8fc8 66% 88%, #7f9fd6 88% 100%);
  opacity: 0.7;
  animation: lp-float 16s ease-in-out infinite alternate;
}

.lp-balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.1vh;
  width: 1.1vh;
  height: 0.8vh;
  margin-left: -0.55vh;
  border-radius: 2px;
  background: #5b3a1e;
}

@keyframes lp-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(6vw, -3vh, 0); }
}

/* ── Sea, beach, hills, dirt path ────────────────────────────── */
.lp-land {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--lp-land-h);
  background-image: url('../images/landing-scenery.svg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Knocked back so the daylight greens sit behind the page's
     light-on-dark text instead of competing with it. */
  filter: saturate(0.92) brightness(0.82);
}

/* Soft join between the warm sky and the top of the sea. */
.lp-land::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -5vh;
  height: 5vh;
  background: linear-gradient(180deg, rgba(190, 216, 240, 0), rgba(182, 208, 234, 0.26));
}

/* ── Readability scrim ───────────────────────────────────────
   Sits over the whole scene. Heaviest at the top and bottom,
   lightest across the horizon so the sunset still reads. */
.lp-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 9, 22, 0.6) 0%,
    rgba(6, 9, 22, 0.42) 28%,
    rgba(10, 12, 30, 0.26) 52%,
    rgba(14, 10, 26, 0.2) 66%,
    rgba(8, 14, 26, 0.24) 80%,
    rgba(6, 10, 18, 0.38) 100%
  );
}

/* The scene sits behind the page content on its own negative layer.
   Do NOT lift the page's own children with z-index to achieve this:
   that gives <nav> a stacking context of its own, which traps the
   mobile menu's z-index: 9998 inside it and lets the sections that
   follow in the DOM paint straight over the open menu. */

/* The hero sits directly on the sky, so its own dark wash would
   flatten the sunset. */
body.lp #hero {
  background: transparent;
}

/* ── Motion / small screens ──────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --lp-land-h: 26vh;
  }

  /* Fewer moving layers on phones — the scene still reads without them. */
  .lp-clouds-far,
  .lp-balloon {
    display: none;
  }

  .lp-clouds-near {
    animation-duration: 140s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-stars,
  .lp-sun,
  .lp-clouds,
  .lp-balloon {
    animation: none;
  }
}

/* ============================================================
   PAGE SURFACES OVER THE SCENERY
   ------------------------------------------------------------
   demo.css builds its cards from very low-alpha whites, which
   worked over a flat near-black page. With the scene behind
   them the hills and sea showed straight through, so every card
   on the landing page gets an opaque base underneath its
   original tint. The tints and borders are unchanged.
   ============================================================ */

body.lp .pricing-free,
body.lp .step-card,
body.lp .faq-item,
body.lp .demo-scope,
body.lp .about-container,
body.lp .contact-card {
  background: rgba(14, 18, 36, 0.9);
}

body.lp .fv-card,
body.lp .mp-feat-card {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(14, 18, 36, 0.9);
}

body.lp .pricing-monthly {
  background:
    linear-gradient(160deg, rgba(162, 155, 254, 0.16) 0%, rgba(108, 92, 231, 0.08) 100%),
    rgba(13, 16, 38, 0.93);
}

body.lp .pricing-premium {
  background:
    linear-gradient(160deg, rgba(255, 209, 102, 0.1) 0%, rgba(255, 149, 0, 0.05) 100%),
    rgba(18, 16, 34, 0.93);
}

body.lp .midi-callout {
  background:
    linear-gradient(135deg, rgba(162, 155, 254, 0.1), rgba(6, 214, 160, 0.07)),
    rgba(14, 18, 36, 0.88);
}

body.lp .affiliate-card {
  background:
    linear-gradient(160deg, rgba(6, 214, 160, 0.09) 0%, rgba(162, 155, 254, 0.06) 100%),
    rgba(14, 18, 36, 0.9);
}

body.lp .demo-feat {
  background:
    linear-gradient(0deg, rgba(6, 214, 160, 0.08), rgba(6, 214, 160, 0.08)),
    rgba(14, 18, 36, 0.85);
}

body.lp footer {
  background: rgba(6, 9, 20, 0.82);
}

/* Hover states rebuild the background from scratch, so they need the
   same opaque base or the card turns see-through on hover. */
body.lp .step-card:hover,
body.lp .fv-card:hover {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    rgba(18, 22, 42, 0.92);
}

body.lp .faq-q:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Hero framing ────────────────────────────────────────────
   The hero now carries the three plan panels as well, so its
   centred layout pushed the headline far down the viewport.
   Anchor the content to the top instead. */
body.lp #hero {
  justify-content: flex-start;
  padding-top: 96px;
  padding-bottom: 56px;
}

/* ── Countdown inside the lifetime plan ──────────────────────
   Replaces the rotated badge that used to hang off the removed
   "Get the full game here" button. */
.pricing-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.26), rgba(255, 71, 87, 0.2));
  border: 1px solid rgba(255, 122, 122, 0.6);
  box-shadow: 0 6px 18px rgba(255, 71, 87, 0.18);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  /* line-height:1 makes Outfit's glyphs sit low in their line box (the
     half-leading goes negative), which left a gap above the text even
     though the flex row was centred. Let the line box breathe instead. */
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.pricing-timer strong {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
}

@media (max-width: 480px) {
  .pricing-timer {
    font-size: 0.72rem;
    padding: 8px 10px;
  }
}

/* The subtitle names the headline features; lift them out of the muted
   body colour so they read at a glance. */
body.lp .hero-subtitle {
  max-width: 660px;
  /* --muted is 45% white, which vanished against the sunset band and the
     hills. Near-solid white plus a shadow keeps it readable wherever the
     scene happens to sit behind it. */
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Same problem for the smaller supporting copy further down the page. */
body.lp .section-sub,
body.lp .demo-note,
body.lp .fv-sub,
body.lp .fv-cta p {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.lp .hero-title,
body.lp .section-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* The gradient-filled second line is painted through the text itself, so a
   text-shadow would sit on top of the clip. Shadow the block instead. */
body.lp .hero-title .line2 {
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

body.lp .hero-subtitle strong {
  color: var(--text);
  font-weight: 800;
}

/* ── Chord type pills ────────────────────────────────────────
   Built from a 3% white fill and 35% white text, which the sea
   and the sunset showed straight through. Opaque base, and the
   locked labels lifted enough to actually read as text. */
body.lp .chord-pill.locked {
  background: rgba(16, 20, 38, 0.88);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
}

body.lp .chord-pill.locked .lock-icon {
  opacity: 0.85;
}

body.lp .chord-pill.demo {
  background:
    linear-gradient(0deg, rgba(6, 214, 160, 0.16), rgba(6, 214, 160, 0.16)),
    rgba(12, 22, 32, 0.9);
  border-color: rgba(6, 214, 160, 0.55);
}

/* ── Live match scoreboard ───────────────────────────────────
   Same story as the cards: the board is a stack of 4-7% tints
   with no opaque base, so the sea and the hills read straight
   through the rows. Keep the tints, add a base under them. */
body.lp .mp-board {
  background:
    linear-gradient(160deg,
      rgba(162, 155, 254, 0.1) 0%,
      rgba(6, 214, 160, 0.06) 55%,
      rgba(255, 209, 102, 0.06) 100%),
    rgba(12, 16, 34, 0.94);
  border-color: rgba(162, 155, 254, 0.32);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

body.lp .mp-board-footer {
  background: rgba(0, 0, 0, 0.3);
}

/* The locked "You (Demo)" row is deliberately dimmed (0.45 + grayscale).
   That reads as invisible over the scene, so lift it just enough to stay
   legible while still looking locked. */
body.lp .mp-sb-locked {
  opacity: 0.72;
}

/* ── Piano decoration ────────────────────────────────────────
   Now the only thing under the plan panels, so it carries that
   space on its own: bigger keys, and less see-through. */
body.lp .piano-deco {
  gap: 9px;
  margin-top: 44px;
  opacity: 0.6;
}

body.lp .piano-deco .key-w {
  width: 52px;
  height: 146px;
  border-radius: 0 0 12px 12px;
}

body.lp .piano-deco .key-b {
  width: 32px;
  height: 92px;
  margin: 0 -16px;
  border-radius: 0 0 8px 8px;
}

@media (max-width: 768px) {
  body.lp .piano-deco {
    gap: 6px;
    margin-top: 32px;
  }

  body.lp .piano-deco .key-w {
    width: 34px;
    height: 96px;
  }

  body.lp .piano-deco .key-b {
    width: 21px;
    height: 60px;
    margin: 0 -10px;
  }
}

/* ── Hero demo button ────────────────────────────────────────
   The stock purple sat too close to the blue sky behind it and
   read as a flat panel. Brighter fill, a light rim to cut it out
   from the sky, and a wider hit area. */
body.lp #hero .btn-demo {
  padding: 22px 68px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  border-radius: 22px;
  background: linear-gradient(135deg, #b9a7ff 0%, #8b7bff 45%, #6c5ce7 100%);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  text-shadow: 0 1px 3px rgba(40, 20, 90, 0.5);
  box-shadow:
    0 0 0 6px rgba(139, 123, 255, 0.16),
    0 14px 40px rgba(108, 92, 231, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.35) inset;
  animation: fadeDown 0.7s 0.3s ease both, lp-demo-pulse 2.8s 1.2s ease-in-out infinite;
}

body.lp #hero .btn-demo:hover {
  background: linear-gradient(135deg, #c8b9ff 0%, #9a8bff 45%, #7b6ce8 100%);
  box-shadow:
    0 0 0 8px rgba(139, 123, 255, 0.22),
    0 18px 48px rgba(108, 92, 231, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.4) inset;
}

body.lp #hero .btn-demo .btn-icon {
  font-size: 1.35rem;
}

/* Breathing glow, so the eye lands on it before the plan panels. */
@keyframes lp-demo-pulse {
  0%, 100% { box-shadow:
    0 0 0 6px rgba(139, 123, 255, 0.16),
    0 14px 40px rgba(108, 92, 231, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.35) inset; }
  50% { box-shadow:
    0 0 0 12px rgba(139, 123, 255, 0.08),
    0 16px 46px rgba(108, 92, 231, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.35) inset; }
}

@media (max-width: 768px) {
  body.lp #hero .btn-demo {
    padding: 18px 40px;
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.lp #hero .btn-demo {
    animation: fadeDown 0.7s 0.3s ease both;
  }
}