@tailwind base;
@tailwind components;
@tailwind utilities;

/* ----------------------------
   Animated gradient (HeroHeader)
---------------------------- */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientMove 12s ease infinite;
}

/* ----------------------------
   Aviation-themed motion background
---------------------------- */
@keyframes runwayMove {
  0% { background-position: 0% 0%; transform: translateY(0px); }
  100% { background-position: 0% 100%; transform: translateY(-20px); }
}
.aviation-runway {
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to bottom, rgba(24,24,27,0.08) 0px, rgba(24,24,27,0.08) 1px, transparent 1px, transparent 18px),
    linear-gradient(to bottom, rgba(24,24,27,0.06) 0px, rgba(24,24,27,0.06) 1px, transparent 1px, transparent 44px),
    linear-gradient(to right, rgba(24,24,27,0.10) 0px, rgba(24,24,27,0.10) 1px, transparent 1px, transparent 120px);
  background-size: 100% 18px, 100% 44px, 120px 100%;
  animation: runwayMove 10s linear infinite;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.05), transparent);
}

/* ----------------------------
   Section transition animation
---------------------------- */
@keyframes sectionIn {
  0% { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.animate-sectionIn { animation: sectionIn 260ms ease-out both; }

/* ----------------------------
   Gentle floating blobs
---------------------------- */
@keyframes floatSlow {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(14px, -12px) scale(1.03); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes floatSlow2 {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-12px, 14px) scale(1.03); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-floatSlow { animation: floatSlow 10s ease-in-out infinite; }
.animate-floatSlow2 { animation: floatSlow2 12s ease-in-out infinite; }

/* Optional: avoid horizontal scroll bars due to background effects */
html, body { overflow-x: hidden; }