/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes noise-anim {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

/* === EFFECTS === */
.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter 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");
  background-size: 200px 200px;
  animation: noise-anim 0.2s steps(4) infinite;
}

.gradient-mesh {
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.15), transparent 70%);
}

.glow-red {
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.2), 0 0 60px rgba(255, 0, 0, 0.1);
}

.input-glow:focus {
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.neon-border {
  border: 1px solid rgba(255, 0, 0, 0.3);
  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.1);
}

/* === MODULE STYLES === */
/* module: home */
.slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #FF0000;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  border: 2px solid white;
}

.slider-thumb::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #FF0000;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  border: 2px solid white;
}