/* Tailwind replacement note:
 * Per la versione di produzione scarica il file ufficiale di Tailwind (build con la tua config)
 * e sostituisci questo path: css/tailwind.min.css
 */

/* Grid di sfondo */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Pannelli pixel */
.pixel-panel {
  border: 3px solid #27272a;
  box-shadow:
    0 0 0 3px #020617,
    4px 4px 0 #020617;
}

.pixel-panel-soft {
  border: 2px solid #3f3f46;
  box-shadow:
    0 0 0 2px #020617,
    3px 3px 0 #020617;
}

/* Avatar 8-bit */
.avatar-8bit {
  image-rendering: pixelated;
}

/* Effetto scanlines */
.scanlines::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0) 0%,
      rgba(10, 10, 10, 0.55) 50%,
      rgba(10, 10, 10, 0) 100%
  );
  background-size: 100% 4px;
  opacity: 0.25;
  mix-blend-mode: soft-light;
}

/* Tipografia base */
body {
  line-height: 1.6;
}

p,
li {
  font-size: 0.95rem;
}

/* Bottoni 8-bit */
.btn-8bit {
  border: 3px solid #e4e4e7;
  box-shadow:
    0 0 0 3px #020617,
    4px 4px 0 #020617;
  transition:
    transform 0.08s steps(2, end),
    box-shadow 0.08s steps(2, end),
    filter 0.12s ease-out;
}

.btn-8bit:hover {
  transform: translate(-3px, -3px);
  box-shadow:
    0 0 0 3px #020617,
    6px 6px 0 #020617;
  filter: brightness(1.08);
}

.btn-8bit:active {
  transform: translate(1px, 1px);
  box-shadow:
    0 0 0 3px #020617,
    2px 2px 0 #020617;
}

/* Card pixel */
.pixel-card {
  transition:
    transform 0.1s steps(2, end),
    box-shadow 0.1s steps(2, end);
}

.pixel-card:hover {
  transform: translate(-3px, -3px);
  box-shadow:
    0 0 0 3px #020617,
    6px 6px 0 #020617;
}

/* Pixel dots animati */
@keyframes pixelBlink {
  0%,
  20%,
  100% {
    opacity: 0.25;
  }
  10% {
    opacity: 1;
  }
}

.pixel-dot {
  width: 8px;
  height: 8px;
  animation: pixelBlink 2.4s infinite steps(2, end);
}

.pixel-dot:nth-child(2) {
  animation-duration: 3s;
  animation-delay: 0.3s;
}

.pixel-dot:nth-child(3) {
  animation-duration: 3.4s;
  animation-delay: 0.6s;
}

.pixel-dot:nth-child(4) {
  animation-duration: 2.8s;
  animation-delay: 0.9s;
}

/* Animazione hero */
@keyframes pixelHeroIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-pixel-hero {
  animation: pixelHeroIn 0.5s ease-out 0.05s both;
}

/* Thumbs portfolio 8-bit style */
.project-thumb {
  border: 2px solid #3f3f46;
  box-shadow:
    0 0 0 2px #020617,
    3px 3px 0 #020617;
  background: #000;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* Space Invaders game */
.space-bg {
  position: relative;
  padding: 16px 20px 20px;
  background: radial-gradient(circle at 50% 0%, #1f2937 0, #020617 55%, #000 100%);
  overflow: hidden;
  border: 2px solid #27272a;
  box-shadow:
    0 0 0 2px #020617,
    3px 3px 0 #020617;
}

.space-bg::before,
.space-bg::after {
  content: "";
  position: absolute;
  inset: -80%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(248, 250, 252, 0.7), transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(248, 250, 252, 0.5), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(248, 250, 252, 0.4), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(248, 250, 252, 0.35), transparent);
  opacity: 0.5;
  animation: starsMove 12s linear infinite;
  pointer-events: none;
}

.space-bg::after {
  opacity: 0.25;
  animation-duration: 20s;
  animation-direction: reverse;
}

@keyframes starsMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(60px);
  }
}

.game-cell {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: transparent;
  border: none;
}

.game-cell-player {
  color: #facc15;
  text-shadow: 0 0 4px rgba(250, 204, 21, 0.6);
}

.game-cell-invader {
  color: #22c55e;
  text-shadow: 0 0 4px rgba(34, 197, 94, 0.7);
}

.game-cell-bullet {
  color: #e5e7eb;
  text-shadow: 0 0 4px rgba(248, 250, 252, 0.7);
}

/* Dots carosello */
.carousel-dot {
  width: 8px;
  height: 8px;
  border: 1px solid #52525b;
  background-color: #020617;
}

.carousel-dot-active {
  background-color: #facc15;
  border-color: #facc15;
}