/* === Base Body === */
body {
  margin: 0;
  padding: 0;
  background-color: black; /* fallback color */
  background-image: url('/assets/Advocacy.png');
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'Orbitron', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 0;
}

/* === Red Diagonal Overlay === */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 60, 60, 0.05),
    rgba(255, 60, 60, 0.05) 10px,
    transparent 10px,
    transparent 20px
  );
  pointer-events: none;
  z-index: 1;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

/* === Frame === */
.frame {
  z-index: 2;
  border: 2px solid #ff3c3c;
  padding: 5vw;
  border-radius: 1em;
  box-shadow: 0 0 2em #ff3c3c;
  background-color: rgba(0, 0, 0, 0.8);
  max-width: 90vw;
  text-align: center;
}

/* === Headings Flicker === */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  color: #ff3c3c;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px #ff3c3c, 0 0 20px #ff3c3c;
  animation: flicker 5s infinite;
  margin: 0;
}

@keyframes flicker {
  0%, 54%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.9;
  }
}

/* === Restricted Access Splash === 
.restricted-overlay {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:#0b0c10;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:15;  above scanlines and red overlay 
  animation: fadeOut 0.1s ease forwards;
  animation-delay: 0.1s; disappears after 3s 
}
 */

/*.restricted-overlay h1 {
  font-size:2rem;
  color:#00f7ff;
  text-transform:uppercase;
  animation: pulse 0.1s infinite;
}

@keyframes glitchText {
  0% { text-shadow: 2px 0 #ff3c7d, 1px 0 #00f7ff; }
  50% { text-shadow: -2px 0 #ff3c7d, 2px 0 #00f7ff; }
  100% { text-shadow: 2px 0 #ff3c7d, -2px 0 #00f7ff; }
}
*/

@keyframes fadeOut {
  to { opacity:0; visibility:hidden; }
}

/* === PIN Container Reveal === */
.pin-container {
  display:flex;
  justify-content:center;
  margin-top:1em;
  opacity:0;
 /* animation: fadeIn 1s ease forwards;
  animation-delay: 2s; /* appears after overlay fades */
  position: relative;
  z-index:20;
  pointer-events: none;
}

.pin-container button {
 /* height: 60px;
  padding: 0 1.5em;
  font-size: 1.2rem;
  color: #ff3c3c;
  background-color: #1a1a1a;
  border: 2px solid #ff3c3c;
  border-radius: 6px;
  margin-left: 1em;
  box-shadow: 0 0 10px #ff3c3c;
  cursor: pointer;
  animation: flicker 5s infinite;
  transition: transform 0.2s ease;*/
}

.pin-container button:hover {
  transform: scale(1.05);
}

.segmented-pin {
/*  width: 60px;
  height: 60px;
  margin: 0 10px;
  font-size: 2rem;
  text-align: center;
  border: 2px solid #00f7ff;
  background: #1a1a1a;
  color: #00f7ff;
  border-radius: 6px;
  box-shadow: 0 0 10px #00f7ff;
  animation: glitchBox 2s infinite;
  width: 12ch;
  letter-spacing: 0.5ch; */
}

@keyframes fadeIn {
  to { 
  opacity:1; 
  pointer-events: auto;
  }
}

@keyframes glitchBox {
  0%, 100% { box-shadow:0 0 5px #00f7ff; }
  50% { box-shadow:0 0 15px #ff3c7d; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}