/* Cybersecurity Visual Effects */

/* ========================================
   ATMOSPHERIC BACKGROUNDS
   ======================================== */

/* Grid pattern overlay */
.grid-pattern {
  position: relative;
  /* overflow: hidden; - REMOVED: prevents body scrolling */
}

.grid-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.dark .grid-pattern::before {
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.15) 1px, transparent 1px);
}

/* Circuit board pattern */
.circuit-pattern {
  position: relative;
  overflow: hidden;
}

.circuit-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.4) 2px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 170, 0.4) 2px, transparent 2px),
    linear-gradient(45deg, transparent 48%, rgba(0, 212, 255, 0.1) 49%, rgba(0, 212, 255, 0.1) 51%, transparent 52%);
  background-size: 100px 100px, 120px 120px, 60px 60px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.dark .circuit-pattern::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.6) 2px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 170, 0.6) 2px, transparent 2px),
    linear-gradient(45deg, transparent 48%, rgba(0, 212, 255, 0.15) 49%, rgba(0, 212, 255, 0.15) 51%, transparent 52%);
}

/* Scan line effect */
.scan-lines {
  position: relative;
  /* overflow: hidden; - REMOVED: prevents body scrolling */
}

.scan-lines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--scan-line-color),
    transparent
  );
  transform: translateY(-100%);
  animation: scanLine 8s linear infinite;
  pointer-events: none;
  z-index: 10;
}

/* Atmospheric glow */
.cyber-glow {
  position: relative;
}

.cyber-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(
    circle at center,
    var(--accent-glow) 0%,
    transparent 70%
  );
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite;
}

/* ========================================
   TYPOGRAPHY EFFECTS
   ======================================== */

/* Display font for headings with strong weight */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Size jumps (3x+ ratio) for visual hierarchy */
h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Readable body text with system fonts */
body, p {
  font-family: var(--font-sans);
  font-weight: var(--weight-normal);
  font-size: clamp(1rem, 1.125vw, 1.125rem);
  line-height: 1.65;
}

/* Glitch effect for headings */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 var(--cyber-cyan);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch 5s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 var(--terminal-green);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch 5s infinite linear alternate-reverse;
}

/* Terminal-style typing effect */
.typing-effect {
  overflow: hidden;
  border-right: 3px solid var(--accent);
  white-space: nowrap;
  margin: 0 auto;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent); }
}

/* ========================================
   INTERACTIVE ELEMENTS
   ======================================== */

/* Cyber button with glow */
.cyber-button {
  position: relative;
  padding: 1rem 2rem;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cyber-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-glow),
    transparent
  );
  transition: left 0.5s ease;
}

.cyber-button:hover::before {
  left: 100%;
}

.cyber-button:hover {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 20px var(--accent-glow),
              0 0 40px var(--accent-glow),
              0 0 60px var(--accent-glow);
}

/* Card with holographic border */
.holo-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.3s ease;
}

.holo-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    var(--cyber-cyan),
    var(--cyber-teal),
    var(--cyber-green),
    var(--cyber-cyan)
  );
  background-size: 400% 400%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: holoBorder 4s ease infinite;
  z-index: -1;
  border-radius: inherit;
}

.holo-card:hover::before {
  opacity: 0.5;
}

@keyframes holoBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Glow on hover for links */
.glow-link {
  position: relative;
  color: var(--link);
  text-decoration: none;
  transition: all 0.3s ease;
}

.glow-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-teal));
  transition: width 0.3s ease;
}

.glow-link:hover {
  color: var(--link-hover);
  text-shadow: 0 0 10px var(--accent-glow);
}

.glow-link:hover::after {
  width: 100%;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ========================================
   STAGGERED ANIMATIONS
   ======================================== */

/* Stagger children animations */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }

/* ========================================
   MATRIX-STYLE EFFECTS
   ======================================== */

/* Subtle matrix rain (decorative only) */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.03;
  overflow: hidden;
}

.matrix-bg::before {
  content: '0101010110101001001010110101010101011010100101010110101010';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 20px;
  color: var(--terminal-green);
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: matrixRain 20s linear infinite;
}

/* Hexagon pattern (alternative to grid) */
.hex-pattern {
  position: relative;
  overflow: hidden;
}

.hex-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v22L30 52 4.02 37V15z' fill='none' stroke='rgba(0,212,255,0.15)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 60px 52px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.dark .hex-pattern::before {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v22L30 52 4.02 37V15z' fill='none' stroke='rgba(0,212,255,0.2)' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ========================================
   ACCESSIBILITY - RESPECT USER PREFERENCES
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scan-lines::after,
  .matrix-bg::before,
  .cyber-glow::before {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .grid-pattern::before,
  .circuit-pattern::before,
  .hex-pattern::before {
    opacity: 0.6;
  }

  .cyber-button {
    border-width: 3px;
  }
}