/* =====================================================================
   TRUMPCOIN — comic / graphic-novel theme
   Palette: ink black, silver/steel, paper white, Old-Glory red + blue,
   gold accent. Halftone dot screens + hard ink outlines + panel shadows
   + angled comic-panel dividers instead of soft waves/blurred blobs.
===================================================================== */

:root {
  --ink: #0a0a0c;
  --ink-2: #141417;
  --paper: #f3efe4;
  --silver: #cfd4d8;
  --silver-2: #8d959c;
  --old-red: #b5262e;
  --old-blue: #22345c;
  --gold: #f4c430;
  --gold-2: #ffe27a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Kalam', cursive;
  overflow-x: hidden;
}

h1, h2, h3, .display-font {
  font-family: 'Bangers', system-ui, sans-serif;
  letter-spacing: 1px;
  line-height: 1;
}

.font-body { font-family: 'Inter', sans-serif; }

/* ---------------------------------------------------------------
   Ink outline text (comic title lettering)
--------------------------------------------------------------- */
.ink-outline {
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 #000, 8px 8px 0 rgba(0,0,0,.4);
}
.ink-outline-thin {
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
}

/* ---------------------------------------------------------------
   Halftone dot screens — layered over sections/images for the
   printed-comic-book look.
--------------------------------------------------------------- */
.halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1.3px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: .18;
}
.halftone-dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,0.95) 1.4px, transparent 1.6px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
  opacity: .35;
}

/* ---------------------------------------------------------------
   Fixed full-site background artwork (background.png)
--------------------------------------------------------------- */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('../background.png');
  background-size: cover;
  background-position: center;
  filter: grayscale(15%) brightness(.55);
}
.site-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.88) 40%, rgba(10,10,12,.97) 100%);
}

/* ---------------------------------------------------------------
   Comic panel: thick ink border + offset drop shadow, like a
   physical comic frame glued onto the page.
--------------------------------------------------------------- */
.comic-panel {
  border: 4px solid #000;
  box-shadow: 10px 10px 0 #000;
  background: var(--ink-2);
  position: relative;
}
.comic-panel-light {
  border: 4px solid #000;
  box-shadow: 10px 10px 0 #000;
  background: var(--paper);
  color: #111;
}

/* Panel corner staple/bolt accents */
.comic-panel::before, .comic-panel-light::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: 14px; height: 14px;
  background: var(--gold);
  border: 3px solid #000;
  border-radius: 50%;
  z-index: 3;
}

/* ---------------------------------------------------------------
   Angled / jagged section dividers (comic panel gutters) —
   deliberately sharp, not soft waves/blobs.
--------------------------------------------------------------- */
.clip-angle-down { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); }
.clip-angle-up   { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }
.clip-jagged-top {
  clip-path: polygon(0% 6%, 6% 0%, 14% 5%, 22% 0%, 30% 6%, 38% 0%, 46% 5%, 54% 0%, 62% 6%, 70% 0%, 78% 5%, 86% 0%, 94% 6%, 100% 0%, 100% 100%, 0% 100%);
}

/* ---------------------------------------------------------------
   Comic burst / starburst shape behind headlines
--------------------------------------------------------------- */
.burst {
  position: absolute;
  width: 640px; height: 640px;
  background: conic-gradient(from 0deg, var(--gold) 0 10deg, transparent 10deg 20deg,
              var(--gold) 20deg 30deg, transparent 30deg 40deg, var(--gold) 40deg 50deg,
              transparent 50deg 60deg, var(--gold) 60deg 70deg, transparent 70deg 80deg,
              var(--gold) 80deg 90deg, transparent 90deg 100deg, var(--gold) 100deg 110deg,
              transparent 110deg 120deg, var(--gold) 120deg 130deg, transparent 130deg 140deg,
              var(--gold) 140deg 150deg, transparent 150deg 160deg, var(--gold) 160deg 170deg,
              transparent 170deg 180deg, var(--gold) 180deg 190deg, transparent 190deg 200deg,
              var(--gold) 200deg 210deg, transparent 210deg 220deg, var(--gold) 220deg 230deg,
              transparent 230deg 240deg, var(--gold) 240deg 250deg, transparent 250deg 260deg,
              var(--gold) 260deg 270deg, transparent 270deg 280deg, var(--gold) 280deg 290deg,
              transparent 290deg 300deg, var(--gold) 300deg 310deg, transparent 310deg 320deg,
              var(--gold) 320deg 330deg, transparent 330deg 340deg, var(--gold) 340deg 350deg,
              transparent 350deg 360deg);
  border-radius: 38% 62% 60% 40% / 45% 40% 60% 55%;
  opacity: .13;
  filter: blur(1px);
  z-index: 0;
}

/* ---------------------------------------------------------------
   Comic buttons — hard shadow, skewed, press-down on hover
--------------------------------------------------------------- */
.btn-comic {
  font-family: 'Bangers', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.6rem;
  border: 3px solid #000;
  border-radius: 6px;
  transform: skewX(-6deg);
  box-shadow: 6px 6px 0 #000;
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none !important;
  white-space: nowrap;
}
.btn-comic > * { transform: skewX(6deg); }
.btn-comic:hover { transform: skewX(-6deg) translate(3px, 3px); box-shadow: 3px 3px 0 #000; }
.btn-comic:active { transform: skewX(-6deg) translate(6px, 6px); box-shadow: 0 0 0 #000; }

.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1200; }
.btn-silver { background: linear-gradient(180deg, #fff, var(--silver)); color: #111; }
.btn-outline { background: transparent; color: var(--paper); border-color: var(--paper); }

/* ---------------------------------------------------------------
   Speech bubble
--------------------------------------------------------------- */
.speech-bubble {
  position: relative;
  background: var(--paper);
  color: #111;
  border: 4px solid #000;
  border-radius: 22px;
  padding: 1.1rem 1.4rem;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  left: 46px; bottom: -26px;
  width: 0; height: 0;
  border: 16px solid transparent;
  border-top-color: #000;
  border-bottom: 0;
}
.speech-bubble::before {
  content: '';
  position: absolute;
  left: 50px; bottom: -19px;
  width: 0; height: 0;
  border: 12px solid transparent;
  border-top-color: var(--paper);
  border-bottom: 0;
  z-index: 1;
}

/* ---------------------------------------------------------------
   Ticker marquee
--------------------------------------------------------------- */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 26s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------
   Nav
--------------------------------------------------------------- */
.navlink {
  font-family: 'Bangers', sans-serif;
  letter-spacing: 1px;
  font-size: 1.05rem;
  color: var(--paper);
  position: relative;
}
.navlink::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 3px; background: var(--gold);
  transition: width .18s ease;
}
.navlink:hover::after { width: 100%; }

/* ---------------------------------------------------------------
   Step number badge (how-to-buy)
--------------------------------------------------------------- */
.step-badge {
  width: 64px; height: 64px;
  background: var(--old-red);
  border: 4px solid #000;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bangers', sans-serif;
  font-size: 2rem;
  color: #fff;
  box-shadow: 5px 5px 0 #000;
  transform: rotate(-6deg);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Social icon badge
--------------------------------------------------------------- */
.social-badge {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: 5px 5px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-badge:hover { transform: translate(3px,3px) rotate(-4deg); box-shadow: 2px 2px 0 #000; }

/* ---------------------------------------------------------------
   Framed illustration (hero/about/howtobuy images)
--------------------------------------------------------------- */
.art-frame {
  border: 5px solid #000;
  box-shadow: 12px 12px 0 rgba(0,0,0,.9);
  position: relative;
  overflow: hidden;
}
.art-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------
   Join Us section — banner.png background lives ONLY here
--------------------------------------------------------------- */
#joinus {
  position: relative;
  background-image: linear-gradient(180deg, rgba(8,8,10,.55), rgba(8,8,10,.82) 55%, var(--ink) 100%), url('../banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------
   Chart frame
--------------------------------------------------------------- */
.chart-frame {
  border: 5px solid #000;
  box-shadow: 12px 12px 0 #000;
  background: #0d0d10;
}
.chart-frame iframe { width: 100%; height: 620px; border: 0; display: block; }
@media (max-width: 640px) {
  .chart-frame iframe { height: 460px; }
}

/* ---------------------------------------------------------------
   CA chip + copy button
--------------------------------------------------------------- */
.ca-chip {
  font-family: 'Space Mono', monospace;
  background: #000;
  border: 3px solid var(--silver);
  border-radius: 8px;
  padding: .55rem .9rem;
  font-size: .85rem;
  color: var(--gold-2);
  word-break: break-all;
}
.copy-btn {
  border: 3px solid #000;
  background: var(--silver);
  color: #111;
  border-radius: 8px;
  padding: .4rem .7rem;
  font-family: 'Bangers', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform .12s, box-shadow .12s;
}
.copy-btn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }
.copy-btn.copied { background: var(--gold); }

/* misc rotations for scattered comic energy */
.rot-2 { transform: rotate(-2deg); }
.rot-3 { transform: rotate(2deg); }
.rot-neg-3 { transform: rotate(-3deg); }

::selection { background: var(--gold); color: #111; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--silver-2); border: 2px solid #000; }