/* ===== Page entrance — GPU-friendly (opacity + transform only) ===== */
body.page-loading {
  overflow: hidden;
}

body.page-loading .hero-bg-scene,
body.page-loading .hero-bg-scene * {
  animation-play-state: paused !important;
}

/* Header */
body.page-loading #header {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}

body.page-ready #header {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.32s ease-out, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero text block */
body.page-loading .hero-text {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

body.page-ready .hero-text {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.35s ease-out 0.04s, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}

/* Hero phone */
body.page-loading .hero-visual {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.94);
}

body.page-ready .hero-visual {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.38s ease-out 0.08s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

body.page-loading .hero-phone-img--tilt {
  animation: none !important;
}

body.page-ready .hero-phone-img--tilt {
  animation: hero-phone-float 6s ease-in-out infinite;
  animation-delay: 1s;
}

body.page-ready .hero-phone--exchange .hero-phone-img--tilt {
  animation-delay: 1.8s;
}

@keyframes hero-phone-float-mobile {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@media (max-width: 768px) {
  body.page-ready .hero-phone-img--tilt {
    animation: hero-phone-float-mobile 6.5s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  body.page-ready .hero-phone--exchange .hero-phone-img--tilt {
    animation-delay: 1.4s;
  }

  body.page-ready.page-from-loader .hero-phone-img--tilt {
    animation-delay: 0.2s;
  }

  body.page-ready.page-from-loader .hero-phone--exchange .hero-phone-img--tilt {
    animation-delay: 0.45s;
  }
}

/* After splash loader — show content immediately (user already waited) */
body.page-ready.page-from-loader #header,
body.page-ready.page-from-loader .hero-text,
body.page-ready.page-from-loader .hero-visual {
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
  transition-delay: 0s;
}

body.page-ready.page-from-loader .hero-phone-img--tilt {
  animation-delay: 0.2s;
}

body.page-ready.page-from-loader .hero-phone--exchange .hero-phone-img--tilt {
  animation-delay: 0.35s;
}

/* Hero bottom board — entrance */
body.page-loading .hero-bottom-row {
  opacity: 0;
}

body.page-loading .hero-bottom-box--a,
body.page-loading .hero-bottom-box--b {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
}

body.page-loading .hero-bottom-spacer,
body.page-loading .hero-motion-logo {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

body.page-loading .hero-board-skyline {
  opacity: 0;
  transform: translateX(-50%) translate3d(0, 14px, 0);
}

body.page-loading .hero-payment-badges {
  opacity: 0;
}

body.page-loading .hero-bottom-flags .hero-flag {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

body.page-ready .hero-bottom-row {
  opacity: 1;
  transition: opacity 0.42s ease-out 0.1s;
}

body.page-ready .hero-bottom-box--a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.48s ease-out 0.16s,
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}

body.page-ready .hero-bottom-box--b {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.48s ease-out 0.26s,
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.26s;
}

body.page-ready .hero-bottom-spacer.is-placed,
body.page-ready .hero-motion-logo.is-placed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.4s ease-out 0.2s,
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

body.page-ready .hero-board-skyline {
  opacity: 1;
  transform: translateX(-50%) translate3d(0, 0, 0);
  transition:
    opacity 0.4s ease-out 0.2s,
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

body.page-ready .hero-payment-badges.is-placed {
  opacity: 1;
  transition: opacity 0.25s ease-out 0.28s;
}

body.page-ready .hero-bottom-flags .hero-flag.is-placed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.5s ease-out 0.24s,
    transform 0.54s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
}

body.page-ready.page-from-loader .hero-bottom-box--a,
body.page-ready.page-from-loader .hero-bottom-box--b {
  transition-duration: 0.2s;
  transition-delay: 0.05s;
}

body.page-ready.page-from-loader .hero-bottom-spacer.is-placed,
body.page-ready.page-from-loader .hero-board-skyline,
body.page-ready.page-from-loader .hero-motion-logo.is-placed,
body.page-ready.page-from-loader .hero-bottom-flags .hero-flag.is-placed {
  transition-duration: 0.18s;
  transition-delay: 0.08s;
}

/* Scroll-triggered sections */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.55s ease var(--reveal-delay, 0s),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.features .service-box.scroll-reveal.is-visible,
.about-promo-wrap .about-promo-card.scroll-reveal.is-visible {
  transition-duration: 0.48s;
}

/* Mobile — spacer + flags above flight header */
@media (max-width: 768px) {
  body.page-ready .hero-board--mobile-top .hero-bottom-spacer.is-placed {
    transition-delay: 0.12s;
  }

  body.page-ready .hero-board--mobile-top .hero-bottom-flags .hero-flag.is-placed {
    transition-delay: 0.16s;
  }

  body.page-ready .hero-board--mobile-top .hero-bottom-box--a {
    transition-delay: 0.22s;
  }

  body.page-ready .hero-board--mobile-top .hero-bottom-box--b {
    transition-delay: 0.32s;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-loading {
    overflow: auto;
  }

  body.page-loading #header,
  body.page-ready #header {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.page-loading .hero-text,
  body.page-ready .hero-text,
  body.page-loading .hero-visual,
  body.page-ready .hero-visual,
  body.page-loading .hero-bottom-row,
  body.page-ready .hero-bottom-row,
  body.page-loading .hero-bottom-box--a,
  body.page-ready .hero-bottom-box--a,
  body.page-loading .hero-bottom-box--b,
  body.page-ready .hero-bottom-box--b,
  body.page-loading .hero-bottom-spacer,
  body.page-ready .hero-bottom-spacer,
  body.page-loading .hero-bottom-flags .hero-flag,
  body.page-ready .hero-bottom-flags .hero-flag,
  body.page-loading .hero-payment-badges,
  body.page-ready .hero-payment-badges,
  body.page-ready .hero-payment-badges .hero-payment-badge,
  body.page-ready .hero-payment-badges .hero-payment-badge > img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.page-loading .hero-board-skyline,
  body.page-ready .hero-board-skyline {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    transition: none !important;
    animation: none !important;
  }

  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.page-loading .hero-bg-scene,
  body.page-loading .hero-bg-scene * {
    animation: none !important;
  }
}