/* custom.css — small visual tweaks for this specific site.
   Loads AFTER main.css, so anything here wins. The AI content engine may add
   rules here when params can't express a change. Keep it short; prefer params. */

/* ── Neon dive-bar theme: two-tone glow + 80s CRT static/corruption ── */
/* Pure CSS gradients on body's own background — no fixed overlays, no SVG data
   URIs (Safari-safe). Boosted contrast/thickness so the static actually reads
   as static rather than a faint texture. */

:root {
  --neon-pink: #ff2fb0;
  --neon-cyan: #00e5ff;
}

body {
  background-color: #0a0a0d;
  background-image:
    /* fine horizontal scanlines */
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.07) 0px,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* coarser vertical grain, offset angle for a cross-hatched noisy feel */
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 5px
    ),
    /* diagonal grain layer for extra grunge/corruption texture */
    repeating-linear-gradient(
      45deg,
      rgba(255, 47, 176, 0.03) 0px,
      rgba(255, 47, 176, 0.03) 1px,
      transparent 1px,
      transparent 6px
    ),
    /* a thick, clearly visible cyan/pink "signal band" that rolls down the page */
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 229, 255, 0.16) 8%,
      rgba(0, 229, 255, 0.05) 12%,
      transparent 20%,
      transparent 80%,
      rgba(255, 47, 176, 0.05) 88%,
      rgba(255, 47, 176, 0.16) 92%,
      transparent 100%
    );
  background-size: auto, auto, auto, 100% 260%;
  animation:
    static-jitter 0.35s steps(4) infinite,
    signal-roll 4.5s linear infinite;
}

@keyframes static-jitter {
  0%   { background-position: 0px 0px,   0px 0px,   0px 0px, 0% 0%; }
  25%  { background-position: -2px 2px,  2px -1px,  1px 2px, 0% 0%; }
  50%  { background-position: 2px -2px,  -2px 1px,  -1px -2px, 0% 0%; }
  75%  { background-position: -1px 1px,  1px 2px,   2px -1px, 0% 0%; }
  100% { background-position: 0px 0px,   0px 0px,   0px 0px, 0% 0%; }
}

@keyframes signal-roll {
  0%   { background-position: 0px 0px, 0px 0px, 0px 0px, 0% -10%; }
  100% { background-position: 0px 0px, 0px 0px, 0px 0px, 0% 110%; }
}

/* Occasional whole-page brightness flicker, like a weak or corrupted signal */
@keyframes tv-flicker {
  0%, 94%, 100% { filter: brightness(1); }
  95%           { filter: brightness(1.25); }
  96%           { filter: brightness(0.85); }
  97%           { filter: brightness(1.1); }
}
body {
  animation-name: static-jitter, signal-roll, tv-flicker;
  animation-duration: 0.35s, 4.5s, 3.2s;
  animation-timing-function: steps(4), linear, linear;
  animation-iteration-count: infinite, infinite, infinite;
}

/* Glowing neon headings, with a chromatic-aberration "glitch" split that
   nudges apart briefly — pink/cyan fringing like a mistracked VHS/broadcast */
h1, h2, h3,
.hero-heading, .site-title {
  text-shadow:
    0 0 4px rgba(255, 47, 176, 0.55),
    0 0 14px rgba(255, 47, 176, 0.35),
    0 0 34px rgba(255, 47, 176, 0.2);
  animation: glitch-shift 3.5s infinite;
}

@keyframes glitch-shift {
  0%, 88%, 100% {
    text-shadow:
      0 0 4px rgba(255, 47, 176, 0.55),
      0 0 14px rgba(255, 47, 176, 0.35),
      0 0 34px rgba(255, 47, 176, 0.2);
    transform: translate(0, 0);
  }
  89% {
    text-shadow:
      -3px 0 rgba(255, 47, 176, 0.9),
      3px 0 rgba(0, 229, 255, 0.9);
    transform: translate(-2px, 0);
  }
  90% {
    text-shadow:
      3px 0 rgba(255, 47, 176, 0.9),
      -3px 0 rgba(0, 229, 255, 0.9);
    transform: translate(2px, 0);
  }
  91%, 92% {
    text-shadow:
      -2px 0 rgba(255, 47, 176, 0.85),
      2px 0 rgba(0, 229, 255, 0.85);
    transform: translate(-1px, 0);
  }
  93% {
    text-shadow:
      0 0 4px rgba(255, 47, 176, 0.55),
      0 0 14px rgba(255, 47, 176, 0.35),
      0 0 34px rgba(255, 47, 176, 0.2);
    transform: translate(0, 0);
  }
}

/* Buttons / CTAs get a hot-pink glow, cyan on hover for that two-tone sign flicker */
a.btn, button, .btn, .cta, input[type="submit"] {
  box-shadow:
    0 0 6px rgba(255, 47, 176, 0.6),
    0 0 18px rgba(255, 47, 176, 0.35);
  border-color: var(--neon-pink, #ff2fb0);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.btn:hover, button:hover, .btn:hover, .cta:hover, input[type="submit"]:hover {
  box-shadow:
    0 0 8px rgba(0, 229, 255, 0.7),
    0 0 22px rgba(0, 229, 255, 0.45);
  border-color: var(--neon-cyan, #00e5ff);
  color: var(--neon-cyan, #00e5ff);
}

/* Nav links flicker cyan on hover for the two-tone contrast */
nav a:hover, .menu a:hover, header a:hover {
  color: var(--neon-cyan, #00e5ff);
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.6), 0 0 16px rgba(0, 229, 255, 0.35);
}

/* Section dividers / borders get a faint cyan hairline instead of flat grey */
hr, .section + .section, section + section {
  border-color: rgba(0, 229, 255, 0.25);
}

/* Cards/panels get a subtle pink edge glow so they read as "lit" against the dark room */
.card, .panel, .gallery img, .event, .events .item {
  box-shadow: 0 0 0 1px rgba(255, 47, 176, 0.15), 0 0 20px rgba(255, 47, 176, 0.08);
}

/* Respect users who've asked for reduced motion — kill the animated bits */
@media (prefers-reduced-motion: reduce) {
  body, h1, h2, h3, .hero-heading, .site-title {
    animation: none !important;
  }
}