@tailwind base;
@tailwind components;
@tailwind utilities;

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

.glass {
  border-radius: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px -18px rgba(24, 24, 27, 0.12);
}

.safe-top {
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
}
.safe-bottom {
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

.min-h-dvh-safe {
  min-height: 100vh;
  min-height: 100dvh;
}

/* NEU: reines CSS-Konfetti fuer MatchOverlay (kein npm-Paket noetig, kein
   externer Request). Jedes Konfetti-Partikel ist ein kleines div mit
   individueller Startposition (per inline style von React gesetzt) und
   faellt per Keyframe-Animation nach unten, waehrend es sich dreht.
   will-change verbessert die Performance auf mobilen Geraeten, da viele
   Partikel gleichzeitig animiert werden. */
@keyframes confetti-fall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.4;
  }
}
.confetti-piece {
  position: absolute;
  top: 0;
  will-change: transform, opacity;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
/* Card Stack Hover-Animation (Start-Screen Hero-Visual) */
.card-stack:hover .card-back {
  transform: rotate(15deg) translateX(24px) translateY(8px);
}
.card-stack:hover .card-middle {
  transform: rotate(-12deg) translateX(-24px) translateY(4px);
}
.card-stack:hover .card-front {
  transform: translateY(-8px) scale(1.05);
}