/* Global Font Imports */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap");

/* Custom Brutal Design System */
.brutal-border {
  border: 3px solid #ffffff;
  box-shadow: 6px 6px 0px #ffffff;
}

.brutal-shadow {
  box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.8);
}

.brutal-shadow-red {
  box-shadow: 8px 8px 0px rgba(239, 68, 68, 0.8);
}

.brutal-shadow-blue {
  box-shadow: 8px 8px 0px rgba(59, 130, 246, 0.8);
}

/* Glass Morphism Effect */
.glass-morphism {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glitch Effect */
.glitch-effect {
  position: relative;
  animation: glitch 2s infinite;
}

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

.glitch-effect::before {
  animation: glitch-1 0.5s infinite;
  color: #ff0000;
  z-index: -1;
}

.glitch-effect::after {
  animation: glitch-2 0.5s infinite;
  color: #00ffff;
  z-index: -2;
}

@keyframes glitch {
  0%,
  100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
}

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

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

/* Text Stroke Effects */
.text-stroke {
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  color: transparent;
}

.text-stroke-red {
  -webkit-text-stroke: 2px #ef4444;
  text-stroke: 2px #ef4444;
  color: transparent;
}

.text-stroke-blue {
  -webkit-text-stroke: 2px #3b82f6;
  text-stroke: 2px #3b82f6;
  color: transparent;
}

.text-stroke-green {
  -webkit-text-stroke: 2px #10b981;
  text-stroke: 2px #10b981;
  color: transparent;
}

/* Typewriter Effect */
.typewriter {
  overflow: hidden;
  border-right: 0.15em solid #ffffff;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #ffffff;
  }
}

/* Film Grain Effect */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.03;
  z-index: 1000;
  background-image: radial-gradient(circle, #000 1px, transparent 1px),
    radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

/* Scan Line Effect */
.scan-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  pointer-events: none;
  z-index: 1001;
  animation: scan 2s linear infinite;
  opacity: 0.1;
}

@keyframes scan {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* Pixel Grid Effect */
.pixel-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.02;
  z-index: 999;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px) rotate(1deg);
  box-shadow: 12px 12px 0px rgba(255, 255, 255, 0.8);
}

/* Distorted Text */
.distorted-text {
  display: inline-block;
  transition: transform 0.3s ease;
}

.distorted-text:hover {
  transform: skew(-5deg, 2deg) scale(1.02);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #cccccc;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .brutal-border {
    border-width: 2px;
    box-shadow: 4px 4px 0px #ffffff;
  }

  .brutal-shadow {
    box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.8);
  }

  .typewriter {
    font-size: 0.875rem;
    animation: typing 2s steps(30, end), blink-caret 0.75s step-end infinite;
  }
}