/* ==========================================================================
   Palmyra: Motion: keyframes, hero entrance, scroll reveals, marquee
   Hidden "before" states only apply when JS is running (html.js), so the
   page stays fully readable without scripts.
   ========================================================================== */

/* ---------- Keyframes ---------- */

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-settle {
  from {
    scale: 1.12;
    opacity: 0.4;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes scroll-cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80%,
  100% {
    transform: translateY(18px);
    opacity: 0;
  }
}

@keyframes marquee-ltr {
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-rtl {
  to {
    transform: translateX(50%);
  }
}

@keyframes fab-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ---------- Hero entrance (staggered by --enter-order) ---------- */

.js .hero__enter {
  animation: enter-up 900ms var(--ease-out) both;
  animation-delay: calc(120ms + var(--enter-order, 0) * 110ms);
}

/* Slow cinematic settle of the jet photo (uses 'scale' so JS parallax can own 'translate') */
.js .hero__image {
  animation: hero-settle 2.8s var(--ease-out) both;
}

.hero__scroll-dot {
  animation: scroll-cue 2s var(--ease-in-out) infinite;
}

/* ---------- Marquee ---------- */

.marquee__track--running {
  animation: marquee-ltr 42s linear infinite;
}

[dir="rtl"] .marquee__track--running {
  animation-name: marquee-rtl;
}

.marquee:hover .marquee__track--running {
  animation-play-state: paused;
}

/* ---------- Scroll reveal ----------
   [data-reveal]            rise up
   [data-reveal="start"]    slide in from the reading-start side
   [data-reveal="end"]      slide in from the reading-end side
   --reveal-delay is set by JS for children of [data-reveal-group]           */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(2.25rem);
  transition:
    opacity 900ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal="start"] {
  transform: translateX(-3rem);
}

.js [data-reveal="end"] {
  transform: translateX(3rem);
}

.js [dir="rtl"] [data-reveal="start"],
.js[dir="rtl"] [data-reveal="start"] {
  transform: translateX(3rem);
}

.js[dir="rtl"] [data-reveal="end"] {
  transform: translateX(-3rem);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Once revealed, cards hand transform back to their own hover transitions */
.js .service-card.is-settled,
.js .mini-card.is-settled {
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* Language change: quick cross-fade of the whole page content */
.is-switching-lang main,
.is-switching-lang .site-header__inner,
.is-switching-lang .site-footer {
  opacity: 0;
  transition: opacity 160ms ease-out;
}

main,
.site-header__inner,
.site-footer {
  transition: opacity 320ms var(--ease-out);
}

/* ---------- Reduced motion: show everything, move nothing ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal],
  .js[dir="rtl"] [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee__track--running {
    animation: none;
  }
}