/* Landing page: the sky goes from golden afternoon to starry night as you scroll (--dusk 0 -> 1). */
body.landing {
  --dusk: 0;
  background: linear-gradient(180deg, #fcf5eb 0%, #f7e3c0 18%, #f2b98a 30%, #a46a9a 42%, #3c3a78 54%, #1d264d 66%, #121838 100%);
}
.sky-stars { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: var(--dusk); }
main, footer { position: relative; z-index: 1; }
.wrap { width: min(1100px, 100% - 32px); margin: 0 auto; }
.eyebrow { font-family: var(--font-title); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; color: var(--gold); margin-bottom: 0.3em; }
.lead { font-size: 1.15rem; max-width: 60ch; }
.accent { color: var(--gold); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(640px, 100svh); overflow: hidden; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #bfdcf0, #f6dcb0); z-index: -3; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 100%;
  z-index: -2; transform: translate3d(0, calc(var(--scroll, 0) * 0.22px), 0) scale(1.04); will-change: transform;
  animation: hero-in 1.6s ease-out both;
}
.hero-dusk {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(29, 38, 77, calc(var(--dusk) * 0.9)) 0%, rgba(164, 106, 154, calc(var(--dusk) * 0.55)) 55%, rgba(29, 38, 77, calc(var(--dusk) * 0.75)) 100%);
}
.hero-copy {
  position: relative; z-index: 2; padding: clamp(96px, 14vh, 150px) clamp(16px, 6vw, 80px) 0; max-width: min(700px, 56vw);
  transform: translate3d(0, calc(var(--scroll, 0) * -0.12px), 0);
}
.kicker {
  display: inline-block; font-family: var(--font-title); font-weight: 600; font-size: 0.95rem; color: var(--navy);
  background: rgba(255, 250, 242, 0.85); padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(29, 40, 73, 0.12);
  animation: rise-in 0.7s 0.2s both;
}
.hero-title {
  font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 0.95; margin: 0.25em 0 0.2em; color: var(--navy);
  text-shadow: 0 4px 0 rgba(255, 250, 242, 0.7), 0 10px 30px rgba(255, 250, 242, 0.5);
}
.hero-title .line { display: block; }
.hero-title em { font-style: normal; color: var(--red); }
.hero-title .ch { display: inline-block; animation: letter-drop 0.7s var(--ease-pop) both; animation-delay: calc(0.4s + var(--i) * 0.05s); }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-sub { font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 34ch; color: var(--navy); font-weight: 700; text-shadow: 0 2px 10px rgba(255, 250, 242, 0.9); animation: rise-in 0.7s 1.1s both; }
.hero-sub b { color: var(--red); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; animation: rise-in 0.7s 1.3s both; }
.hero-note { font-family: var(--font-hand); font-size: 1.2rem; color: var(--navy); text-shadow: 0 2px 8px rgba(255, 250, 242, 0.9); animation: rise-in 0.7s 1.5s both; }
.hero-cast {
  position: absolute; z-index: 2; right: clamp(12px, 7vw, 150px); bottom: 3%; height: min(46%, 430px);
  display: flex; align-items: flex-end; gap: 4px; transform: translate3d(0, calc(var(--scroll, 0) * 0.08px), 0);
  pointer-events: none;
}
.hero-kid { height: 100%; width: auto; transform-origin: 50% 100%; animation: kid-in 1s 0.6s var(--ease-pop) both, sway 4s 1.8s ease-in-out infinite; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.22)); }
.hero-robot {
  pointer-events: auto; border: 0; background: none; padding: 0; cursor: pointer; height: 58%; align-self: center; margin-bottom: 4%;
  animation: robot-in 1s 0.9s var(--ease-pop) both;
}
.hero-robot img { height: 100%; width: auto; animation: bob 3.2s ease-in-out infinite; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.2)); transition: transform 0.25s var(--ease-pop); }
.hero-robot:hover img { transform: rotate(-6deg) scale(1.05); }
.hero-robot.hopping img { animation: hop 0.6s var(--ease-pop) 2; }
.hero-bubble { position: absolute; right: 0; bottom: 100%; width: max-content; max-width: 250px; margin-bottom: 6px; pointer-events: auto; }
.hero-bubble::after { left: auto; right: 40px; bottom: -9px; border: 10px solid transparent; border-top-color: var(--paper); border-bottom: 0; }
.scroll-cue {
  position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%); text-decoration: none;
  font-family: var(--font-hand); font-size: 1.25rem; color: var(--cream); background: rgba(29, 40, 73, 0.6); padding: 8px 18px;
  border-radius: 999px; backdrop-filter: blur(4px); display: flex; gap: 8px; align-items: center;
}
.scroll-cue .arrow { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }

/* ---------- groove demo ---------- */
.groove-sec { padding: clamp(70px, 10vw, 120px) 0 60px; }
.groove-sec h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.groove-card {
  margin-top: 26px; background: rgba(255, 250, 242, 0.96); border-radius: 28px; padding: clamp(14px, 3vw, 26px);
  box-shadow: 0 30px 60px rgba(60, 30, 60, 0.25); display: grid; gap: 14px;
}
.groove-stage { border-radius: 20px; overflow: hidden; }
.groove-canvas { width: 100%; display: block; }
.groove-form { display: flex; gap: 10px; flex-wrap: wrap; }
.groove-form .input { flex: 1 1 260px; }
.groove-result { min-height: 3.2em; font-family: var(--font-hand); font-size: 1.35rem; }
.groove-result .verdict { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; }
.groove-result .verdict.escaped { color: var(--grass); }
.groove-result .verdict.stuck { color: #8a5a2b; }
.meter { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #8ba446, #f4c652, #bc3824); position: relative; margin: 6px 0 2px; max-width: 420px; }
.meter i { position: absolute; top: -6px; width: 6px; height: 26px; border-radius: 3px; background: var(--navy); transform: translateX(-50%); transition: left 1s var(--ease-pop); }

/* ---------- trail ---------- */
.trail-sec { padding: 80px 0 40px; color: var(--cream); }
.trail-sec h2 { color: var(--cream); font-size: clamp(2rem, 5vw, 3.2rem); }
.trail-sec .lead { color: #e6e3f5; }
.trail { position: relative; margin-top: 40px; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail-line-bg { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 16; }
.trail-line { fill: none; stroke: var(--gold-hi); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(244, 198, 82, 0.7)); }
.trail-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 5vw, 46px); position: relative; }
.stop { display: flex; align-items: center; gap: 18px; width: min(460px, 100%); opacity: 0; transform: translateY(30px) scale(0.92); transition: opacity 0.6s, transform 0.6s var(--ease-pop); }
.stop.shown { opacity: 1; transform: none; }
.stop:nth-child(even) { justify-self: end; flex-direction: row-reverse; text-align: right; }
.stop a { display: contents; text-decoration: none; color: inherit; }
.stop-thumb {
  position: relative; flex: none; width: clamp(86px, 14vw, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 5px solid var(--gold-hi); box-shadow: 0 0 0 6px rgba(244, 198, 82, 0.2), 0 14px 30px rgba(0, 0, 0, 0.35);
  background: var(--cosmic); transition: transform 0.3s var(--ease-pop);
}
.stop-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.stop:hover .stop-thumb { transform: scale(1.08) rotate(-4deg); }
.stop-num {
  position: absolute; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--gold-hi);
  font-family: var(--font-title); font-weight: 700; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  margin: -6px 0 0 -6px;
}
.stop:nth-child(even) .stop-num { margin: -6px -6px 0 0; }
.stop-world { font-family: var(--font-title); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-hi); }
.stop-title { font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--cream); }
.stop-game { font-family: var(--font-hand); font-size: 1.1rem; color: #cfd6ff; }
.stop-stars { color: var(--gold-hi); letter-spacing: 2px; }

/* ---------- how + grown-ups ---------- */
.how-sec { padding: 60px 0; }
.how-sec h2 { color: var(--cream); text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 30px; }
.how-card h3 { font-size: 1.5rem; }
.how-card p { font-size: 1.15rem; margin: 0; }
.how-icon { font-size: 2.4rem; animation: bob 3s ease-in-out infinite; }
.how-card:nth-child(2) .how-icon { animation-delay: 0.4s; }
.how-card:nth-child(3) .how-icon { animation-delay: 0.8s; }
.grownups-sec { padding: 30px 0 80px; }
.grownups { background: rgba(255, 250, 242, 0.95); border-radius: 26px; padding: clamp(20px, 4vw, 36px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.grownups ul { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
footer .fine { text-align: center; color: #b8bde0; font-size: 0.9rem; padding: 18px 16px 30px; margin: 0; background: var(--cosmic-deep); }

@keyframes hero-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; } }
@keyframes letter-drop { 0% { opacity: 0; transform: translateY(-60px) rotate(-12deg); } 70% { opacity: 1; transform: translateY(6px) rotate(3deg); } 100% { transform: none; } }
@keyframes kid-in { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes robot-in { from { opacity: 0; transform: translateY(80px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.5deg); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 860px) {
  .hero { min-height: auto; padding-bottom: 24px; }
  .hero-copy { padding-top: 92px; max-width: none; }
  .hero-cast { position: relative; right: auto; bottom: auto; height: 250px; justify-content: center; margin: 84px auto 0; transform: none; }
  .hero-bubble { right: 50%; translate: 50% 0; }
  .scroll-cue { display: none; }
  .stop, .stop:nth-child(even) { justify-self: start; flex-direction: row; text-align: left; }
  .stop:nth-child(even) .stop-num { margin: -6px 0 0 -6px; }
}