/* ═══════════════════════════════════════════════════════════
   base.css — SPIDER-VERSE THEME
   Global resets, variables (neon Pop-Art colors), typography,
   halftone textures, glitch mixins, and buttons.
═══════════════════════════════════════════════════════════ */

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- CSS Variables --- */
:root {
  /* Palette: Spider-Verse Pop-Art */
  --c-bg: #0f1118;
  /* Very dark blue/black */
  --c-bg-panel: #181a25;

  --c-red: #ff0040;
  /* Miles' neon red */
  --c-cyan: #00f0ff;
  /* Hologram cyan */
  --c-yellow: #fcee0a;
  /* Comic pop yellow */
  --c-magenta: #d900ff;
  /* Prowler purple/magenta */
  --c-green: #00ff73;

  --c-text: #ffffff;
  --c-text-dim: #a0aab8;
  --c-border: #ffffff;
  /* Harsh white or black borders for comic feel */
  --c-border-dark: #000000;

  /* Typography */
  /* Display: Anton (thick, pop art), Body: Montserrat */
  --ff-display: 'Anton', sans-serif;
  --ff-body: 'Montserrat', sans-serif;

  /* Spacing */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 2rem;
  --sp-xl: 4rem;
  --sp-2xl: 8rem;

  /* Structure */
  --container: 1280px;
  --radius-comic: 3px;
  /* Sharp or slightly rounded corners for panels */

  /* Transitions */
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Bouncy */
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --dur: 0.4s;
}

/* --- Base --- */
body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}

/* Full-page seamless halftone overlay */
.halftone-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  display: none;
}

a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

a:hover {
  color: var(--c-yellow);
}

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

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

ul,
ol {
  list-style: none;
}

/* --- Text Utilities --- */
.text-red {
  color: var(--c-red);
}

.text-cyan {
  color: var(--c-cyan);
}

.text-yellow {
  color: var(--c-yellow);
}

.text-magenta {
  color: var(--c-magenta);
}

/* Comic highlights (yellow marker over text) */
.highlight-yellow {
  background: var(--c-yellow);
  color: var(--c-bg);
  padding: 0 4px;
  font-weight: 800;
  display: inline-block;
  transform: rotate(-1deg);
}

/* --- Typography --- */
.comic-heading {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  text-transform: uppercase;
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--sp-sm);
  letter-spacing: 0.05em;
  /* Harsh comic drop shadow */
  text-shadow: 4px 4px 0 var(--c-red), 8px 8px 0 var(--c-border-dark);
}

.section__sub {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--sp-xl);
  max-width: 640px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background: var(--c-bg-panel);
  padding: var(--sp-sm) var(--sp-md);
  border: 3px solid var(--c-border-dark);
  box-shadow: 4px 4px 0 var(--c-cyan);
  transform: rotate(-1deg);
}

/* --- Glitch Effects (Chromatic Aberration) --- */
.glitch,
.glitch-cyan {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after,
.glitch-cyan::before,
.glitch-cyan::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Red/Cyan split */
.glitch::before {
  left: 3px;
  text-shadow: -2px 0 var(--c-red);
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch::after {
  left: -3px;
  text-shadow: -2px 0 var(--c-cyan);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

/* Magenta/Yellow split */
.glitch-cyan::before {
  left: 4px;
  text-shadow: 2px 0 var(--c-magenta);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch-cyan::after {
  left: -4px;
  text-shadow: -2px 0 var(--c-yellow);
  animation: glitch-anim-2 3.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(10px, 9999px, 44px, 0);
  }

  20% {
    clip: rect(85px, 9999px, 14px, 0);
  }

  40% {
    clip: rect(25px, 9999px, 80px, 0);
  }

  60% {
    clip: rect(98px, 9999px, 12px, 0);
  }

  80% {
    clip: rect(44px, 9999px, 99px, 0);
  }

  100% {
    clip: rect(66px, 9999px, 30px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(65px, 9999px, 100px, 0);
  }

  20% {
    clip: rect(15px, 9999px, 50px, 0);
  }

  40% {
    clip: rect(40px, 9999px, 10px, 0);
  }

  60% {
    clip: rect(80px, 9999px, 70px, 0);
  }

  80% {
    clip: rect(30px, 9999px, 20px, 0);
  }

  100% {
    clip: rect(90px, 9999px, 60px, 0);
  }
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}

.section {
  position: relative;
  padding: var(--sp-2xl) 0;
  overflow: hidden;
}

.relative {
  position: relative;
}

.z-10 {
  z-index: 10;
}

.min-h-screen {
  min-height: 100vh;
}

/* --- Shared CTA Button (Comic Box) --- */
.btn--comic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 2.5rem;
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.05em;
  color: var(--c-bg);
  background: var(--c-yellow);
  border: 4px solid var(--c-border-dark);
  text-transform: uppercase;
  text-decoration: none;
  z-index: 10;
  transition: transform var(--dur) var(--ease-pop);
}

.btn__text {
  position: relative;
  z-index: 2;
}

/* Common style for both span shadow and pseudo-element shadow */
.btn--comic::after,
.btn__shadow {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: var(--c-red);
  border: 4px solid var(--c-border-dark);
  z-index: -1;
  transition: transform var(--dur) var(--ease-pop);
}

.btn--comic:hover {
  transform: translate(-4px, -4px);
}

.btn--comic:hover::after,
.btn--comic:hover .btn__shadow {
  transform: translate(8px, 8px);
  background: var(--c-cyan);
}

/* Secondary cyan comic button */
.btn--comic-cyan {
  background: var(--c-cyan);
}

.btn--comic-cyan::after {
  background: var(--c-magenta);
}

.btn--comic-cyan:hover::after {
  background: var(--c-yellow);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--c-red);
  border: 2px solid var(--c-border-dark);
}

/* Selection */
::selection {
  background: var(--c-magenta);
  color: var(--c-text);
}

@media (max-width: 768px) {
  .section {
    padding: var(--sp-xl) 0;
  }

  .container {
    padding: 0 var(--sp-md);
  }
}

/* --- Accessibility --- */
:focus-visible {
  outline: 3px solid var(--c-cyan);
  outline-offset: 4px;
}

.btn--comic:focus-visible,
.btn--comic-cyan:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 4px;
}