/* ==========================================================================
   ONLYPUMP — COMIC / PERSPECTIVE STYLE SHEET
   ========================================================================== */

:root {
  --ink: #08080f;
  --ink-2: #14142b;
  --paper: #fff6e2;
  --blue: #0b84ff;
  --blue-lt: #35b6ff;
  --green: #3ed400;
  --green-lt: #8dff4a;
  --pop: #ff2e63;
  --gold: #ffd400;
  --violet: #7b3dff;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: #05050c;
  color: var(--paper);
  font-family: 'Nunito', system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}

.display { font-family: 'Bangers', cursive; letter-spacing: .04em; font-weight: 400; }
.marker  { font-family: 'Luckiest Guy', cursive; letter-spacing: .02em; font-weight: 400; }

/* ---------------------------------------------------------------- BACKDROP */
/* layered image backdrop — the art lives behind everything */
.backdrop {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(120% 80% at 15% 0%,  rgba(11,132,255,.55) 0%, transparent 55%),
    radial-gradient(110% 90% at 85% 100%, rgba(62,212,0,.42) 0%, transparent 55%),
    linear-gradient(160deg, #061033 0%, #04061a 45%, #030a12 100%);
}
.backdrop::before {
  content: ""; position: absolute; inset: -6%;
  background-image: url('4.png'), url('1.png');
  background-repeat: no-repeat, no-repeat;
  background-position: -8% 8%, 108% 92%;
  background-size: 55vw auto, 50vw auto;
  filter: blur(22px) saturate(1.3);
  opacity: .26;
  mix-blend-mode: screen;
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: .35;
}

/* speed-lines overlay */
.speedlines {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .12;
  background: repeating-conic-gradient(from 0deg at 50% 45%,
    transparent 0deg 1.6deg, rgba(255,255,255,.9) 1.6deg 1.9deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 32%, #000 92%);
          mask-image: radial-gradient(closest-side, transparent 32%, #000 92%);
}

/* grain */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- INK LOOK */
.ink { border: 4px solid #000; }
.ink-3 { border: 3px solid #000; }

.shadow-comic   { box-shadow: 8px 8px 0 #000; }
.shadow-comic-s { box-shadow: 5px 5px 0 #000; }
.shadow-comic-xl{ box-shadow: 14px 14px 0 #000; }

.stroke-ink {
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 rgba(0,0,0,.85);
}
.stroke-ink-sm {
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(0,0,0,.8);
}

.halftone {
  background-image: radial-gradient(rgba(0,0,0,.55) 1.4px, transparent 1.5px);
  background-size: 6px 6px;
}

/* text gradients */
.grad-pump {
  background: linear-gradient(180deg, #ffffff 0%, #d9f7ff 40%, var(--blue-lt) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-green {
  background: linear-gradient(180deg, #eaffd0 0%, var(--green-lt) 45%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------ PERSPECTIVE */
.stage        { perspective: 1600px; perspective-origin: 50% 45%; }
.stage-near   { perspective: 1000px; }

.tilt-l { transform: rotateY(16deg)  rotateX(3deg) rotateZ(-2deg); }
.tilt-r { transform: rotateY(-16deg) rotateX(3deg) rotateZ(2deg); }
.tilt-c { transform: rotateX(4deg) scale(1.06); }

.panel-3d {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3), box-shadow .35s ease;
  will-change: transform;
}
.panel-3d:hover { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(50px) scale(1.03); }

.tilt-flat  { transform: rotateX(6deg); }
.tilt-flat2 { transform: rotateX(7deg) rotateZ(-1deg); }

/* slanted section bands — deliberately overflow their section */
.bg-slab {
  position: absolute;
  left: -6%; right: -6%; top: -3.5rem; bottom: -3.5rem;
  transform: skewY(-2.6deg);
  border-top: 5px solid #000; border-bottom: 5px solid #000;
}
.bg-slab-r { transform: skewY(2.6deg); }

/* ---------------------------------------------------------------- BUTTONS */
.btn-comic {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  border: 4px solid #000;
  border-radius: 14px;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: .04em;
  color: #08080f;
  box-shadow: 6px 6px 0 #000;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-comic:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 #000; filter: saturate(1.15); }
.btn-comic:active{ transform: translate(4px,4px);  box-shadow: 2px 2px 0 #000; }

.btn-green { background: linear-gradient(180deg,#a5ff5e,#3ed400); }
.btn-blue  { background: linear-gradient(180deg,#6cc9ff,#0b84ff); color:#04121f; }
.btn-gold  { background: linear-gradient(180deg,#ffe86b,#ffc400); }
.btn-white { background: linear-gradient(180deg,#ffffff,#dfe6f2); }
.btn-ink   { background: linear-gradient(180deg,#25253f,#0c0c18); color: var(--paper); border-color:#000; }

/* -------------------------------------------------------------- BUBBLES */
.bubble {
  position: relative;
  background: var(--paper);
  color: #0a0a12;
  border: 4px solid #000;
  border-radius: 26px;
  padding: 1.1rem 1.4rem;
  box-shadow: 8px 8px 0 #000;
  font-weight: 800;
}
.bubble::after {
  content: ""; position: absolute; left: 38px; bottom: -26px;
  width: 0; height: 0;
  border: 14px solid transparent;
  border-top-color: #000;
  filter: drop-shadow(0 0 0 #000);
}
.bubble::before {
  content: ""; position: absolute; left: 42px; bottom: -16px; z-index: 1;
  width: 0; height: 0;
  border: 10px solid transparent;
  border-top-color: var(--paper);
}
.bubble-r::after { left: auto; right: 38px; }
.bubble-r::before{ left: auto; right: 42px; }

/* burst / starburst tag */
.burst {
  display: inline-block;
  background: var(--gold);
  color: #0a0a12;
  border: 4px solid #000;
  padding: .4rem 1rem;
  font-family: 'Luckiest Guy', cursive;
  box-shadow: 5px 5px 0 #000;
  transform: rotate(-4deg);
}

.star-burst {
  background: var(--pop);
  color: #fff;
  clip-path: polygon(50% 0%,61% 20%,83% 12%,80% 35%,100% 50%,80% 65%,83% 88%,61% 80%,50% 100%,39% 80%,17% 88%,20% 65%,0% 50%,20% 35%,17% 12%,39% 20%);
  display: grid; place-items: center;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.9));
}

/* ---------------------------------------------------------------- PANELS */
.panel {
  background: #0d1030;
  border: 5px solid #000;
  border-radius: 8px;
  box-shadow: 10px 10px 0 #000;
  overflow: hidden;
  position: relative;
}
.panel::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.14), transparent 60%);
}
.panel-img { display:block; width:100%; height:100%; object-fit: cover; }

/* ticker */
.ticker-wrap { overflow: hidden; border-top: 5px solid #000; border-bottom: 5px solid #000; }
.ticker {
  display: flex; width: max-content;
  animation: slide 28s linear infinite;
}
.ticker:hover { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker span { padding: 0 1.35rem; }

/* floaty */
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-16px) rotate(var(--rot,0deg)); } }
.floaty { animation: floaty 5.5s ease-in-out infinite; }
.floaty-slow { animation: floaty 8s ease-in-out infinite; }

@keyframes wob { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.wob { animation: wob 3.5s ease-in-out infinite; }

@keyframes pulseGlow {
  0%,100% { box-shadow: 6px 6px 0 #000, 0 0 0 rgba(62,212,0,0); }
  50%     { box-shadow: 6px 6px 0 #000, 0 0 34px rgba(62,212,0,.75); }
}
.glow-green { animation: pulseGlow 2.4s ease-in-out infinite; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(46px) scale(.97); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1.1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.in.tilt-l { transform: rotateY(16deg) rotateX(3deg) rotateZ(-2deg); }
.reveal.in.tilt-r { transform: rotateY(-16deg) rotateX(3deg) rotateZ(2deg); }
.reveal.in.tilt-c { transform: rotateX(4deg) scale(1.06); }
.reveal.in.tilt-flat  { transform: rotateX(6deg); }
.reveal.in.tilt-flat2 { transform: rotateX(7deg) rotateZ(-1deg); }

/* hover always wins over the tilt/reveal transforms above */
.panel-3d:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(50px) scale(1.03) !important;
}

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

/* chart frame */
.tv-frame {
  background: linear-gradient(180deg,#141a3d,#080a1c);
  border: 6px solid #000;
  border-radius: 22px;
  box-shadow: 14px 14px 0 #000, inset 0 0 0 4px rgba(255,255,255,.08);
  padding: 14px;
}
.tv-screen { border: 4px solid #000; border-radius: 12px; overflow: hidden; background:#0b0d1c; }

/* nav */
.nav-link {
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: .05em;
  padding: .35rem .7rem;
  border-radius: 8px;
  transition: .18s ease;
  color: var(--paper);
}
.nav-link:hover { background: var(--gold); color: #0a0a12; transform: rotate(-2deg); }

/* step connector */
.step-rail {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(to bottom, #000 0 16px, transparent 16px 30px);
  transform: translateX(-50%);
}

/* social icon tile */
.soc {
  width: 62px; height: 62px; display: grid; place-items: center;
  border: 4px solid #000; border-radius: 16px; box-shadow: 6px 6px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease;
  font-size: 26px;
}
.soc:hover { transform: translate(-3px,-3px) rotate(-6deg); box-shadow: 10px 10px 0 #000; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 140%);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
  z-index: 80;
}
#toast.show { transform: translate(-50%, 0); }

/* mobile flattening — perspective off so nothing clips */
@media (max-width: 900px) {
  .tilt-l, .tilt-r, .tilt-c, .tilt-flat, .tilt-flat2,
  .reveal.in.tilt-l, .reveal.in.tilt-r, .reveal.in.tilt-c,
  .reveal.in.tilt-flat, .reveal.in.tilt-flat2 { transform: none; }
  .bg-slab, .bg-slab-r { transform: none; left: 0; right: 0; }
  .step-rail { display: none; }
  .shadow-comic-xl { box-shadow: 8px 8px 0 #000; }
}

@media (prefers-reduced-motion: reduce) {
  .floaty, .floaty-slow, .wob, .glow-green, .ticker { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}