/*
 * TopRank Tour & Travels - Animations Sheet
 * Pure CSS keyframe layouts and trigger classes
 */

/* Fade-in Entrance */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

/* Image Reveal Slide */
.reveal-wrapper {
  position: relative;
  overflow: hidden;
}

.reveal-image {
  transform: scale(1.1);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-wrapper.active .reveal-image {
  transform: scale(1);
  opacity: 1;
}

/* Floating Airplane Animation on Hero */
.hero-airplane {
  position: absolute;
  top: 15%;
  right: 10%;
  font-size: 2.5rem;
  color: var(--secondary-color);
  z-index: 2;
  opacity: 0.8;
  animation: floatPlane 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatPlane {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-30px, -20px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Background animated world map */
.hero-worldmap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
  animation: pulseMap 12s ease-in-out infinite;
}

@keyframes pulseMap {
  0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.12; transform: translate(-50%, -50%) scale(1.03); }
}

/* Floating elements logic */
.floating-icon {
  animation: floatIcon 4s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Page entrance animations */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  z-index: 10002;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.page-transition-overlay.trigger {
  transform: scaleX(1);
  transform-origin: right;
}

/* Card Zooming Hover Actions */
.card-zoom {
  overflow: hidden;
}

.card-zoom img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-zoom:hover img {
  transform: scale(1.1);
}

/* Ripple effect container styles */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Counter incremental trigger animations */
.counter-box {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.counter-box.active {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Delay Utilities */
.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }
.delay-400 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-500 { animation-delay: 500ms; transition-delay: 500ms; }