/* ==========================================================================
   Performance — instant paint, GPU layers, below-fold deferral
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html.lenis,
  html.lenis body {
    height: auto;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }
}

/* GPU promotion for animated layers only */
.scroll-top__stage,
.landing-scene__canvas,
.landing-scene__float,
.hero--premium .hero__media-frame,
.hero--premium .hero__media-border,
.feature-card--premium.is-hovered,
.courses--premium .feature-card--course.is-hovered,
.teachers--premium .teacher-card--premium.is-hovered,
.showcase__stage.is-hovered,
.testimonial-card--premium:hover,
.pricing-regional-card.is-hovered {
  transform: translateZ(0);
}

/* Defer layout work for off-screen sections */
.features,
.showcase,
.courses--premium,
.teachers,
.how-it-works--premium,
.testimonials--premium,
.testimonials,
.pricing-regional,
.faq--premium,
.faq,
.cta-section--premium,
.contact--premium,
.contact,
.footer--premium {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Landing scroll — native scroll + content-visibility for smooth paint */
body.page-landing {
  scroll-behavior: auto;
  overscroll-behavior-y: none;
}

body.page-landing .landing-scene__canvas {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-landing .features,
  body.page-landing .showcase,
  body.page-landing .courses--premium,
  body.page-landing .teachers,
  body.page-landing .how-it-works--premium,
  body.page-landing .testimonials--premium,
  body.page-landing .testimonials,
  body.page-landing .pricing-regional,
  body.page-landing .faq--premium,
  body.page-landing .faq,
  body.page-landing .cta-section--premium,
  body.page-landing .contact--premium,
  body.page-landing .contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
}

.hero--premium {
  content-visibility: visible;
}

/* Faster font swap */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-display: swap;
}

/* Reduce paint on fixed chrome (disabled on mobile — breaks glass nav / drawer) */
@media (min-width: 768px) {
  .navbar {
    contain: layout style;
  }
}

.page-loader.is-hidden {
  display: none;
  pointer-events: none;
}
