/* Minimal styles for elements that don't map cleanly to Tailwind */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 180px;
}

body {
  overflow-x: hidden;
}

/* Reset list styles */
ul, ol {
  list-style: none;
}

/* Pixel Art */
.pixel-art {
  display: flex;
  flex-direction: column;
}

.pixel-row {
  display: flex;
}

.px {
  display: block;
  width: 16px;
  height: 16px;
}

/* Hamburger Animation */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Logo Marquee */
.logo-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-marquee {
  display: flex;
  min-width: max-content;
  animation: marquee 30s linear infinite;
}

.logo-marquee:hover {
  animation-play-state: paused;
}

.logo-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
  flex-shrink: 0;
}

.logo-marquee-track > * {
  flex-shrink: 0;
  object-fit: contain;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile Nav Overlay */
.mobile-nav-overlay.active {
  display: flex;
}