/* Capo Rosso — Coming Soon
   16-Bit Pixel-Art Startbildschirm */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  background: #000000;
  overflow-x: hidden; /* nie horizontal scrollen */
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 30px);
  padding: clamp(16px, 3vh, 32px) clamp(20px, 6vw, 48px);
}

/* Pixel-Grafiken: harte Kanten, kein Weichzeichnen, keine Interpolation */
img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Jedes Bild wird ausschliesslich ueber EINE Achse (width) skaliert,
   height bleibt immer auto -> Seitenverhaeltnis kann rechnerisch nie
   verzerrt werden. Keine gleichzeitig gesetzten festen width/height-
   Paare, keine max-height-Gegenregeln, kein transform: scaleX/scaleY. */

.logo {
  width: min(80vw, 820px);
  height: auto;
  object-fit: contain;
}

/* Pizza: deutlich kleiner als das Logo */
.pizza {
  width: min(9vw, 90px);
  height: auto;
  object-fit: contain;
  transform-origin: 50% 50%;
  animation: pizzaRotate 6s steps(8, end) infinite;
}

@keyframes pizzaRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.coming-soon {
  width: min(55vw, 560px);
  height: auto;
  object-fit: contain;
}

.van {
  width: min(78vw, 880px);
  height: auto;
  object-fit: contain;
}

/* Instagram: nur das Pixel-Logo, kein Rahmen/Button/Text */
.instagram-link {
  display: block;
  line-height: 0; /* kein Extra-Abstand durch inline-Baseline */
  margin-top: clamp(6px, 1.8vh, 20px); /* Abstand zum Van */
  background: none;
  border: none;
  outline: none;
}

.instagram-link img {
  width: clamp(30px, 4vw, 42px);
  height: auto;
  object-fit: contain;
  display: block;
}

.instagram-link:hover img,
.instagram-link:focus-visible img {
  opacity: 0.8;
}

.instagram-link:focus-visible {
  outline: 2px dashed #ffffff;
  outline-offset: 4px;
}

/* Reduzierte-Bewegung-Praeferenz respektieren, Stil bleibt gleich,
   nur die Rotation wird gestoppt */
@media (prefers-reduced-motion: reduce) {
  .pizza {
    animation: none;
  }
}

/* Mobile: eigene, grosszuegigere vw-basierte Groessen.
   Bereits gut funktionierendes mobiles Layout bleibt vom Prinzip her
   erhalten, Werte moeglichst nah an der bisherigen Darstellung. */
@media (max-width: 600px) {
  .logo {
    width: 90vw;
    height: auto;
  }

  .pizza {
    width: 12vw;
    max-width: 80px;
    height: auto;
  }

  .coming-soon {
    width: 65vw;
    height: auto;
  }

  .van {
    width: 80vw;
    height: auto;
  }

  .instagram-link img {
    width: clamp(26px, 8vw, 34px);
  }
}