/* Content width scales with the screen: laptop 1200px, large desktop 1320px, ultrawide 1440px */
:root {
  --content-max: 1200px;
}
@media (min-width: 1536px) {
  :root {
    --content-max: 1320px;
  }
}
@media (min-width: 1800px) {
  :root {
    --content-max: 1440px;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  background: #09090b;
  color: #fafafa;
}

.bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(39, 39, 42, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(39, 39, 42, 0.45) 1px, transparent 1px);
}
.glow-red {
  box-shadow: 0 0 30px rgba(220, 38, 38, 0.15);
}
.glow-red-strong {
  box-shadow: 0 0 24px rgba(220, 38, 38, 0.4);
}
.glow-green {
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.18);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Header */
.nav-link {
  position: relative;
  padding-block: 26px;
  transition: color 0.2s;
}
.nav-link[aria-current="page"] {
  color: #ef4444;
}
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #dc2626;
}
.mobile-link[aria-current="page"] {
  color: #ef4444;
  background: #2a1012;
  border-color: rgba(220, 38, 38, 0.35);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-pulse,
  .animate-spin-slow {
    animation: none !important;
  }
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spin-slow 40s linear infinite;
}