/* Retro Technology Effects - Spectrum Style CSS */

/* Scanlines effect - simulates CRT monitor scanlines */
.scanlines {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0) 51%
  );
  background-size: 100% 4px;
  pointer-events: none;
}

/* CRT screen effect */
.crt-screen {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(10, 230, 180, 0.3),
              inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.crt-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 90%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* VHS tracking lines */
.vhs-tracking {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.08;
  pointer-events: none;
  z-index: 3;
}

.vhs-tracking::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  animation: vhs-tracking 8s linear infinite;
}

@keyframes vhs-tracking {
  0% {
    transform: translateY(-100px);
  }
  10% {
    transform: translateY(100%);
  }
  11% {
    transform: translateY(-100px);
  }
  50% {
    transform: translateY(-100px);
  }
  51% {
    transform: translateY(100%);
  }
  52% {
    transform: translateY(-100px);
  }
  90% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Glitch text effect */
.glitch-text {
  position: relative;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

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

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

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(31px, 9999px, 94px, 0);
    transform: skew(0.85deg);
  }
  5% {
    clip: rect(70px, 9999px, 78px, 0);
    transform: skew(0.17deg);
  }
  10% {
    clip: rect(75px, 9999px, 95px, 0);
    transform: skew(0.4deg);
  }
  15% {
    clip: rect(11px, 9999px, 83px, 0);
    transform: skew(0.12deg);
  }
  20% {
    clip: rect(65px, 9999px, 91px, 0);
    transform: skew(0.67deg);
  }
  25% {
    clip: rect(10px, 9999px, 74px, 0);
    transform: skew(0.08deg);
  }
  30% {
    clip: rect(37px, 9999px, 56px, 0);
    transform: skew(0.3deg);
  }
  35% {
    clip: rect(10px, 9999px, 93px, 0);
    transform: skew(0.13deg);
  }
  40% {
    clip: rect(82px, 9999px, 98px, 0);
    transform: skew(0.1deg);
  }
  45% {
    clip: rect(33px, 9999px, 54px, 0);
    transform: skew(0.78deg);
  }
  50% {
    clip: rect(31px, 9999px, 67px, 0);
    transform: skew(0.37deg);
  }
  55% {
    clip: rect(19px, 9999px, 56px, 0);
    transform: skew(0.31deg);
  }
  60% {
    clip: rect(61px, 9999px, 52px, 0);
    transform: skew(0.9deg);
  }
  65% {
    clip: rect(46px, 9999px, 73px, 0);
    transform: skew(0.65deg);
  }
  70% {
    clip: rect(7px, 9999px, 79px, 0);
    transform: skew(0.42deg);
  }
  75% {
    clip: rect(25px, 9999px, 61px, 0);
    transform: skew(0.48deg);
  }
  80% {
    clip: rect(39px, 9999px, 31px, 0);
    transform: skew(0.07deg);
  }
  85% {
    clip: rect(89px, 9999px, 99px, 0);
    transform: skew(0.79deg);
  }
  90% {
    clip: rect(62px, 9999px, 23px, 0);
    transform: skew(0.67deg);
  }
  95% {
    clip: rect(79px, 9999px, 14px, 0);
    transform: skew(0.09deg);
  }
  100% {
    clip: rect(81px, 9999px, 70px, 0);
    transform: skew(0.08deg);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(36px, 9999px, 100px, 0);
    transform: skew(0.64deg);
  }
  5% {
    clip: rect(93px, 9999px, 74px, 0);
    transform: skew(0.1deg);
  }
  10% {
    clip: rect(66px, 9999px, 64px, 0);
    transform: skew(0.55deg);
  }
  15% {
    clip: rect(43px, 9999px, 75px, 0);
    transform: skew(0.34deg);
  }
  20% {
    clip: rect(46px, 9999px, 12px, 0);
    transform: skew(0.07deg);
  }
  25% {
    clip: rect(82px, 9999px, 38px, 0);
    transform: skew(0.77deg);
  }
  30% {
    clip: rect(27px, 9999px, 65px, 0);
    transform: skew(0.84deg);
  }
  35% {
    clip: rect(57px, 9999px, 49px, 0);
    transform: skew(0.17deg);
  }
  40% {
    clip: rect(73px, 9999px, 67px, 0);
    transform: skew(0.01deg);
  }
  45% {
    clip: rect(84px, 9999px, 8px, 0);
    transform: skew(0.01deg);
  }
  50% {
    clip: rect(100px, 9999px, 100px, 0);
    transform: skew(0.23deg);
  }
  55% {
    clip: rect(23px, 9999px, 31px, 0);
    transform: skew(0.05deg);
  }
  60% {
    clip: rect(76px, 9999px, 93px, 0);
    transform: skew(0.58deg);
  }
  65% {
    clip: rect(64px, 9999px, 35px, 0);
    transform: skew(0.01deg);
  }
  70% {
    clip: rect(32px, 9999px, 23px, 0);
    transform: skew(0.6deg);
  }
  75% {
    clip: rect(95px, 9999px, 100px, 0);
    transform: skew(0.04deg);
  }
  80% {
    clip: rect(48px, 9999px, 37px, 0);
    transform: skew(0.2deg);
  }
  85% {
    clip: rect(13px, 9999px, 51px, 0);
    transform: skew(0.71deg);
  }
  90% {
    clip: rect(57px, 9999px, 9px, 0);
    transform: skew(0.65deg);
  }
  95% {
    clip: rect(94px, 9999px, 91px, 0);
    transform: skew(0.19deg);
  }
  100% {
    clip: rect(30px, 9999px, 98px, 0);
    transform: skew(0.99deg);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(-2deg);
  }
  10% {
    transform: skew(0deg);
  }
  20% {
    transform: skew(1deg);
  }
  30% {
    transform: skew(0deg);
  }
  40% {
    transform: skew(-1deg);
  }
  50% {
    transform: skew(2deg);
  }
  60% {
    transform: skew(0deg);
  }
  70% {
    transform: skew(1deg);
  }
  80% {
    transform: skew(-1deg);
  }
  90% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(-2deg);
  }
}

/* Pixel noise effect */
.pixel-noise {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* ZX Spectrum color palette */
.spectrum-colors {
  --spectrum-black: #000000;
  --spectrum-blue: #0000d8;
  --spectrum-red: #d80000;
  --spectrum-magenta: #d800d8;
  --spectrum-green: #00d800;
  --spectrum-cyan: #00d8d8;
  --spectrum-yellow: #d8d800;
  --spectrum-white: #d8d8d8;
  --spectrum-bright-blue: #0000ff;
  --spectrum-bright-red: #ff0000;
  --spectrum-bright-magenta: #ff00ff;
  --spectrum-bright-green: #00ff00;
  --spectrum-bright-cyan: #00ffff;
  --spectrum-bright-yellow: #ffff00;
  --spectrum-bright-white: #ffffff;
}

/* Retro grid background */
.retro-grid {
  background-image: linear-gradient(rgba(18, 16, 16, 0) 2px, transparent 2px),
                   linear-gradient(90deg, rgba(18, 16, 16, 0) 2px, transparent 2px);
  background-size: 40px 40px;
  background-position: -2px -2px;
}

/* Retro loading bar */
.retro-loading {
  height: 4px;
  background: linear-gradient(to right,
    var(--spectrum-bright-blue) 0%,
    var(--spectrum-bright-red) 20%,
    var(--spectrum-bright-magenta) 40%,
    var(--spectrum-bright-green) 60%,
    var(--spectrum-bright-cyan) 80%,
    var(--spectrum-bright-yellow) 100%);
  background-size: 200% 100%;
  animation: loading-animation 2s linear infinite;
}

@keyframes loading-animation {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Retro terminal text effect */
.terminal-text {
  font-family: monospace;
  color: #33ff33;
  text-shadow: 0 0 5px #33ff33;
  animation: terminal-blink 1s step-end infinite;
}

.terminal-text::after {
  content: "_";
  animation: terminal-blink 1s step-end infinite;
}

@keyframes terminal-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 8-bit pixel art style elements */
.pixel-border {
  box-shadow:
    0 -4px 0 0 #ffffff,
    0 4px 0 0 #878787,
    -4px 0 0 0 #ffffff,
    4px 0 0 0 #878787,
    0 0 0 4px #000000;
}

/* Retro computer startup animation */
.startup-animation {
  animation: startup 2s ease-in-out;
}

@keyframes startup {
  0% {
    opacity: 0;
    filter: brightness(0);
  }
  5% {
    opacity: 0.2;
    filter: brightness(2);
  }
  10% {
    opacity: 0.1;
    filter: brightness(0.5);
  }
  20% {
    opacity: 0.5;
    filter: brightness(1.5);
  }
  30% {
    opacity: 0.2;
    filter: brightness(0.5);
  }
  40% {
    opacity: 0.8;
    filter: brightness(1.2);
  }
  50% {
    opacity: 0.5;
    filter: brightness(1);
  }
  60% {
    opacity: 1;
    filter: brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* Retro 3D elements */
.cube3d {
  position: absolute;
  transform-style: preserve-3d;
  animation: rotate3d 10s linear infinite;
}

.cube3d div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cube3d .front { transform: translateZ(25px); }
.cube3d .back { transform: rotateY(180deg) translateZ(25px); }
.cube3d .right { transform: rotateY(90deg) translateZ(25px); }
.cube3d .left { transform: rotateY(-90deg) translateZ(25px); }
.cube3d .top { transform: rotateX(90deg) translateZ(25px); }
.cube3d .bottom { transform: rotateX(-90deg) translateZ(25px); }

@keyframes rotate3d {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Spectrum loading stripes */
.spectrum-loading {
  background: repeating-linear-gradient(
    45deg,
    var(--spectrum-blue),
    var(--spectrum-blue) 10px,
    var(--spectrum-red) 10px,
    var(--spectrum-red) 20px,
    var(--spectrum-green) 20px,
    var(--spectrum-green) 30px,
    var(--spectrum-yellow) 30px,
    var(--spectrum-yellow) 40px
  );
  background-size: 200% 200%;
  animation: spectrum-loading 10s linear infinite;
}

@keyframes spectrum-loading {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}