/* ===== 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.55s ease, transform 0.6s 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.6s ease 0.15s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* 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.65s ease 0.25s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

body.page-loading .hero-app-shot {
  animation: none !important;
}

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

/* Scroll-triggered sections */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

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

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

  body.page-loading #header,
  body.page-ready #header,
  body.page-loading .hero-text,
  body.page-ready .hero-text,
  body.page-loading .hero-visual,
  body.page-ready .hero-visual,
  .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;
  }
}