@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@import "tailwindcss";

@theme {
  --color-midnight: #0A0A0A;
  --color-charcoal: #1A1A1A;
  --color-volt: #CCFF00;
  --color-volt-dark: #A3CC00;
  --color-steel: #E5E5E5;
  --color-smoke: #737373;
  --color-edge: #2A2A2A;
  --color-body: #B0B0B0;
  --color-muted: #737373;
  --font-family-display: "Bebas Neue", ui-sans-serif, system-ui, sans-serif;
  --font-family-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Noise texture overlay */
.noise-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
}

.noise-bg > * {
  position: relative;
  z-index: 2;
}

/* Diagonal section divider */
.diagonal-top {
  clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0 100%);
  margin-top: -4rem;
  padding-top: 6rem;
}

@media (min-width: 1024px) {
  .diagonal-top {
    clip-path: polygon(0 6rem, 100% 0, 100% 100%, 0 100%);
    margin-top: -6rem;
    padding-top: 8rem;
  }
}

/* Volt glow effect on hover */
.glow-hover {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.glow-hover:hover {
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.15), 0 0 40px rgba(204, 255, 0, 0.05);
  border-color: rgba(204, 255, 0, 0.4);
  transform: translateY(-2px);
}

/* Angular card clip */
.clip-angular {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
}

/* Volt underline decoration */
.volt-underline {
  background-image: linear-gradient(to right, #CCFF00, #CCFF00);
  background-size: 100% 0.15em;
  background-position: 0 95%;
  background-repeat: no-repeat;
}