/* ==========================================================================
   Home page (index.php)
   ========================================================================== */

@layer base {
  html, body { scroll-behavior: smooth; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-2deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}

.animate-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.animate-float-reverse { animation: floatReverse 7s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

/* Hero 3D flip card */
.perspective-1000 { perspective: 1000px; }
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.card-flipped { transform: rotateY(180deg); }
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
.card-back { transform: rotateY(180deg); }