/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* 
 CLIP PATHS (Diagonal shapes)
 - Mobile: Subtle cut (2-3%) to avoid hiding text.
 - Desktop: Aggressive cut (15%) for the flyer look.
*/
.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%);
}
.clip-diagonal-reverse {
  clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 768px) {
  .clip-diagonal {
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }
  .clip-diagonal-reverse {
      clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  }
}

/* SIMPLE ANIMATIONS (Instead of standard Tailwind plugins which need build) */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

/* Fade In Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-zoom-in {
  animation: zoomIn 0.8s ease-out forwards;
  animation-delay: 0.2s;
  opacity: 0; /* Start hidden */
}