@tailwind base;
@tailwind components;
@tailwind utilities;

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

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 243, 255, 0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 243, 255, 0.6);
}

/* Holographic Glass */
.glass-holo {
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.7) 0%, rgba(20, 30, 50, 0.5) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 243, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.glass-holo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.5), transparent);
}

/* Active Element */
.glass-active {
  background: rgba(0, 243, 255, 0.1);
  border: 1px solid rgba(0, 243, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

/* Text Glows */
.text-glow-blue {
  color: #00f3ff;
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
}

.text-glow-purple {
  color: #bc13fe;
  text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
}

.text-glow-red {
  color: #ff0055;
  text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
}

.text-glow-green {
  color: #0aff00;
  text-shadow: 0 0 8px rgba(10, 255, 0, 0.6);
}

/* Grid Background */
.grid-bg {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(0, 243, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* CRT Scanline Effect */
.scanlines {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.2));
  background-size: 100% 4px;
  pointer-events: none;
}

/* Tech Clip Path */
.clip-tech {
  clip-path: polygon(0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%);
}

.clip-tech-inv {
  clip-path: polygon(10px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 10px);
}