/* ==========================================================================
   HOPELESS COIN — comic book stylesheet
   Tailwind (CDN) handles layout + spacing. This file owns the "printed comic"
   look: halftone paper, ink outlines, panel gutters and the 3D stages.
   ========================================================================== */

:root {
  --ink: #17120a;
  --ink-soft: #2c2317;
  --gold: #f2a81d;
  --gold-deep: #d98705;
  --gold-light: #ffcb52;
  --cream: #fdf4de;
  --paper: #f6e8c8;
  --sky: #9fd7f5;
  --red: #e0452c;
  --panel-gap: 18px;
}

/* --------------------------------------------------------------------------
   Base + printed paper background
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;
  overflow-x: hidden;
  /* newsprint: fine halftone dots + a warm paper wash */
  background-image:
    radial-gradient(rgba(23, 18, 10, 0.09) 1px, transparent 1.2px),
    radial-gradient(rgba(217, 135, 5, 0.10) 1px, transparent 1.2px),
    linear-gradient(160deg, #fdf4de 0%, #f6e8c8 45%, #efd9ad 100%);
  background-size: 7px 7px, 7px 7px, 100% 100%;
  background-position: 0 0, 3.5px 3.5px, 0 0;
}

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

.display { font-family: "Bangers", "Impact", cursive; letter-spacing: 0.03em; }
.marker  { font-family: "Luckiest Guy", "Bangers", cursive; letter-spacing: 0.02em; }

/* Scrollbar drawn in ink */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 3px solid var(--paper);
  border-radius: 99px;
}

/* --------------------------------------------------------------------------
   Ink language — borders, hard shadows, outlined type
   -------------------------------------------------------------------------- */

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

.ink-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.ink-hover:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--ink); }
.ink-hover:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }

/* Outlined comic lettering */
.stroke-ink {
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
}
.stroke-ink-sm {
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}

/* --------------------------------------------------------------------------
   Halftone + texture overlays (applied over background photography)
   -------------------------------------------------------------------------- */

.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3; /* above background artwork, below section content (z-10) */
  pointer-events: none;
  background-image: radial-gradient(rgba(23, 18, 10, 0.55) 1.4px, transparent 1.6px);
  background-size: 6px 6px;
  opacity: 0.35;
  mix-blend-mode: multiply;
}

.halftone-lg::before { background-size: 11px 11px; opacity: 0.30; }

/* Diagonal speed-lines used on dark bands */
.speedlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.07) 0 2px,
    transparent 2px 9px
  );
}

/* Radial "action burst" rays */
.rays::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(23, 18, 10, 0.09) 0deg 4deg,
    transparent 4deg 12deg
  );
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   3D perspective stages — the site's signature move
   -------------------------------------------------------------------------- */

.stage      { perspective: 1400px; perspective-origin: 50% 45%; }
.stage-deep { perspective: 900px;  perspective-origin: 50% 50%; }

.tilt-l { transform: rotateY(9deg)  rotateX(3deg)  rotateZ(-1.5deg); transform-style: preserve-3d; }
.tilt-r { transform: rotateY(-9deg) rotateX(3deg)  rotateZ(1.5deg);  transform-style: preserve-3d; }
.tilt-flat { transform: rotateX(14deg); transform-style: preserve-3d; }

.tilt-l, .tilt-r, .tilt-flat { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tilt-l:hover, .tilt-r:hover, .tilt-flat:hover { transform: rotateY(0) rotateX(0) rotateZ(0) translateZ(30px); }

.pop-1 { transform: translateZ(40px); }
.pop-2 { transform: translateZ(80px); }
.pop-3 { transform: translateZ(120px); }

/* Hero mouse-parallax rig (values fed from JS) */
.parallax-rig {
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -7deg));
  transition: transform 0.25s ease-out;
}

/* --------------------------------------------------------------------------
   Speech balloons + caption boxes
   -------------------------------------------------------------------------- */

.balloon {
  position: relative;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 26px;
  box-shadow: 8px 8px 0 var(--ink);
}
.balloon::after,
.balloon::before {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 46px;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-top-color: var(--ink);
}
.balloon::before { bottom: -30px; }
.balloon::after { bottom: -20px; border-top-color: var(--cream); }

.balloon-right::before, .balloon-right::after { left: auto; right: 46px; }

/* Yellow narration box, top-left of a panel like a real comic caption */
.caption {
  background: var(--gold-light);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: "Bangers", cursive;
  letter-spacing: 0.05em;
}

/* Jagged "SFX" burst */
.burst {
  clip-path: polygon(
    50% 0%, 60% 16%, 78% 8%, 76% 27%, 95% 26%, 85% 41%, 100% 50%,
    85% 59%, 95% 74%, 76% 73%, 78% 92%, 60% 84%, 50% 100%, 40% 84%,
    22% 92%, 24% 73%, 5% 74%, 15% 59%, 0% 50%, 15% 41%, 5% 26%,
    24% 27%, 22% 8%, 40% 16%
  );
}

/* --------------------------------------------------------------------------
   Panel media — photos printed like comic art
   -------------------------------------------------------------------------- */

.panel-art {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.panel-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.12) saturate(1.18);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.panel-art:hover img { transform: scale(1.07); }
.panel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(23, 18, 10, 0.5) 1.2px, transparent 1.5px);
  background-size: 5px 5px;
  opacity: 0.28;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Fixed background artwork layers
   -------------------------------------------------------------------------- */

.bg-fixed-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 900px) {
  .bg-fixed-art { background-attachment: scroll; }
}

/* --------------------------------------------------------------------------
   Angled section edges (torn comic page feel)
   -------------------------------------------------------------------------- */

.edge-top    { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); }
.edge-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%); }
.edge-both   { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); }

/* --------------------------------------------------------------------------
   Ticker strip
   -------------------------------------------------------------------------- */

.ticker { display: flex; width: max-content; animation: slide 26s linear infinite; }
.ticker:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Coin + float animations
   -------------------------------------------------------------------------- */

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes bob-slow { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.bob { animation: bob 4s ease-in-out infinite; }
.bob-slow { animation: bob-slow 7s ease-in-out infinite; }
.wobble { animation: wobble 3.5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-comic {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Bangers", cursive;
  letter-spacing: 0.06em;
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn-comic:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }
.btn-comic:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }

/* Disabled state while the CA is not yet patched in */
.is-pending {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.45);
}
.is-pending:hover { transform: none; box-shadow: 7px 7px 0 var(--ink); }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .bob, .bob-slow, .wobble, .ticker, .rays::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Mobile nav sheet
   -------------------------------------------------------------------------- */

#mobileMenu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
#mobileMenu.open { max-height: 420px; }