/* ============================================
   ARRA WISATA - ANIMATIONS STYLESHEET
   Subtle, professional animations
   ============================================ */

/* -------------------- 
   KEYFRAME ANIMATIONS
   -------------------- */

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

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Pulse (for countdown) */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}


/* -------------------- 
   HERO ANIMATIONS
   -------------------- */
.hero-content {
  animation: fadeInUp 0.8s ease-out;
}

.hero-title {
  animation: fadeInUp 0.6s ease-out;
}

.hero-subtitle {
  animation: fadeInUp 0.6s ease-out 0.1s backwards;
}

.hero-description {
  animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.hero-badges {
  animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

.hero-cta {
  animation: fadeInUp 0.6s ease-out 0.4s backwards;
}


/* -------------------- 
   COUNTDOWN ANIMATION
   -------------------- */
.countdown-value {
  transition: transform 0.3s ease;
}

.countdown-item:hover .countdown-value {
  transform: scale(1.05);
}


/* -------------------- 
   BUTTON HOVER EFFECTS
   -------------------- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.btn:hover::after {
  width: 300px;
  height: 300px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(227, 30, 36, 0.3);
}

.btn-secondary:hover {
  transform: translateY(-2px);
}


/* -------------------- 
   CARD HOVER EFFECTS
   -------------------- */
.stat-card,
.pricing-card,
.partner-item,
.about-card {
  transition: transform var(--transition-base), 
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.stat-card:hover,
.partner-item:hover {
  transform: translateY(-4px);
}

.pricing-card:hover {
  transform: translateY(-8px);
}


/* -------------------- 
   LINK HOVER EFFECTS
   -------------------- */
.navbar-link {
  position: relative;
}

.navbar-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.navbar-link:hover::after,
.navbar-link.active::after {
  width: 100%;
}

/* Footer link hover */
.footer-nav a,
.footer-contact-item a {
  position: relative;
}

.footer-nav a::after,
.footer-contact-item a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-white);
  transition: width var(--transition-base);
}

.footer-nav a:hover::after,
.footer-contact-item a:hover::after {
  width: 100%;
}


/* -------------------- 
   FORM INPUT FOCUS
   -------------------- */
.form-input {
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-input:focus {
  box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.1);
}


/* -------------------- 
   TIMELINE ANIMATION
   -------------------- */
.timeline-marker {
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.timeline-item:hover .timeline-marker {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(30, 42, 94, 0.2);
}


/* -------------------- 
   SCROLL REVEAL CLASSES
   -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* -------------------- 
   LOADING SPINNER
   -------------------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}


/* -------------------- 
   PARTNER LOGO GRAYSCALE
   -------------------- */
.partner-logo {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--transition-base),
              opacity var(--transition-base);
}

.partner-item:hover .partner-logo {
  filter: grayscale(0%);
  opacity: 1;
}