/* ═══════════════════════════════════════
   SCRIBBLE JAM — homepage-only theme
   Scoped entirely under #page-home so every
   other page keeps the original pastel look.
   ═══════════════════════════════════════ */

#page-home {
  --jam-ink: #1f2342;
  --jam-cream: #f3ede0;
  --jam-cream-2: #ece3d0;
  --jam-blue: #a8bede;
  --jam-green: #a4c9b0;
  --jam-purple: #bfa8d8;
}

/* ── keyframes ── */
@keyframes jamMarquee { to { transform: translateX(-10%); } }
@keyframes jamFloaty { 0%, 100% { transform: translateY(0) rotate(var(--jam-rot, 0deg)); } 50% { transform: translateY(-8px) rotate(calc(var(--jam-rot, 0deg) + 6deg)); } }
@keyframes jamPopIn { 0% { transform: scale(.5) rotate(var(--jam-rot, 0deg)); opacity: 0; } 65% { transform: scale(1.06) rotate(var(--jam-rot, 0deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--jam-rot, 0deg)); opacity: 1; } }
@keyframes jamPopCta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes jamWiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* ── HERO ── */
#page-home .hero {
  background: var(--jam-cream);
  background-image: radial-gradient(rgba(31, 35, 66, .05) 1px, transparent 1px);
  background-size: 15px 15px;
  padding-top: 0;
}
#page-home .hero-bg-svg { opacity: .35; }

.site-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-direction: column;
}
.jam-marquee-wrap { display: none; }
body:has(#page-home.active) .jam-marquee-wrap {
  display: flex; align-items: center;
  overflow: hidden; background: #d8efe0;
  border-bottom: 3px solid #1f2342;
  height: 2.4rem;
}
.jam-marquee-track {
  display: flex; width: max-content;
  animation: jamMarquee 22s linear infinite;
}
.jam-marquee-track .hero-eyebrow {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: .95rem; letter-spacing: .04em; color: #1f2342;
  opacity: 1; margin: 0; padding: 0 1.75rem; white-space: nowrap;
}

#page-home .hero-wordmark { margin-top: 2rem; }
#page-home .smear { display: none; }
#page-home .hero-wordmark .word {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  color: var(--jam-ink); text-shadow: 5px 5px 0 var(--jam-purple);
  letter-spacing: -.02em;
}
#page-home .jam-doodle {
  position: absolute; color: var(--jam-ink); z-index: 3;
  animation: jamFloaty 3.2s ease-in-out infinite;
  pointer-events: none;
}
#page-home .jam-doodle-star1 { top: -.5rem; left: 12%; font-size: 1.8rem; color: var(--jam-purple); --jam-rot: -6deg; }
#page-home .jam-doodle-star2 { top: 2.5rem; right: 14%; font-size: 1.3rem; color: var(--jam-blue); --jam-rot: 10deg; animation-delay: .5s; }
#page-home .jam-doodle-arrow { bottom: -1.5rem; right: 10%; color: var(--jam-green); opacity: .9; --jam-rot: -4deg; animation-delay: 1s; }

#page-home .hero-tagline {
  font-family: 'Caveat', cursive; color: var(--jam-ink);
  opacity: .85; font-weight: 700;
}
#page-home .hero-tagline .dot { color: var(--jam-purple); }
#page-home .hero-subtagline {
  margin: -1.8rem 0 .35rem; text-align: center;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 1.1rem; opacity: .8; color: var(--jam-ink);
}
#page-home .hero-sub-sep { color: var(--jam-purple); margin: 0 .35em; }

#page-home .hero-stats { gap: 1.1rem; margin-top: 2rem; }

#page-home .founders-mission-section {
  position: relative; padding: 4rem 0; overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(191,168,216,.55), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(168,190,222,.55), transparent 45%),
    linear-gradient(135deg, #f6d9e6 0%, #e7d6f2 45%, #d3e6f2 100%);
  border-top: 3px solid var(--jam-ink); border-bottom: 3px solid var(--jam-ink);
}
#page-home .founders-mission-section .ruled-title h2 {
  color: var(--jam-ink) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
}
#page-home .founders-mission-text {
  position: relative; z-index: 1;
  max-width: 640px; margin: 1.6rem auto 0; text-align: center;
  font-size: 1.12rem; line-height: 1.75; font-weight: 600;
  color: var(--jam-ink);
}
#page-home .founders-mission-text:first-of-type { font-size: 1.3rem; font-weight: 800; }
#page-home .founders-mission-text + .founders-mission-text { margin-top: 1.15rem; }

/* founder headshots */
#page-home .founders-row {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: 3rem auto 0; max-width: 780px;
}
#page-home .founder-card {
  position: relative; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  width: clamp(150px, 24vw, 190px);
}
#page-home .founder-photo {
  width: clamp(120px, 20vw, 160px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 6px #fff, 0 12px 24px rgba(31, 35, 66, .18);
}
#page-home .founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#page-home .founder-name {
  display: block; margin-top: 1rem;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.45rem;
  color: var(--jam-ink); line-height: 1.1;
}
#page-home .founder-card figcaption { text-align: center; }
#page-home .founder-school,
#page-home .founder-class {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: .82rem; color: #4657b8; line-height: 1.5;
}
#page-home .founder-school { margin-top: .55rem; }
#page-home .hero-stat {
  background: #fff; border: 2.5px solid var(--jam-ink); border-radius: 14px;
  padding: .7rem 1.1rem; box-shadow: 4px 4px 0 var(--jam-ink);
  transform: rotate(var(--jam-rot, 0deg));
  opacity: 0; animation: jamPopIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
#page-home .hero-stat:nth-child(1) { --jam-rot: -2.5deg; animation-delay: .05s; border-color: var(--jam-blue); }
#page-home .hero-stat:nth-child(2) { --jam-rot: 2deg; animation-delay: .18s; border-color: var(--jam-purple); }
#page-home .hero-stat:nth-child(3) { --jam-rot: -1.5deg; animation-delay: .31s; border-color: var(--jam-green); }
#page-home .hero-stat:nth-child(4) { --jam-rot: 2.5deg; animation-delay: .44s; border-color: var(--jam-blue); }
#page-home .hero-stat-num { color: var(--jam-ink) !important; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
#page-home .hero-stat-label { color: var(--jam-ink); opacity: .55; }

#page-home .cta-dark,
#page-home .cta-light {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  border-radius: 999px; border: 2.5px solid var(--jam-ink);
  box-shadow: 4px 4px 0 var(--jam-ink);
  animation: jamPopCta 2.2s ease-in-out infinite;
}
#page-home .cta-dark { background: var(--jam-purple); color: var(--jam-ink); }
#page-home .cta-light { background: #fff; color: var(--jam-ink); }
#page-home .hero-ctas button:nth-of-type(2) { border-color: var(--jam-green); }
#page-home .hero-ctas button:nth-of-type(3) { border-color: var(--jam-blue); }
#page-home .cta-dark:hover,
#page-home .cta-light:hover {
  transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--jam-ink);
}

#page-home .sticker-row { position: relative; margin-top: .5rem; }
#page-home .sticker {
  background: #fff; border: 2.5px solid var(--jam-ink); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--jam-ink);
  backdrop-filter: none; opacity: 0;
  animation: jamPopIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
#page-home .sticker:nth-child(1) { --jam-rot: -8deg; animation-delay: .6s; border-color: var(--jam-blue); }
#page-home .sticker:nth-child(2) { --jam-rot: 6deg; animation-delay: .72s; border-color: var(--jam-purple); }
#page-home .sticker:nth-child(3) { --jam-rot: -5deg; animation-delay: .84s; border-color: var(--jam-green); }
#page-home .sticker:hover { transform: translateY(-5px) rotate(0) !important; }
#page-home .sticker-label { color: var(--jam-ink); opacity: 1; }

#page-home .jam-bubble {
  position: absolute; top: -2.75rem; right: 6%;
  background: #fff; border: 2.5px solid var(--jam-ink); border-radius: 14px;
  padding: .4rem .75rem; font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 1.05rem; color: var(--jam-ink);
  box-shadow: 3px 3px 0 var(--jam-ink);
  animation: jamWiggle 2.6s ease-in-out infinite;
}
#page-home .jam-bubble::after {
  content: ''; position: absolute; bottom: -9px; left: 22px;
  border: 8px solid transparent; border-top-color: var(--jam-ink); border-bottom: 0;
}

/* ── MASCOT SECTION ── */
#page-home .mascot-section {
  background: linear-gradient(165deg, var(--jam-cream-2) 0%, #d9e3f0 100%);
  border-top: 3px solid var(--jam-ink);
  border-bottom: 3px solid var(--jam-ink);
}
#page-home .mascot-section h2 { color: var(--jam-ink) !important; font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; }
#page-home .mascot-section .rule { background: var(--jam-ink); opacity: .3; }
#page-home .mascot-fact {
  background: #fff; border: 2.5px solid var(--jam-ink) !important;
  box-shadow: 4px 4px 0 var(--jam-ink);
  color: var(--jam-ink) !important;
}
#page-home .mascot-name { color: var(--jam-ink) !important; }
#page-home .mascot-role { color: var(--jam-ink); opacity: .6; }
#page-home .mascot-dot { background: rgba(31,35,66,.18); }
#page-home .mascot-dot.active { background: var(--jam-purple) !important; }
#page-home .cursor-chooser p { color: var(--jam-ink); }
#page-home .cursor-btn, #page-home .cursor-btn-off {
  background: #fff; color: var(--jam-ink) !important;
  border: 2px solid var(--jam-ink) !important; box-shadow: 3px 3px 0 var(--jam-ink);
}
#page-home .cursor-btn:hover, #page-home .cursor-btn.active {
  background: var(--jam-blue) !important; border-color: var(--jam-ink) !important;
}
#page-home .cursor-btn-off:hover { background: var(--jam-cream-2) !important; }

/* ── SEASON PLANS (timeline) ── */
#page-home .track-journey-section {
  background: var(--jam-cream);
  background-image: radial-gradient(rgba(31,35,66,.035) 1px, transparent 1px);
  background-size: 22px 22px;
  padding-block: 4.5rem;
}
#page-home .track-journey-section::before { display: none; }
#page-home .track-journey-section h2 { color: var(--jam-ink) !important; font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; }
#page-home .track-journey-section .rule { background: var(--jam-ink); opacity: .18; }

#page-home .season-path { position: relative; max-width: 720px; margin: 2.75rem auto 0; }
#page-home .season-marker {
  display: block; text-align: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; font-size: .7rem;
  color: var(--jam-ink); opacity: .5;
}
#page-home .season-start { margin-bottom: 1.4rem; }
#page-home .season-end { font-size: 1.5rem; margin-top: 1rem; opacity: 1; }

#page-home .season-stops { list-style: none; margin: 0; padding: 0; position: relative; }
#page-home .season-trail {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
#page-home .season-track-path {
  fill: none; stroke: url(#trackGradient); stroke-width: 3;
  stroke-linecap: round; stroke-dasharray: 2 9; opacity: .55;
}
#page-home .season-path.in-view .season-track-path { animation: trackFlow 4s linear infinite; }

#page-home .season-stop {
  position: relative; min-height: 190px;
  display: flex; align-items: center;
}
#page-home .season-node {
  position: absolute; top: 50%; margin-top: -22px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid rgba(31,35,66,.14);
  box-shadow: 0 6px 16px rgba(31,35,66,.12);
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem;
  color: var(--jam-ink);
}
#page-home .stop-a .season-node { left: 12%; margin-left: -22px; }
#page-home .stop-b .season-node { left: 88%; margin-left: -22px; }
#page-home .season-stop:nth-child(2) .season-node { border-color: var(--jam-blue); }
#page-home .season-stop:nth-child(3) .season-node { border-color: var(--jam-purple); }
#page-home .season-stop:nth-child(4) .season-node { border-color: var(--jam-green); }
#page-home .season-stop:nth-child(5) .season-node { border-color: var(--jam-blue); }

#page-home .season-card {
  width: 60%; z-index: 1;
  background: #fff; border: 1px solid rgba(31,35,66,.1);
  box-shadow: 0 14px 36px rgba(31,35,66,.09); border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
#page-home .stop-a .season-card { margin-left: auto; }
#page-home .stop-b .season-card { margin-right: auto; }
#page-home .season-card:hover {
  background: #fff; transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(31,35,66,.13);
}
#page-home .season-card .track-tag {
  border: 1px solid rgba(31,35,66,.12) !important;
  background: rgba(31,35,66,.04) !important;
  color: var(--jam-ink) !important; opacity: .75;
  letter-spacing: .1em; font-weight: 600;
}
#page-home .season-card .track-card-title,
#page-home .season-card .track-card-desc { color: var(--jam-ink) !important; opacity: 1; }
#page-home .season-card .track-card-title { letter-spacing: -.01em; }
#page-home .season-card .track-card-desc { opacity: .68 !important; }

@media (max-width: 760px) {
  #page-home .season-trail { display: none; }
  #page-home .season-stops {
    margin-left: 26px; padding-left: 6px;
    border-left: 3px dashed var(--jam-ink);
  }
  #page-home .season-stop {
    min-height: 0; display: block; margin: 1.4rem 0; padding-left: 42px;
  }
  #page-home .season-node,
  #page-home .stop-a .season-node,
  #page-home .stop-b .season-node {
    position: static; margin: 0 0 .8rem -62px;
    width: 46px; height: 46px; font-size: 1.15rem;
  }
  #page-home .season-card,
  #page-home .stop-a .season-card,
  #page-home .stop-b .season-card { width: 100%; margin: 0; }
}

/* ── PLAYGROUND (JS-injected between tracks and join) ── */
#page-home .playground-section {
  background: linear-gradient(165deg, var(--jam-cream-2) 0%, #dcecdf 100%);
  border-top: 3px solid var(--jam-ink);
  border-bottom: 3px solid var(--jam-ink);
}
#page-home .playground-section h2 { color: var(--jam-ink); font-family: 'Space Grotesk', sans-serif; }
#page-home .playground-hint { color: var(--jam-ink); opacity: .75; }
#page-home .playground-arena {
  border: 2.5px solid var(--jam-ink); border-style: solid;
  background: #fff; box-shadow: 4px 4px 0 var(--jam-ink);
}
#page-home .playground-btn {
  border: 2px solid var(--jam-ink); box-shadow: 3px 3px 0 var(--jam-ink);
}
#page-home .playground-btn-drop { background: var(--jam-purple); color: var(--jam-ink); }
#page-home .claw-prize-counter { color: var(--jam-ink); }
#page-home .claw-rail { background: var(--jam-ink); opacity: .5; }
#page-home .claw-rope { background: var(--jam-ink); }
#page-home .claw-prong { background: var(--jam-ink); }
#page-home .claw-chute { border-left-color: var(--jam-ink); }

/* ── JOIN SECTION ── */
#page-home .join-section {
  background: var(--jam-purple);
  border-top: 3px solid var(--jam-ink);
}
#page-home .join-sticker {
  background: #fff; border: 2.5px solid var(--jam-ink); color: var(--jam-ink);
  box-shadow: 3px 3px 0 var(--jam-ink);
}
#page-home .join-h { color: var(--jam-ink); font-family: 'Space Grotesk', sans-serif; }
#page-home .join-sub { color: var(--jam-ink); opacity: .8; }
#page-home .btn-inv {
  background: var(--jam-ink); color: #fff; border: 2.5px solid var(--jam-ink);
  box-shadow: 4px 4px 0 rgba(31,35,66,.4);
}
#page-home .btn-ghost {
  border: 2.5px solid var(--jam-ink); color: var(--jam-ink);
}

/* ── FOOTER (home only) ── */
#page-home > footer {
  background: var(--jam-cream); border-top: 3px solid var(--jam-ink);
  position: relative;
}
#page-home > footer::before {
  content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--jam-blue) 0 33.33%, var(--jam-purple) 33.33% 66.66%, var(--jam-green) 66.66% 100%);
}
#page-home > footer .footer-logo,
#page-home > footer .footer-slogan { color: var(--jam-ink); }
#page-home > footer .footer-links a { color: var(--jam-ink); }
#page-home > footer .footer-legal a,
#page-home > footer .footer-legal span { color: var(--jam-ink); }

@media (prefers-reduced-motion: reduce) {
  #page-home .jam-marquee-track,
  #page-home .jam-doodle,
  #page-home .cta-dark,
  #page-home .cta-light,
  #page-home .jam-bubble {
    animation: none !important;
  }
}
