/* ============================================
   LIAM'S PRINT-VERSE — Comic Book Aesthetic
   ============================================ */

:root {
  --bg: #0a0612;
  --bg-2: #150a24;
  --bg-3: #1f1033;
  --ink: #0a0612;
  --paper: #fff5f0;
  --magenta: #ff2d75;
  --cyan: #00e5ff;
  --yellow: #ffe93d;
  --purple: #b026ff;
  --orange: #ff7a00;
  --line: #2a1a44;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
  cursor: none;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: none; border: none; background: none; color: inherit; }

::selection { background: var(--magenta); color: var(--paper); }

/* ============================================
   DISPLAY TYPE
   ============================================ */
.display {
  font-family: 'Bangers', 'Impact', sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 400;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.01em;
}

/* ============================================
   HALFTONE PATTERN
   ============================================ */
.halftone {
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1.5px);
  background-size: 8px 8px;
}

.halftone-magenta {
  background-image: radial-gradient(circle, rgba(255, 45, 117, 0.5) 1.2px, transparent 1.6px);
  background-size: 10px 10px;
}

.halftone-cyan {
  background-image: radial-gradient(circle, rgba(0, 229, 255, 0.5) 1.2px, transparent 1.6px);
  background-size: 10px 10px;
}

/* ============================================
   CHROMATIC ABERRATION TEXT (Spiderverse glitch)
   ============================================ */
.glitch-text {
  position: relative;
  display: inline-block;
  color: var(--paper);
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.glitch-text::before {
  color: var(--magenta);
  transform: translate(-3px, -1px);
  mix-blend-mode: screen;
  animation: glitch-x 4s infinite steps(1);
}
.glitch-text::after {
  color: var(--cyan);
  transform: translate(3px, 1px);
  mix-blend-mode: screen;
  animation: glitch-y 4s infinite steps(1);
}

@keyframes glitch-x {
  0%, 90%, 100% { transform: translate(-3px, -1px); }
  92% { transform: translate(-6px, -2px); }
  94% { transform: translate(-1px, 1px); }
  96% { transform: translate(-5px, 0px); }
}
@keyframes glitch-y {
  0%, 90%, 100% { transform: translate(3px, 1px); }
  92% { transform: translate(6px, 2px); }
  94% { transform: translate(1px, -1px); }
  96% { transform: translate(5px, 0px); }
}

/* ============================================
   COMIC PANEL
   ============================================ */
.panel {
  position: relative;
  background: var(--bg-2);
  border: 3px solid var(--paper);
  box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 4px var(--paper);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panel:hover {
  transform: translate(-2px, -2px);
  box-shadow: 12px 12px 0 var(--ink), 12px 12px 0 4px var(--paper);
}
.panel-magenta {
  border-color: var(--magenta);
  box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 4px var(--magenta);
}
.panel-magenta:hover {
  box-shadow: 12px 12px 0 var(--ink), 12px 12px 0 4px var(--magenta);
}
.panel-cyan {
  border-color: var(--cyan);
  box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 4px var(--cyan);
}
.panel-cyan:hover {
  box-shadow: 12px 12px 0 var(--ink), 12px 12px 0 4px var(--cyan);
}
.panel-yellow {
  border-color: var(--yellow);
  box-shadow: 8px 8px 0 var(--ink), 8px 8px 0 4px var(--yellow);
}

/* ============================================
   ACTION LINES (radiating)
   ============================================ */
.action-lines {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, transparent 8deg,
    rgba(255, 233, 61, 0.25) 8deg, rgba(255, 233, 61, 0.25) 9deg,
    transparent 9deg, transparent 18deg,
    rgba(255, 233, 61, 0.18) 18deg, rgba(255, 233, 61, 0.18) 19deg,
    transparent 19deg, transparent 35deg,
    rgba(255, 233, 61, 0.22) 35deg, rgba(255, 233, 61, 0.22) 36deg,
    transparent 36deg, transparent 50deg,
    rgba(255, 233, 61, 0.15) 50deg, rgba(255, 233, 61, 0.15) 51deg,
    transparent 51deg
  );
  background-repeat: repeat;
  mask: radial-gradient(circle, transparent 20%, black 70%);
  -webkit-mask: radial-gradient(circle, transparent 20%, black 70%);
  animation: spin 40s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   SPEECH / BURST BUBBLES
   ============================================ */
.burst {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--ink);
  padding: 14px 28px;
  font-family: 'Bangers', sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  clip-path: polygon(
    0% 15%, 8% 0%, 18% 12%, 28% 0%, 38% 14%, 50% 0%, 62% 14%, 72% 0%, 82% 12%, 92% 0%, 100% 15%,
    92% 30%, 100% 45%, 92% 58%, 100% 72%, 92% 85%, 100% 100%,
    82% 88%, 72% 100%, 62% 88%, 50% 100%, 38% 86%, 28% 100%, 18% 86%, 8% 100%, 0% 85%,
    8% 72%, 0% 58%, 8% 45%, 0% 30%
  );
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

/* ============================================
   COMIC BUTTON
   ============================================ */
.comic-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: var(--magenta);
  color: var(--paper);
  font-family: 'Bangers', sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  border: 3px solid var(--paper);
  box-shadow: 6px 6px 0 var(--paper), 6px 6px 0 6px var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.comic-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.4), transparent 50%);
  opacity: 0;
  transition: opacity 0.2s;
}
.comic-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--paper), 8px 8px 0 6px var(--ink); }
.comic-btn:hover::after { opacity: 1; }
.comic-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--paper), 2px 2px 0 6px var(--ink); }

.comic-btn-cyan { background: var(--cyan); color: var(--ink); }
.comic-btn-yellow { background: var(--yellow); color: var(--ink); }
.comic-btn-ghost {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
  box-shadow: 6px 6px 0 var(--paper);
}

/* ============================================
   CUSTOM CURSOR (web crosshair)
   ============================================ */
.cursor-dot, .cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--magenta);
  border-radius: 50%;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  transition: width 0.18s, height 0.18s, border-color 0.18s;
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  border-color: var(--yellow);
}

/* ============================================
   SCROLL FX
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px) rotate(-1deg);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ============================================
   STICKER TILT (random rotations for panels)
   ============================================ */
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }
.tilt-l:hover { transform: rotate(-2deg) translate(-2px, -2px); }
.tilt-r:hover { transform: rotate(2deg) translate(-2px, -2px); }

/* ============================================
   STREET / CITY BACKGROUND
   ============================================ */
.city-bg {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 45, 117, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 229, 255, 0.15), transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(176, 38, 255, 0.2), transparent 60%),
    var(--bg);
}

/* SVG city silhouette as background */
.city-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================
   STAMP / NUMBER BADGE
   ============================================ */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Bangers', sans-serif;
  font-size: 22px;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--magenta);
}

/* ============================================
   FORM
   ============================================ */
.field {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  color: var(--paper);
  border: 3px solid var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus {
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 var(--cyan);
}
.field::placeholder { color: rgba(255, 245, 240, 0.4); }
textarea.field { resize: vertical; min-height: 120px; }

label.field-label {
  display: block;
  font-family: 'Bangers', sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--yellow);
  margin-bottom: 6px;
  text-transform: uppercase;
}
label.field-label .req { color: var(--magenta); }

/* ============================================
   MARQUEE
   ============================================ */
.marquee {
  display: flex;
  overflow: hidden;
  background: var(--magenta);
  color: var(--paper);
  border-top: 3px solid var(--paper);
  border-bottom: 3px solid var(--paper);
  padding: 14px 0;
}
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: 'Bangers', sans-serif;
  font-size: 28px;
  letter-spacing: 0.06em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 60px; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

section { position: relative; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
}

@media (max-width: 760px) {
  .container { padding: 0 16px; }
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
  button, a { cursor: pointer !important; }

  /* Nav: shrink + allow wrap */
  .top-nav {
    padding: 12px 16px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .top-nav .nav-links {
    display: none !important;
  }
  .top-nav .nav-cta {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  .top-nav .nav-logo {
    font-size: 22px !important;
  }

  /* Hero */
  .hero-section { padding: 90px 16px 60px !important; gap: 18px !important; }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .hero-actions { gap: 10px !important; }
  .hero-actions .comic-btn { font-size: 14px !important; padding: 10px 16px !important; }

  /* Section headings — smaller on mobile */
  section h2.display { font-size: clamp(36px, 11vw, 64px) !important; }

  /* Shop arrow buttons */
  .shop-header-row { flex-wrap: wrap; gap: 12px; }

  /* Product cards: full-width snap */
  .product-card { width: calc(100vw - 48px) !important; max-width: 320px; }

  /* Order grid + about grid stack */
  .order-grid { grid-template-columns: 1fr !important; }
  .about-grid { grid-template-columns: 1fr !important; }
  .about-photo { max-width: 320px; margin: 0 auto; }

  /* Form: side-by-side fields stack */
  .form-row { grid-template-columns: 1fr !important; }

  /* Custom (MakerWorld) banner */
  .custom-hero { flex-direction: column !important; align-items: flex-start !important; padding: 24px !important; }

  /* Footer: stack */
  .footer-row { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  /* Reduce huge headline shadow offsets on mobile */
  .glitch-text { text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--magenta) !important; }
}

@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .comic-btn { width: 100%; }
  section h2.display { font-size: clamp(32px, 13vw, 56px) !important; }
}