/* ==========================================================================
   Stylish English — Performance layer (css/performance.css)
   ========================================================================== */

/* 1. Skip rendering of landing sections until they approach the viewport.
   "auto" in contain-intrinsic-size makes the browser remember each
   section's real height after its first render, so the scrollbar settles
   instead of jumping. The numbers are only first-visit placeholders. */
#features,
#curriculum,
.landing-footer {
  content-visibility: auto;
}
#features      { contain-intrinsic-size: auto 1400px; }
#curriculum    { contain-intrinsic-size: auto 1500px; }
.landing-footer{ contain-intrinsic-size: auto 520px; }

/* 2. Pause decorative infinite animations while they are off-screen.
   app.js toggles .is-offscreen with an IntersectionObserver. */
.is-offscreen,
.is-offscreen::before,
.is-offscreen::after,
.is-offscreen * ,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* 3. Respect the OS "reduce motion" setting site-wide for decorative loops */
@media (prefers-reduced-motion: reduce) {
  .orb-1, .orb-2, .orb-3,
  .hero-bg-alexa-avatar, .alexa-avatar-glow, .hero-avatar-wrap::before,
  .curriculum-timeline-track::before, .timeline-node-dot::after,
  #hero-start-btn::after, .platform-avatar-glow, #progress-bar {
    animation: none !important;
  }
}