/* =============================================================================
   Shared styles — used by every page that extends templates/base.html.
   Page-specific rules (loading overlay, accordion, login bracket-box, etc.)
   stay inline in the relevant template.
   ============================================================================= */

:root { --accent: #2dff6e; }

body {
  background-color: #080808;
  text-transform: uppercase;
}

/* CRT scanlines — fixed full-viewport overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none; z-index: 3;
  animation: crt-flicker 10s ease-in-out infinite;
}
@keyframes crt-flicker {
  0%,100% { opacity: 1; }
  91%     { opacity: 1; }
  92%     { opacity: 0.95; }
  93%     { opacity: 1; }
  97%     { opacity: 0.98; }
  98%     { opacity: 1; }
}

/* Animated circuit-trace background canvas */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* Inputs */
input::placeholder,
textarea::placeholder {
  color: #777777;
  text-transform: uppercase;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: #2dff6e;
}

/* Floating pirate skull */
@keyframes pirate-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.pirate-float { animation: pirate-float 3s ease-in-out infinite; }

/* Terminal block cursor (used by typewriter effect) */
.terminal-cursor-block {
  display: inline-block;
  width: 9px; height: 1em;
  background: #2dff6e;
  vertical-align: text-bottom;
  animation: term-blink 0.6s step-end infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }