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

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 0, 0, 0;
  --background-end-rgb: 0, 0, 0;
  --crt-glow: rgba(0, 100, 255, 0.04);
  --crt-glow-secondary: rgba(150, 0, 255, 0.02);
  --crt-vignette: rgba(0, 0, 0, 0.5);
}

/* CRT Monitor Effects */
@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

@keyframes phosphor {
  0% { text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  5% { text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  10% { text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  15% { text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  20% { text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  25% { text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  30% { text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  35% { text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  40% { text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  45% { text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  50% { text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  55% { text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  60% { text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  65% { text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  70% { text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  75% { text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  80% { text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  85% { text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  90% { text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  95% { text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  100% { text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
}

@keyframes blink {
  50% { opacity: 0; }
}

:root {
  --primary: transparent;
  --secondary: whitesmoke;
  --tertiary: whitesmoke;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-arrow-color: transparent;
  scrollbar-color: var(--secondary) var(--primary);
}

/* Hide scrollbar while keeping functionality */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 17px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: none;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--tertiary);
}

body {
  color: rgb(var(--foreground-rgb));
  background: 
    radial-gradient(
      circle at center,
      var(--crt-glow) 0%,
      transparent 100%
    ),
    radial-gradient(
      circle at center,
      var(--crt-glow-secondary) 0%,
      transparent 80%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 0%,
      var(--crt-vignette) 100%
    ),
    linear-gradient(
      to bottom,
      rgb(var(--background-start-rgb)),
      rgb(var(--background-end-rgb))
    );
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  z-index: 1000;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  animation: flicker 0.15s infinite;
}

/* Add rolling scanline effect */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    transparent 0%,
    transparent 49.9%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 50.1%,
    transparent 100%
  );
  background-repeat: no-repeat;
  animation: scan 15s linear 0s infinite;
  pointer-events: none;
  z-index: 1000;
}

* {
  text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), 
               -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 
               0 0 3px;
  animation: phosphor 1.6s infinite;
}

::-moz-selection {
  background-color: white;
  color: black;
}
::selection {
  background-color: white;
  color: black;
}

/* CRT Effects disable class */
.crt-effects-disabled {
  background: rgb(var(--background-start-rgb)) !important;
}

.crt-effects-disabled::before,
.crt-effects-disabled::after {
  display: none !important;
}

.crt-effects-disabled * {
  text-shadow: none !important;
  animation: none !important;
}

/* CRT Effects disable classes */
.crt-scanlines-disabled::before {
  display: none !important;
}

.crt-flicker-disabled::after {
  display: none !important;
}

.crt-transform-disabled #__next {
  transform: none !important;
  filter: none !important;
}

.crt-phosphor-disabled * {
  text-shadow: none !important;
  animation: none !important;
}

.crt-glow-disabled {
  background: rgb(var(--background-start-rgb)) !important;
}

@keyframes scan {
  0% { background-position: 0 -100vh; }
  35%, 100% { background-position: 0 100vh; }
}

/* CRT Effects disable classes */
.crt-scanlines-disabled::before {
  display: none !important;
}

.crt-flicker-disabled::after {
  display: none !important;
}

.crt-transform-disabled #__next {
  transform: none !important;
  filter: none !important;
}

.crt-phosphor-disabled * {
  text-shadow: none !important;
  animation: none !important;
}

.crt-glow-disabled {
  background: rgb(var(--background-start-rgb)) !important;
}

.crt-rolling-scan-disabled::before {
  display: none !important;
}

@layer components {
  .input-field {
    @apply w-full px-4 py-2 bg-black border border-gray-700 text-white focus:outline-none focus:border-white;
  }

  .button {
    @apply px-4 py-2 bg-black border border-gray-700 text-white hover:bg-gray-900 focus:outline-none focus:border-white;
  }

  .card {
    @apply bg-black border border-gray-700 p-4;
  }
}
