/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS - Keyframes & GSAP Helpers
   Awwwards-tier motion design
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   ENTRANCE ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes scale-in-bounce {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* ─────────────────────────────────────────────────────────────────
   ATTENTION ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes breathe {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(var(--color-primary-rgb), 0.25),
      0 0 0 0 rgba(var(--color-primary-rgb), 0.4);
  }
  50% {
    box-shadow:
      0 4px 24px rgba(var(--color-primary-rgb), 0.35),
      0 0 0 8px rgba(var(--color-primary-rgb), 0);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.5);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

@keyframes float-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────
   CTA SHIMMER EFFECT
   ───────────────────────────────────────────────────────────────── */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  border-radius: inherit;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   GSAP SCROLL TRIGGER HELPERS
   ───────────────────────────────────────────────────────────────── */

/* Initial hidden state for reveal animations */
.reveal-hidden {
  opacity: 0;
  transform: translateY(40px);
}

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

/* Stagger animation helpers - GSAP sets initial state, CSS provides fallback */
.stagger-item {
  /* Initial state set by GSAP, items visible by default for no-JS fallback */
}

.stagger-item.revealed,
.gsap-ready .stagger-item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-spring);
}

/* Scale reveal */
.scale-reveal {
  opacity: 0;
  transform: scale(0.95);
}

.scale-reveal.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ─────────────────────────────────────────────────────────────────
   HERO ANIMATIONS
   ───────────────────────────────────────────────────────────────── */

/* Hero 3D container subtle float */
.hero-3d-container {
  animation: float 6s ease-in-out infinite;
}

/* Hero Globe container animation (impex) */
.hero-globe-container {
  animation: float 8s ease-in-out infinite;
}

/* Hero Badge entrance */
.hero-badge {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  animation: badge-enter 0.6s var(--ease-spring) 0.1s forwards;
}

@keyframes badge-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero title entrance */
.hero-title {
  opacity: 0;
  transform: translateY(30px);
  animation: fade-in-up 0.8s var(--ease-spring) 0.2s forwards;
}

/* Hero subtitle entrance */
.hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.6s var(--ease-spring) 0.4s forwards;
}

/* Hero CTA entrance */
.hero-cta {
  opacity: 1;
  transform: translateY(0);
  animation: fade-in-up 0.6s var(--ease-spring) 0.6s both;
}

/* Hero phone link entrance */
.hero-phone {
  opacity: 0;
  animation: fade-in 0.5s var(--ease-out) 0.8s forwards;
}

/* Hero Stats strip entrance (impex) */
.hero-stats {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.6s var(--ease-spring) 0.5s forwards;
}

/* Hero Track button entrance */
.hero-track {
  opacity: 0;
  transform: translateY(15px);
  animation: fade-in-up 0.5s var(--ease-spring) 0.7s forwards;
}

/* ─────────────────────────────────────────────────────────────────
   COMPONENT-SPECIFIC ANIMATIONS
   ───────────────────────────────────────────────────────────────── */

/* FAB breathing glow */
.contact-fab .fab-button {
  animation: breathe 3s ease-in-out infinite;
}

/* Review carousel dot active */
.review-dot.active {
  animation: dot-expand 0.3s var(--ease-spring) forwards;
}

@keyframes dot-expand {
  from { width: 8px; }
  to { width: 24px; }
}

/* Package card expand */
.package-card.expanded {
  animation: card-expand 0.4s var(--ease-spring) forwards;
}

@keyframes card-expand {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* FAQ chevron rotate */
.faq-item .faq-icon {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

/* FAQ answer expand */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-spring);
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

/* Booking sheet animations */
.booking-sheet {
  visibility: hidden;
  pointer-events: none;
}

.booking-sheet.active {
  visibility: visible;
  pointer-events: auto;
}

.booking-backdrop {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.booking-sheet.active .booking-backdrop {
  opacity: 1;
}

.booking-container {
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-spring);
}

.booking-sheet.active .booking-container {
  transform: translateY(0);
}

/* Nav item active indicator - removed */

/* Trust strip pills entrance */
.trust-strip .pill {
  opacity: 0;
  transform: translateY(10px);
}

.trust-strip.loaded .pill {
  opacity: 1;
  transform: translateY(0);
}

.trust-strip.loaded .pill:nth-child(1) { transition-delay: 0ms; }
.trust-strip.loaded .pill:nth-child(2) { transition-delay: 50ms; }
.trust-strip.loaded .pill:nth-child(3) { transition-delay: 100ms; }
.trust-strip.loaded .pill:nth-child(4) { transition-delay: 150ms; }

/* Gallery image hover */
.gallery-item {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   PAGE TRANSITIONS
   ───────────────────────────────────────────────────────────────── */
.page {
  display: none;
  opacity: 0;
}

.page.active {
  display: block;
  animation: fade-in-right 0.4s var(--ease-spring) forwards;
}

.page.exiting {
  animation: fade-out-left 0.3s var(--ease-in) forwards;
}

@keyframes fade-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* ─────────────────────────────────────────────────────────────────
   LOADING STATES
   ───────────────────────────────────────────────────────────────── */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* App loading state */
.app-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  z-index: var(--z-max);
}

.app-loading.fade-out {
  animation: fade-out 0.5s var(--ease-out) forwards;
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   MICRO-INTERACTIONS
   ───────────────────────────────────────────────────────────────── */

/* Button press */
.btn:active,
.interactive:active {
  transform: scale(0.97);
  transition: transform 0.1s var(--ease-out);
}

/* Card lift on hover */
.card-interactive {
  transition:
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-out);
}

.card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-4);
}

/* Input focus animation */
.input:focus {
  animation: input-focus 0.2s var(--ease-out);
}

@keyframes input-focus {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.3); }
  100% { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); }
}

/* Star rating animation */
.star {
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.star.filled {
  animation: star-pop 0.3s var(--ease-bounce);
}

@keyframes star-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   UX POLISH - Wow Moments
   ───────────────────────────────────────────────────────────────── */

/* Ripple effect */
@keyframes ripple-expand {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Confetti */
@keyframes confetti-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), calc(var(--ty) + 100vh)) rotate(720deg);
    opacity: 0;
  }
}

/* Success burst */
@keyframes burst-ring {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes burst-check {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Toast animations */
@keyframes toast-enter {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-exit {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}

/* Celebration overlay */
@keyframes celebration-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes celebration-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes celebration-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.celebration-content {
  text-align: center;
  opacity: 0;
}

.celebration-icon {
  margin-bottom: var(--space-6);
  animation: float 2s ease-in-out infinite;
}

.celebration-icon svg {
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.5));
}

.celebration-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.celebration-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-elevated) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
}

/* Input focus glow */
.input:focus {
  box-shadow:
    0 0 0 3px rgba(var(--color-primary-rgb), 0.15),
    0 0 20px rgba(var(--color-primary-rgb), 0.1);
}

/* Enhanced hover states */
.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: scale(0.97) translateY(0);
}

/* Card magnetic hover effect */
.card-magnetic {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shine sweep effect for premium elements */
.shine-sweep {
  position: relative;
  overflow: hidden;
}

.shine-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shine-sweep 3s ease-in-out infinite;
}

@keyframes shine-sweep {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Number counter animation */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────
   STAT COUNTER ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
[data-count] {
  transition: color 0.3s ease;
}

[data-count].counting {
  color: var(--color-primary);
}

[data-count].counted {
  animation: count-pulse 0.4s ease-out;
}

@keyframes count-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-3d-container,
  .contact-fab .fab-button,
  .btn-primary::before {
    animation: none !important;
  }

  .page.active {
    opacity: 1;
    transform: none;
  }
}