/* ============================================
   SMA Waha Landing Page - Main Styles
   ============================================ */

/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }

/* Keyframe Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,204,21,0.4); }
  50% { box-shadow: 0 0 30px 10px rgba(250,204,21,0.15); }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes blob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

/* Animation Classes */
.anim-fade-up { animation: fadeUp 0.8s ease-out both; }
.anim-fade-in { animation: fadeIn 0.6s ease-out both; }
.anim-scale-in { animation: scaleIn 0.7s ease-out both; }
.anim-slide-left { animation: slideLeft 0.8s ease-out both; }
.anim-slide-right { animation: slideRight 0.8s ease-out both; }
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.anim-blob { animation: blob 8s ease-in-out infinite; }

/* Animation Delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* Hero Background */
.hero-bg {
  background: linear-gradient(135deg, #0f2557 0%, #1a3a8f 40%, #2563eb 100%);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Card Hover */
.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px -12px rgba(26,58,143,0.25);
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245,158,11,0.4);
}

/* Marquee */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* Scroll Reveal */
.scroll-reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

/* Nav Link */
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: #facc15;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Counter */
.counter { font-family: 'Sora', sans-serif; }

/* Blob Shape */
.blob-shape {
  position: absolute;
  background: rgba(250,204,21,0.08);
  animation: blob 8s ease-in-out infinite;
  filter: blur(40px);
}

/* Tab Active */
.tab-active {
  background: linear-gradient(135deg, #1a3a8f, #2563eb);
  color: white;
  box-shadow: 0 4px 20px rgba(26,58,143,0.3);
}

/* SVG icon inline fix */
.icon-inline { display: inline-block; vertical-align: middle; }

/* Hide Scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}