body {
  font-family: "Inter", sans-serif;
  background-color: #000000;
  color: #f5f5f7;
  overflow-x: hidden;
}
.mono {
  font-family: "JetBrains Mono", monospace;
}

/* Grain Texture Overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.4;
  pointer-events: none;
  z-index: 50;
}

/* Subtle Animated Background Orbs */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  z-index: -1;
  animation: pulse 15s infinite alternate;
}
.orb-red {
  background: rgba(255, 0, 60, 0.15);
  width: 600px;
  height: 600px;
  top: -10%;
  left: -10%;
}
.orb-cyan {
  background: rgba(0, 255, 204, 0.1);
  width: 500px;
  height: 500px;
  bottom: 10%;
  right: -5%;
  animation-delay: -5s;
}

/* Smooth Reveal Animation Class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Django Form Styling Override */
form input[type="text"],
form input[type="email"],
form input[type="file"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  color: white;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}
form input[type="text"]:focus,
form input[type="email"]:focus {
  outline: none;
  border-color: rgba(255, 0, 60, 0.5);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 15px rgba(255, 0, 60, 0.1);
}

/* Custom File Input Styling */
form input[type="file"] {
  padding: 0.5rem;
  font-size: 0.875rem;
  color: #9ca3af;
}
form input[type="file"]::file-selector-button {
  background: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
form input[type="file"]::file-selector-button:hover {
  background: #374151;
}

/* Custom Cyberpunk Checkbox */
form input[type="checkbox"] {
  appearance: none;
  background-color: rgba(255, 255, 255, 0.05);
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
form input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #ef4444;
  background-color: #ef4444;
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
form input[type="checkbox"]:checked::before {
  transform: scale(1);
}
form input[type="checkbox"]:checked {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Screenshot Crossfade Animation */
@keyframes crossfade {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.img-fade-1 {
  animation: crossfade 10s infinite;
}
.img-fade-2 {
  opacity: 0;
  animation: crossfade 10s infinite;
  animation-delay: 5s;
}

/* --- TACTICAL NEW YEAR BANNER CSS --- */
#ny-wrapper,
#ny-card,
#ny-text-container,
#ny-symbols svg,
h2,
h3 {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    pointer-events: none;
    opacity: 0;
    
    background: linear-gradient(to bottom, #ffffff 0%, #ff5e00 20%, #ffc400 60%, transparent 100%);
    box-shadow: 0 -2px 10px 1px rgb(255, 174, 0);
    
    animation-name: fiery-drift;
    animation-timing-function: cubic-bezier(0.2, 0.35, 0.45, 0.94);
    animation-iteration-count: infinite;
    filter: blur(0.5px);
    
    --sway: 0px;
}

/* Ember drift and fade animation */
@keyframes fiery-drift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* Moves up and randomly sways left/right based on the --sway variable */
        transform: translate(var(--sway), -45vh) scale(0.2);
        opacity: 0;
    }
}