/* ============================================================
   THEME — textures, overlays, color utilities, special effects
   ============================================================ */

/* Diagonal line texture */
.diagonal-bg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0, 229, 255, 0.025) 4px,
    rgba(0, 229, 255, 0.025) 5px
  );
}

/* CRT scan lines overlay — applied to body */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9997;
}

/* Vignette overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 9996;
}

/* Section alternating backgrounds */
section:nth-child(even) {
  background: var(--color-bg-alt);
  background-image:
    radial-gradient(ellipse at 0% 100%, rgba(224,64,251,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(0,229,255,0.04) 0%, transparent 50%);
}

/* Glow utilities */
.glow {
  text-shadow: var(--glow-cyan);
}
.glow-purple {
  text-shadow: var(--glow-purple);
}
.glow-border {
  box-shadow: 0 0 0 1px var(--color-accent), var(--glow-cyan);
}

/* Hex dot grid for hero */
.hex-bg {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,229,255,0.12) 1px, transparent 0);
  background-size: 28px 28px;
}

/* Neon accent line — decorative horizontal rule */
.neon-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-accent) 30%,
    var(--color-accent2) 70%,
    transparent 100%
  );
  box-shadow: 0 0 8px var(--color-accent), 0 0 16px rgba(224,64,251,0.3);
  margin: 3rem 0;
}

/* Corner bracket decoration for sections */
.bracket-corner {
  position: relative;
}
.bracket-corner::before,
.bracket-corner::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--color-accent);
  border-style: solid;
  opacity: 0.5;
}
.bracket-corner::before {
  top: 0; left: 0;
  border-width: 2px 0 0 2px;
}
.bracket-corner::after {
  bottom: 0; right: 0;
  border-width: 0 2px 2px 0;
}

/* Animated gradient border */
@keyframes borderRotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent2), var(--color-accent3), var(--color-accent));
  background-size: 300% 300%;
  animation: borderRotate 4s ease infinite;
  z-index: -1;
  opacity: 0.6;
}

/* Holographic shimmer */
@keyframes holographic {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.holographic {
  background: linear-gradient(
    135deg,
    rgba(0,229,255,0.1) 0%,
    rgba(224,64,251,0.1) 25%,
    rgba(118,255,3,0.1) 50%,
    rgba(0,229,255,0.1) 75%,
    rgba(224,64,251,0.1) 100%
  );
  background-size: 400% 400%;
  animation: holographic 6s ease infinite;
}

/* Typing cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cursor::after {
  content: '█';
  color: var(--color-accent);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

/* Neon text variants */
.text-cyan   { color: var(--color-accent);  text-shadow: var(--glow-cyan); }
.text-purple { color: var(--color-accent2); text-shadow: var(--glow-purple); }
.text-green  { color: var(--color-accent3); text-shadow: var(--glow-green); }
.text-danger { color: var(--color-danger);  text-shadow: 0 0 8px var(--color-danger); }