/**
 * The Constellation - Interactive Portfolio
 * Stylesheet: Effects
 * Purpose: Visual effects (scanlines, vignette, animations)
 */

/* Scan lines effect */
#scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.03) 0px,
    rgba(0, 0, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  will-change: opacity;
  /* GPU acceleration */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Disable scanlines on mobile for performance */
@media (max-width: 768px) {
  #scanlines {
    opacity: 0.3;
  }
}

/* Vignette */
#vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  will-change: opacity;
  /* GPU acceleration */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Entry animation */
.entry-fade {
  animation: entryFade 2s ease-out forwards;
}

@keyframes entryFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* SEO: Hidden but crawlable content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}