/* =========================================================
   ProfReturns – eigene Stile & Animationen
   Farben werden zentral in includes/head.php (Tailwind-Config)
   gesetzt. Hier liegen Animationen und Feinschliff.
   ========================================================= */

:root {
  --background: #0f1f1c;
  --foreground: #ffffff;
  --card: #152926;
  --primary: #1a6b5a;
  --secondary: #0d1714;
  --muted: #1a3330;
  --muted-foreground: #94a3a0;
  --accent: #2dd4a8;
  --accent-foreground: #0f1f1c;
  --border: rgba(255, 255, 255, 0.1);
  --radius: 0.75rem;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

.text-balance { text-wrap: balance; }

/* ---------- Lade-Animationen (Hero etc.) ---------- */
@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.float-slow   { animation: float 8s ease-in-out infinite; }
.float-medium { animation: float 5s ease-in-out infinite; }
.float-fast   { animation: float 3s ease-in-out infinite; }

@keyframes subtle-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.animate-subtle-bounce { animation: subtle-bounce 3s ease-in-out infinite; }

/* ---------- Scroll-Animationen ---------- */
@keyframes slide-in-left {
  0%   { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  0%   { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes blur-in {
  0%   { opacity: 0; filter: blur(10px); }
  100% { opacity: 1; filter: blur(0); }
}

.animate-slide-in-left  { animation: slide-in-left  0.8s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.animate-slide-in-right { animation: slide-in-right 0.8s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.animate-scale-in       { animation: scale-in       0.6s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.animate-blur-in        { animation: blur-in        0.8s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }

/* Verzögerungen für gestaffelte Effekte */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Elemente, die per Scroll eingeblendet werden: erst unsichtbar */
.reveal { opacity: 0; }
.reveal.is-visible { opacity: 1; }

/* ---------- Hover-Effekte ---------- */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }

/* ---------- Marquee (Lauftext) ---------- */
@keyframes marquee-left  { 0% { transform: translateX(0); }      100% { transform: translateX(-50%); } }
@keyframes marquee-right { 0% { transform: translateX(-50%); }   100% { transform: translateX(0); } }
.animate-marquee-left  { animation: marquee-left  25s linear infinite; }
.animate-marquee-right { animation: marquee-right 25s linear infinite; }