/* ==========================================================
   JUMPFUN — comic / perspective stylesheet
   ========================================================== */

:root{
  --ink:#0d0d0d;
  --paper:#e6f8ec;
  --paper-2:#d3f2e0;
  --green:#3ddc61;
  --green-deep:#1fb246;
  --green-soft:#a9ecc0;
  --white:#ffffff;
  --panel-shadow: 10px 10px 0 var(--ink);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

.font-comic{ font-family:'Bangers', 'Luckiest Guy', cursive; letter-spacing:.045em; font-weight:400; }
.font-pop{ font-family:'Luckiest Guy', 'Bangers', cursive; font-weight:400; letter-spacing:.02em; }

/* ---------- BACKGROUND STACK (fixed, behind everything) ---------- */
#bg{ position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; }

.bg-base{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 78% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 10% 110%, #bff0d1 0%, rgba(191,240,209,0) 65%),
    linear-gradient(165deg, #eafbf0 0%, #dcf6e6 45%, #cdf0dc 100%);
}

/* ben-day halftone dots */
.bg-dots{
  position:absolute; inset:-10%;
  background-image:radial-gradient(var(--green-deep) 1.6px, transparent 1.7px);
  background-size:18px 18px;
  opacity:.13;
  animation:dotDrift 26s linear infinite;
}
@keyframes dotDrift{ to{ background-position:180px 180px; } }

/* comic radial speed burst */
.bg-burst{
  position:absolute; top:-30vh; left:50%; width:170vw; height:170vw;
  transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,.75) 0deg 3deg, rgba(255,255,255,0) 3deg 9deg);
  opacity:.55;
  animation:burstSpin 90s linear infinite;
}
@keyframes burstSpin{ to{ transform:translateX(-50%) rotate(360deg); } }

/* tiled mascot watermark */
.bg-mascot{
  position:absolute; inset:-5%;
  background-image:url('JUMPFUN-logo-light-green-500x500.png');
  background-size:220px 220px;
  background-repeat:repeat;
  opacity:.07;
  mix-blend-mode:multiply;
  animation:mascotDrift 40s linear infinite;
}
@keyframes mascotDrift{ to{ background-position:440px -220px; } }

/* perspective floor grid */
.bg-floor{
  position:absolute; left:-25%; right:-25%; bottom:-12%; height:62vh;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.32) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(13,13,13,.32) 2px, transparent 2px);
  background-size:90px 90px;
  transform:perspective(520px) rotateX(64deg);
  transform-origin:bottom center;
  opacity:.2;
  mask-image:linear-gradient(to top, #000 5%, transparent 88%);
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 88%);
  animation:floorRun 5.5s linear infinite;
}
@keyframes floorRun{ to{ background-position:0 90px, 0 90px; } }

/* SHINE sweep across the whole background */
.bg-shine{
  position:absolute; top:-60%; left:-60%; width:60%; height:260%;
  background:linear-gradient(105deg,
     rgba(255,255,255,0) 0%,
     rgba(255,255,255,.55) 38%,
     rgba(255,255,255,.95) 50%,
     rgba(255,255,255,.55) 62%,
     rgba(255,255,255,0) 100%);
  filter:blur(6px);
  transform:rotate(14deg);
  animation:shineSweep 7.5s ease-in-out infinite;
}
.bg-shine.two{ animation-delay:3.4s; opacity:.6; width:34%; }
@keyframes shineSweep{
  0%   { left:-60%; opacity:0; }
  12%  { opacity:.9; }
  70%  { opacity:.9; }
  100% { left:130%; opacity:0; }
}

/* soft green orbs */
.orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.orb.a{ width:420px;height:420px; background:#8fe8ad; top:8%; left:-8%; animation:float1 14s ease-in-out infinite; }
.orb.b{ width:360px;height:360px; background:#c9f5d9; bottom:6%; right:-6%; animation:float2 18s ease-in-out infinite; }
@keyframes float1{ 50%{ transform:translate(60px,40px);} }
@keyframes float2{ 50%{ transform:translate(-50px,-40px);} }

/* ---------- COMIC PRIMITIVES ---------- */
.panel{
  position:relative;
  background:var(--white);
  border:4px solid var(--ink);
  border-radius:22px;
  box-shadow:var(--panel-shadow);
}
.panel::after{ /* inner shine */
  content:''; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 58%);
  background-size:250% 100%; background-position:200% 0;
  opacity:.7; mix-blend-mode:screen;
  animation:panelShine 9s ease-in-out infinite;
}
@keyframes panelShine{ 0%,65%{background-position:200% 0;} 100%{background-position:-60% 0;} }

.panel-dots{
  background-image:radial-gradient(rgba(31,178,70,.35) 1.5px, transparent 1.6px);
  background-size:14px 14px;
}

.ink-border{ border:4px solid var(--ink); }
.hard-shadow{ box-shadow:8px 8px 0 var(--ink); }
.hard-shadow-sm{ box-shadow:5px 5px 0 var(--ink); }

/* text stroke / comic title */
.stroke-ink{
  color:var(--white);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:0 7px 0 var(--ink), 0 0 22px rgba(61,220,97,.45);
}
.stroke-green{
  color:var(--green);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:0 7px 0 var(--ink);
}

/* sticker buttons */
.btn-comic{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem;
  border:4px solid var(--ink);
  border-radius:999px;
  background:var(--green);
  color:var(--ink);
  font-family:'Luckiest Guy', cursive; font-weight:400;
  letter-spacing:.03em;
  text-decoration:none;
  box-shadow:6px 6px 0 var(--ink);
  position:relative; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn-comic:hover{ transform:translate(-2px,-3px) rotate(-1.2deg); box-shadow:9px 10px 0 var(--ink); }
.btn-comic:active{ transform:translate(4px,5px); box-shadow:1px 1px 0 var(--ink); }
.btn-comic.alt{ background:var(--white); }
.btn-comic.dark{ background:var(--ink); color:var(--green); }
.btn-comic::before{
  content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform:skewX(-18deg);
  animation:btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine{ 0%,60%{left:-120%;} 100%{left:170%;} }

/* speech bubble tail */
.bubble{ position:relative; }
.bubble::before{
  content:''; position:absolute; bottom:-22px; left:44px;
  border-width:22px 16px 0 0; border-style:solid;
  border-color:var(--ink) transparent transparent transparent;
}
.bubble::after{
  content:''; position:absolute; bottom:-14px; left:47px;
  border-width:15px 10px 0 0; border-style:solid;
  border-color:var(--white) transparent transparent transparent;
}

/* burst tag (SFX) */
.sfx{
  font-family:'Bangers', cursive;
  display:inline-block; padding:.45rem 1.1rem;
  background:var(--ink); color:var(--green);
  border-radius:8px; letter-spacing:.12em;
  box-shadow:4px 4px 0 rgba(61,220,97,.9);
}

/* ---------- 3D PERSPECTIVE SECTIONS ---------- */
.stage{ perspective:1600px; perspective-origin:50% 40%; }
.tilt{
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.25,1), opacity .7s ease;
}
.tilt-l{ transform:rotateY(9deg) rotateX(3deg) translateZ(-70px); }
.tilt-r{ transform:rotateY(-9deg) rotateX(3deg) translateZ(-70px); }
.tilt-f{ transform:rotateX(7deg) translateZ(-60px); }
.tilt:hover{ transform:rotateY(0deg) rotateX(0deg) translateZ(0); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(46px) scale(.97); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- HERO MASCOT ---------- */
.mascot{
  filter:drop-shadow(10px 14px 0 rgba(13,13,13,.85));
  animation:jump 2.4s cubic-bezier(.4,0,.3,1) infinite;
}
@keyframes jump{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  35%    { transform:translateY(-34px) rotate(4deg); }
  55%    { transform:translateY(-12px) rotate(0deg); }
}
.mascot-ring{
  position:absolute; inset:-6%;
  border:5px dashed var(--ink); border-radius:50%;
  opacity:.35; animation:ringSpin 22s linear infinite;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

/* ---------- MARQUEE ---------- */
.marquee{
  border-top:4px solid var(--ink); border-bottom:4px solid var(--ink);
  background:var(--ink); color:var(--green);
  overflow:hidden; white-space:nowrap;
  transform:rotate(-1.4deg) scale(1.03);
}
.marquee .track{ display:inline-flex; gap:2.5rem; padding:.7rem 1.25rem; animation:scrollX 22s linear infinite; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* ---------- STEPS ---------- */
.step-num{
  width:64px;height:64px; display:grid; place-items:center;
  background:var(--green); border:4px solid var(--ink); border-radius:50%;
  font-family:'Bangers',cursive; font-size:2rem; line-height:1;
  box-shadow:5px 5px 0 var(--ink);
}

/* ---------- CHART FRAME ---------- */
.chart-frame{ position:relative; background:#fff; overflow:hidden; }
.chart-frame iframe{ display:block; width:100%; height:100%; border:0; }

/* ---------- CA BAR ---------- */
.ca-box{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight:800; word-break:break-all;
}

/* ---------- JOIN BANNER ---------- */
.banner-wrap{ position:relative; overflow:hidden; border-radius:18px; }
.banner-wrap img{ display:block; width:100%; height:auto; }
.banner-wrap::after{
  content:''; position:absolute; top:-50%; left:-70%; width:45%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform:rotate(16deg);
  animation:bannerShine 5.5s ease-in-out infinite;
}
@keyframes bannerShine{ 0%,55%{ left:-70%; } 100%{ left:140%; } }

/* ---------- NAV ---------- */
.nav-link{
  position:relative; padding:.35rem .1rem; text-decoration:none; color:var(--ink);
  font-family:'Luckiest Guy',cursive; letter-spacing:.03em;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-3px; height:4px; width:0;
  background:var(--green); border-radius:4px; transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

/* social pill */
.soc{
  width:58px;height:58px; display:grid; place-items:center;
  border:4px solid var(--ink); border-radius:16px; background:#fff;
  box-shadow:5px 5px 0 var(--ink); font-size:1.5rem; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
  text-decoration:none;
}
.soc:hover{ background:var(--green); transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:var(--green-deep); border:3px solid var(--paper-2); border-radius:10px; }

@media (max-width:768px){
  :root{ --panel-shadow:7px 7px 0 var(--ink); }
  .tilt-l,.tilt-r,.tilt-f{ transform:none; }
  .bg-mascot{ background-size:150px 150px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}