/* ENGKANTO smooth-performance overrides — load LAST (after style.css / reviews.css / admin.css)
   Same look, much less GPU work. */

/* 1) BIGGEST LAG FIX: backdrop-filter (blur) behind cards/navbar was re-blurring the
      moving particle canvas every frame. Removed everywhere; backgrounds made a bit more solid instead. */
*, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.navbar            { background: linear-gradient(180deg, rgba(6, 27, 34, 0.97), rgba(4, 17, 22, 0.97)); }
.xbtn              { background: rgba(6, 24, 31, 0.82); }
.xfeat             { background: rgba(6, 23, 30, 0.78); }
.status-badge      { background: rgba(6, 24, 31, 0.82); }
.community-card    { background: linear-gradient(135deg, rgba(7, 30, 38, 0.9), rgba(4, 19, 25, 0.95)); }
.cta-btn-dark      { background: rgba(6, 24, 31, 0.86); }
.slider-nav        { background: rgba(4, 22, 28, 0.85); }
.rv-modal          { background: rgba(1, 8, 11, 0.9); }

/* 2) body background was "fixed" -> repaints on every scroll.
      The same top glow now lives inside the (already fixed) .gradient-overlay layer. */
body { background: var(--bg-dark); background-attachment: scroll; }
.gradient-overlay {
    background:
        linear-gradient(rgba(57, 240, 250, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 240, 250, 0.06) 1px, transparent 1px),
        radial-gradient(ellipse at center, transparent 50%, rgba(1, 8, 11, 0.62) 100%),
        radial-gradient(circle at 30% 20%, rgba(57, 240, 250, 0.08), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(57, 240, 250, 0.045), transparent 50%),
        radial-gradient(ellipse 90% 55% at 50% -8%, rgba(35, 218, 228, 0.10), transparent 70%);
    background-size: 60px 60px, 60px 60px, auto, auto, auto, auto;
    transform: translateZ(0);
}

/* 3) pulsing glows animated box-shadow (repaints every frame) -> animate opacity instead */
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes glowPulse   { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }

/* 5) let the browser skip painting the footer / reviews strip until near the screen */
.rv-track { contain: layout paint; }

/* 6) respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    /* (the floating dots stay visible: they are slow, small and drawn by JS) */
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}
/* 7) LOADING SCREEN: while the intro is showing, don't render the page layers hidden behind it
      (they come back the moment body.is-loading is removed, as the intro fades out) */
body.is-loading #particleCanvas,
body.is-loading .gradient-overlay,
body.is-loading .noise-overlay { visibility: hidden; }

/* keep the intro glow / logo on their own GPU layers so their animations stay smooth */
.intro-logo-wrap::before, .intro-logo { will-change: transform, opacity; }

/* 8) pause the rotating reviews strip while it is off-screen (class set by reviews.js) */
.rv-track.rv-offscreen .rv-inner { animation-play-state: paused; }