/* STAFFR — Phase 2 animations & custom utilities */

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes morph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-rotate-slow { animation: rotate-slow 30s linear infinite; }
.animate-gradient { animation: gradient 8s ease infinite; }
.animate-morph { animation: morph 12s ease-in-out infinite; }
.animate-ping { animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

.glass-dark { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.card-tilt { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); transform-style: preserve-3d; }
.card-tilt:hover { transform: translateY(-4px); }

.reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-up { transform: translateY(24px); }
.reveal-left { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed { opacity: 1; transform: none; }

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

/* Logo marquee — links naar rechts, langzaam, naadloze loop */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 60s linear infinite;
}
@keyframes logo-scroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-marquee img {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo-marquee img:hover {
  filter: grayscale(0%);
  opacity: 1;
}