/* =====================================================================
   performance.css  —  Darijat TTS
   Load this LAST, after every other stylesheet (see README step 2).

   "Lite mode" = html.dv-lite. It is switched on by the small inline
   script in <head> for: phones, ALL tablets (every iPad, in portrait or
   landscape, with or without a trackpad), touch devices, low-RAM devices,
   Data Saver, and "Reduce Motion" users.

   Nothing here removes a feature. It only removes GPU/CPU-heavy
   decoration (glass blur, endless glow/pulse loops) and tells the browser
   to skip work for parts of the page that are off screen.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Keep LOADING SPINNERS spinning on iPhone / iPad
   ---------------------------------------------------------------------
   Safari on every iPhone/iPad reports only 2 CPU cores, so your existing
   head script always adds .low-end-device on iOS. The rule
   ".low-end-device * { animation-iteration-count: 1 }" then FROZE every
   spinner while a voice was being generated — users saw a static icon
   for 10-60 s and reported "the site freezes". Loaders only: */
.low-end-device .spinner,
.low-end-device .spinner-border,
.low-end-device .fa-spinner,
.low-end-device .fa-spin,
.low-end-device .pulse-loader,
.low-end-device .pro-modal-spinner div {
    animation-duration: .8s !important;
    animation-iteration-count: infinite !important;
}
.low-end-device .spinner-grow { animation-duration: .75s !important; animation-iteration-count: infinite !important; }
.low-end-device .fa-spin       { animation-duration: 1.5s !important; }
.low-end-device .pro-modal-spinner div { animation-duration: 1.2s !important; }
.low-end-device .typing-indicator span,
.low-end-device .bot-typing-indicator span {
    animation-duration: 1.3s !important;
    animation-iteration-count: infinite !important;
}


/* ---------------------------------------------------------------------
   2. LITE MODE — no frosted glass at all
   ---------------------------------------------------------------------
   backdrop-filter re-blurs everything behind the element on every
   scrolled frame. On a 2x/3x iPad screen this is the #1 heat source.
   The old rule only did this below 992px, so iPads in landscape
   (1024–1366px wide) still blurred ~20 elements, including the whole
   #ai-avatar-showcase section. */
/* :is(#dv-boost, *) only raises specificity so this also beats older
   "!important" glass rules such as .hero-features-pills .feature-pill */
html.dv-lite :is(#dv-boost, *),
html.dv-lite :is(#dv-boost, *)::before,
html.dv-lite :is(#dv-boost, *)::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* readable solid fallbacks where glass sat on top of busy content */
html.dv-lite #mobile-action-bar { background-color: #ffffff !important; }
html.dv-lite .word-counter      { background-color: #f1f5f9 !important; }


/* ---------------------------------------------------------------------
   3. LITE MODE — stop endless decorative loops
   ---------------------------------------------------------------------
   Most of these animate box-shadow / background-position / text-shadow,
   which forces a repaint on every frame, forever. Even a tiny loop keeps
   the iPad display pipeline awake at 60/120 Hz. Pseudo-elements are
   listed explicitly because ".low-end-device *" never matched ::before.
   Loaders (spinners, typing dots, play-state waveforms) are NOT here. */
html.dv-lite .animate__infinite,
html.dv-lite .dv-deco-anim,
html.dv-lite #whatsapp-float,
html.dv-lite #whatsapp-float::before,
html.dv-lite #voiceStyleBadge,
html.dv-lite .hero-team-section::before,
html.dv-lite .header::before,
html.dv-lite #v4-top-bar::before,
html.dv-lite .ramadan-bar::before,
html.dv-lite .ramadan-icon,
html.dv-lite #pro-voiceover-feature.enhanced-voiceover,
html.dv-lite #pro-voiceover-feature.enhanced-voiceover::before,
html.dv-lite #voices-control-showcase.enhanced-section,
html.dv-lite #voices-control-showcase.enhanced-section::before,
html.dv-lite .premium-user-badge,
html.dv-lite .btn-video-cta,
html.dv-lite .product-name,
html.dv-lite .btn-subscribe-premium,
html.dv-lite .btn-subscribe-premium .fa-crown,
html.dv-lite .btn-premium-voices .fa-gem,
html.dv-lite .premium-banner .fa-star-of-life,
html.dv-lite .cta-btn.magnet-btn,
html.dv-lite .timer-text,
html.dv-lite .offer-timer,
html.dv-lite .ny-badge,
html.dv-lite .badge-beta,
html.dv-lite .cta-button.cta-button-video .fa-youtube,
html.dv-lite #subscribeModal .pm-seats,
html.dv-lite .auto-human-card.is-active .icon-container,
html.dv-lite .auto-human-card.is-active .shine-effect,
html.dv-lite .v2m-shine-effect {
    animation: none !important;
}
/* falling confetti and giant blurred blobs: purely decorative */
html.dv-lite .ny-confetti,
html.dv-lite .logo-glow,
html.dv-lite .v4-aurora,
html.dv-lite .tt-glow {
    display: none !important;
}

/* big soft shadows are re-painted on every scroll frame on iPad */
html.dv-lite .modern-hero { box-shadow: none !important; }   /* barely visible (clip-path cuts most of it) */


/* ---------------------------------------------------------------------
   3b. ALL DEVICES — endless animations freeze while they are off screen
   ---------------------------------------------------------------------
   The head script adds .dv-offscreen to any element with an endless
   animation while it is outside the viewport, and removes it as soon as
   the element scrolls back in. Desktop keeps every effect when visible. */
.dv-offscreen,
.dv-offscreen::before,
.dv-offscreen::after {
    animation-play-state: paused !important;
}


/* ---------------------------------------------------------------------
   4. ALL DEVICES — undo layer-hungry "optimisations"
   ---------------------------------------------------------------------
   style8.css set will-change: background-position on whole sections.
   That property cannot be GPU-accelerated; it only makes the browser
   keep extra full-size layers in memory. */
#pro-voiceover-feature.enhanced-voiceover,
#pro-voiceover-feature.enhanced-voiceover::before,
#voices-control-showcase.enhanced-section,
#voices-control-showcase.enhanced-section::before,
.btn-video-cta,
.premium-user-badge,
.ramadan-bar::before {
    will-change: auto !important;
}


/* ---------------------------------------------------------------------
   5. ALL DEVICES — skip rendering far-below-the-fold sections
   ---------------------------------------------------------------------
   The browser skips layout + paint for these until the user scrolls
   near them. Checked: none of them contains a modal or a position:fixed
   element. Do NOT add #partner-program — your floating WhatsApp button
   (#whatsapp-float-container) sits inside it and would stop floating. */
#ai-voice-changer,
#api-showcase-section,
#enterprise-solutions,
#whatsapp-assistant-section,
.other-ai-tools-section,
#v4-showcase-section,
#voice-cloning-section,
.testimonials-section,
#pricing-section,
.trusted-by-section,
footer.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}


/* ---------------------------------------------------------------------
   6. Respect "Reduce Motion" (loaders keep turning, slowly)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .animate__infinite,
    .dv-deco-anim { animation: none !important; }
}