/* ============================================
   BOOM SKATEPARK — Design tokens
   Bold & loud, neon/electric, high contrast.
   ============================================ */

:root {
  /* CORE PALETTE */
  --ink:        #0a0a0c;   /* near-black, primary surface */
  --ink-2:      #161618;   /* card surface */
  --ink-3:      #1f1f22;   /* elevated surface */
  --concrete:   #2a2a2e;   /* line / hairline */
  --bone:       #f5f1e8;   /* warm off-white, paper */
  --paper:      #ffffff;   /* pure white, used in logo outlines */

  /* BRAND */
  --boom-red:     #E62538;  /* primary, OG pillar-box red */
  --boom-blue:    #1F3DD6;  /* secondary, OG cobalt blue */
  --boom-orange:  #E62538;  /* alias → red (legacy token) */
  --boom-yellow:  #1F3DD6;  /* alias → blue (legacy token) */
  --boom-cherry:  #ff8a00;  /* warm pop (sparingly) */
  --boom-acid:    #c6ff00;  /* electric green pop (sparingly) */

  /* TEXT */
  --text:       #f5f1e8;
  --text-dim:   #a8a39a;
  --text-mute:  #6f6c66;

  /* TYPE */
  --font-mono:  "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  --font-display: "Archivo Black", "Bowlby One", system-ui, sans-serif;

  /* RADII */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;

  /* SHADOWS */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px -10px rgba(0,0,0,0.6);
}

/* Hazard-stripe utility background (red + black diagonal) */
.hazard-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--boom-blue) 0 18px,
    var(--ink) 18px 36px
  );
}
.hazard-stripe-orange {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--boom-red) 0 18px,
    var(--ink) 18px 36px
  );
}

/* Halftone / dot grid */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Noise + grain */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* ============================================
   ANIMATIONS — for scrolling marquees, lifts,
   and the "speed cut" hover treatments.
   ============================================ */

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.marquee-track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee-left 40s linear infinite;
  will-change: transform;
}
.marquee-track.reverse { animation-name: marquee-right; }
.marquee-track.fast    { animation-duration: 24s; }
.marquee-track.slow    { animation-duration: 60s; }

/* Tape-strip — fake gaffer-tape corner accent on photos/cards */
.tape {
  position: absolute;
  width: 96px;
  height: 22px;
  background: rgba(245, 241, 232, 0.92);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  opacity: 0.94;
}

/* Card lift on hover */
.lift {
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms;
}
.lift:hover {
  transform: translateY(-4px) rotate(-0.4deg);
}

/* Duotone treatment for photos — red + blue cyanotype-ish */
.duotone-red    { filter: grayscale(1) sepia(1) hue-rotate(-30deg) saturate(5) contrast(1.05); }
.duotone-blue   { filter: grayscale(1) sepia(1) hue-rotate(190deg) saturate(4) contrast(1.05); }
.duotone-night  { filter: grayscale(0.6) contrast(1.15) saturate(1.1) brightness(0.92); }

/* Sticker — paper sticker treatment with peel shadow */
.sticker {
  filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.4)) drop-shadow(-2px -2px 0 rgba(0,0,0,0.15));
}

/* ============================================
   CRT / VHS DISTORTION — for the broken TV
   ============================================ */

/* Scanlines — dark horizontal lines */
.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.32) 0,
    rgba(0,0,0,0.32) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 4;
  mix-blend-mode: multiply;
  animation: scanline-drift 8s linear infinite;
}

@keyframes scanline-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 6px; }
}

/* Phosphor RGB mask — vertical aperture-grille stripes */
.crt-phosphor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.06) 0,
    rgba(255, 0, 0, 0.06) 1px,
    rgba(0, 255, 0, 0.06) 1px,
    rgba(0, 255, 0, 0.06) 2px,
    rgba(0, 0, 255, 0.06) 2px,
    rgba(0, 0, 255, 0.06) 3px
  );
  z-index: 3;
  mix-blend-mode: screen;
}

/* Static noise — animated SVG fractal */
.crt-static {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 5;
  animation: static-shift 0.18s steps(3) infinite;
}

@keyframes static-shift {
  0%   { transform: translate(0, 0) scale(1.02); }
  25%  { transform: translate(-2%, 1%) scale(1.03); }
  50%  { transform: translate(1%, -1.5%) scale(1.02); }
  75%  { transform: translate(-1%, 2%) scale(1.04); }
  100% { transform: translate(0.5%, -0.5%) scale(1.02); }
}

/* Slow tracking band — drifts top→bottom every few seconds */
.crt-tracking {
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,255,255,0.05) 30%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.05) 70%,
    transparent 100%
  );
  z-index: 6;
  mix-blend-mode: screen;
  animation: tracking-drift 7s linear infinite;
}

@keyframes tracking-drift {
  0%   { top: -10%; opacity: 0.4; }
  60%  { opacity: 1; }
  100% { top: 110%; opacity: 0.4; }
}

/* Fast jitter glitch bar */
.crt-glitch-bar {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  pointer-events: none;
  background: rgba(255, 64, 90, 0.55);
  box-shadow: 0 0 8px rgba(255,64,90,0.6);
  z-index: 7;
  mix-blend-mode: screen;
  animation: glitch-bar 3.3s steps(60) infinite;
}

@keyframes glitch-bar {
  0%   { top: 12%; opacity: 0; }
  10%  { top: 24%; opacity: 0.9; }
  12%  { top: 26%; opacity: 0; }
  40%  { top: 60%; opacity: 0.8; }
  43%  { top: 62%; opacity: 0; }
  70%  { top: 80%; opacity: 0.7; }
  74%  { top: 82%; opacity: 0; }
  100% { top: 95%; opacity: 0; }
}

/* Curvature vignette + corner darken */
.crt-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.95) 100%),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,220,180,0.12) 0%, transparent 60%);
  z-index: 5;
  mix-blend-mode: multiply;
}

/* Flicker / brightness wobble */
.crt-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 220, 200, 0.05);
  z-index: 6;
  mix-blend-mode: overlay;
  animation: flicker 0.12s steps(2) infinite;
}

@keyframes flicker {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.9; }
}

/* Chromatic aberration — fake RGB split via colored overlays */
.crt-chroma-red,
.crt-chroma-blue {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.0;
}
.crt-chroma-red {
  background: rgba(230, 37, 56, 0.18);
  animation: chroma-r 5.7s steps(40) infinite;
}
.crt-chroma-blue {
  background: rgba(31, 61, 214, 0.18);
  animation: chroma-b 4.3s steps(40) infinite;
}
@keyframes chroma-r {
  0%, 92%, 100% { opacity: 0; transform: translateX(0); }
  93% { opacity: 1; transform: translateX(6px); }
  95% { opacity: 1; transform: translateX(-3px); }
  97% { opacity: 0.5; transform: translateX(2px); }
}
@keyframes chroma-b {
  0%, 90%, 100% { opacity: 0; transform: translateX(0); }
  91% { opacity: 1; transform: translateX(-6px); }
  93% { opacity: 1; transform: translateX(3px); }
  95% { opacity: 0.5; transform: translateX(-2px); }
}

/* The hard-glitch state (triggered randomly by JS) */
.crt-screen.hard-glitch .crt-static { opacity: 0.5; }
.crt-screen.hard-glitch .crt-chroma-red,
.crt-screen.hard-glitch .crt-chroma-blue { opacity: 1; }
.crt-screen.hard-glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 4px,
    rgba(255,255,255,0.08) 4px,
    rgba(255,255,255,0.08) 5px
  );
  z-index: 11;
  pointer-events: none;
  animation: shake 0.12s steps(2) infinite;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-3px, 1px); }
  100% { transform: translate(2px, -1px); }
}

/* Power-on warm-up — slight pulse */
.crt-rec-blink {
  animation: rec-blink 1s steps(2) infinite;
}
@keyframes rec-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

/* Whole-TV wobble — like a busted set on a wonky table */
.tv-wobble {
  animation: tv-wobble 9s ease-in-out infinite;
}
@keyframes tv-wobble {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(-0.6deg) translateY(-2px); }
}

/* CRT curvature on inner content */
.crt-curve {
  /* slight barrel-distortion fake via scale + radial mask */
  border-radius: 26px;
  overflow: hidden;
}