@import "tailwindcss";

/* Hero Section – Hintergrund-Animation */
@keyframes gradient-shift {
  0%, 100% { opacity: 1; background-position: 0% 50%; }
  50% { opacity: 0.95; background-position: 100% 50%; }
}

@keyframes grid-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-gradient-bg {
  background: linear-gradient(135deg, rgb(250 250 250) 0%, rgb(245 245 245) 50%, rgb(250 250 250) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

.dark .animate-gradient-bg {
  background: linear-gradient(135deg, rgb(23 23 23) 0%, rgb(38 38 38) 50%, rgb(23 23 23) 100%);
  background-size: 200% 200%;
}

.animate-grid-pulse {
  animation: grid-pulse 4s ease-in-out infinite;
}

.hero-content-in {
  animation: fade-in-up 0.8s ease-out forwards;
}

.hero-content-in:nth-child(9) { animation-delay: 0.1s; opacity: 0; }
.hero-content-in:nth-child(10) { animation-delay: 0.3s; opacity: 0; }
.hero-content-in:nth-child(11) { animation-delay: 0.5s; opacity: 0; }

.hero-submit-btn {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.hero-submit-btn:hover {
  box-shadow: 0px -1px 0px 0px #FFFFFF50 inset, 0px 1px 0px 0px #FFFFFF50 inset, 0 0 20px rgba(255,255,255,0.2);
}

.dark .hero-submit-btn:hover {
  box-shadow: 0px -1px 0px 0px #00000030 inset, 0px 1px 0px 0px #00000030 inset, 0 0 20px rgba(0,0,0,0.2);
}

.hero-submit-btn:active {
  transform: scale(0.98);
}

/* Rand-Elemente: Scroll-Animation (Marquee) */
@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.hero-marquee-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  animation: marquee-scroll 25s linear infinite;
}

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

.hero-marquee-container {
  overflow: hidden;
  display: flex;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.dark .hero-marquee-container {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* Rand: Testimonial-Karten – Einblend-Animation (nur opacity, Rotation bleibt per inline) */
@keyframes hero-edge-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-edge-card {
  animation: hero-edge-in 0.6s ease-out forwards;
}

.hero-edge-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
.hero-edge-card:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
.hero-edge-card:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
.hero-edge-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
.hero-edge-card:nth-child(5) { animation-delay: 0.55s; opacity: 0; }
.hero-edge-card:nth-child(6) { animation-delay: 0.7s; opacity: 0; }

@media (max-width: 1023px) {
  .hero-edge-card { opacity: 0.2 !important; }
}

/* Base */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}