/* ============================================================
   ANIMATIONS & SCROLL TRANSITIONS
   ============================================================ */

/* ---- Language switch fade ---- */
/*
  body.lang-switching fades all translatable elements to 0, swaps text,
  then removes the class so they fade back in.
  Uses body selector for higher specificity than [data-animate] rules.
*/
body.lang-switching [data-i18n],
body.lang-switching [data-i18n-placeholder] {
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
}

/* Fade-in: when .lang-switching is removed, elements transition back to opacity 1 */
[data-i18n],
[data-i18n-placeholder],
[data-lang-show] {
  transition: opacity 0.22s ease;
}

/* Also fade the lang-show blocks during switch */
body.lang-switching [data-lang-show] {
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
}

/* Fade up (default reveal) */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-left"] {
  transform: translateX(-24px);
}

[data-animate="fade-right"] {
  transform: translateX(24px);
}

[data-animate="fade-up"] {
  transform: translateY(24px);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="scale"] {
  transform: scale(0.92);
}

[data-animate].in-view {
  opacity: 1;
  transform: none;
}

/* Stagger delays for children */
[data-stagger] > *:nth-child(1)  { transition-delay: 0ms; }
[data-stagger] > *:nth-child(2)  { transition-delay: 80ms; }
[data-stagger] > *:nth-child(3)  { transition-delay: 160ms; }
[data-stagger] > *:nth-child(4)  { transition-delay: 240ms; }
[data-stagger] > *:nth-child(5)  { transition-delay: 320ms; }
[data-stagger] > *:nth-child(6)  { transition-delay: 400ms; }
[data-stagger] > *:nth-child(7)  { transition-delay: 480ms; }
[data-stagger] > *:nth-child(8)  { transition-delay: 560ms; }

/* Page load entrance for hero */
.hero--loaded .hero__badge {
  animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}

.hero--loaded .hero__title {
  animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}

.hero--loaded .hero__subtitle {
  animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.40s;
}

.hero--loaded .hero__buttons {
  animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.55s;
}

.hero--loaded .hero__stats {
  animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.65s;
}

.hero--loaded .hero__visual {
  animation: slideLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.20s;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Spin animation for loader / icons */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulse animation (kept for future use) */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(53, 91, 52, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(53, 91, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 91, 52, 0); }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
  }
}