/* ═══════════════════════════════════════════════════════════════════════
   Performance fixes v2 — keep all effects, reduce their GPU/CPU cost.
   Loaded after styles.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Reduce backdrop-filter radius (14-16px → 10px).
   Visually near-identical, ~30% cheaper on all GPUs. ─────────────────── */
.lang-switcher,
.glass, .ds-glass, .card, .feature-card, .pricing-card, .cap-card,
.plugin-card, .dev-stage, .team-card, .mission-section, .faq-item,
.demo-card, .security-card, .example-panel, .cap-counters,
.team-stats, .hero-stats,
.tab, .plugin-badge {
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}

/* On mobile GPUs (<640px), dial it down further — still has the effect */
@media (max-width: 640px) {
  .lang-switcher,
  .glass, .ds-glass, .card, .feature-card, .pricing-card, .cap-card,
  .plugin-card, .dev-stage, .team-card, .mission-section, .faq-item,
  .demo-card, .security-card, .example-panel, .cap-counters,
  .team-stats, .hero-stats,
  .tab, .plugin-badge {
    backdrop-filter: blur(6px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(130%) !important;
  }
}

/* ── 2. Ambient blurs (80px, 50px) — cap at 40px on desktop, 20px on
   mobile. The visual difference is minimal, the cost savings huge. ──── */
@media (min-width: 901px) {
  body::after, .hero::before, .hero::after,
  .demo-chat-wrap::before, .pricing-card.popular::after {
    filter: blur(40px) saturate(110%) !important;
  }
}
@media (max-width: 900px) {
  body::after, .hero::before, .hero::after,
  .demo-chat-wrap::before, .pricing-card.popular::after {
    filter: blur(20px) saturate(110%) !important;
  }
}

/* ── 3. GPU layer promotion for animated elements — key trick.
   Makes transforms run on GPU compositor, not CPU.
   NOTE: .pricing-card.popular::before is EXCLUDED — it uses
   `animation: spin` that rotates transform, setting translateZ(0)
   here would override and freeze the animation. ─────────────────── */
.hero,
.hero-buttons .btn-primary,
.phone-mockup,
.phone,
.gradient-text,
.pulse-dot,
.scroll-rocket,
.btn-primary::after {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Ring promoted via will-change ONLY (no transform override) */
.pricing-card.popular::before {
  will-change: transform;
  backface-visibility: hidden;
}

/* ── 4. content-visibility: auto on off-screen sections.
   Browser skips rendering until near viewport. Biggest initial paint win.
   EXCEPTION: #pricing — content-visibility freezes the spinning ring
   animation until the section scrolls into view, looks dead. ────── */
section:not(.hero):not(#pricing),
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ── 5. Keep shimmer lively — original 10s feels right.
   Only slow down if user prefers less motion (handled below). ──────── */

/* ── 6. Pricing popular rotating ring — KEEP original `animation: spin`
   from styles.css which rotates the whole box. That creates the big
   spinning rhombus/diamond halo effect that looks signature and cool.
   Don't override animation or transform here. ────────────────────── */

/* ── 7. Don't animate box-shadow (expensive) on mousemove transforms.
   Only transform changes, so other props skip transition. ──────────── */
.hero-buttons .btn-primary,
.phone-mockup {
  transition-property: box-shadow, background, border-color, filter !important;
  transition-duration: 0.3s !important;
}

/* ── 8. Prefer GPU for card hover lifts (uses translate instead of top) ─ */
.plugin-card, .dev-stage, .team-card, .feature-card, .pricing-card,
.cap-card, .mission-section, .security-card, .demo-card {
  will-change: transform;
}

/* ── 9. Prefers-reduced-motion: only disable LARGE MOTION (phone parallax,
   magnetic button), keep decorative animations (ring, shimmer, pulse)
   because they are the signature of the page. User's OS may force this
   on mobile — we respect accessibility but not at the cost of the brand. */
@media (prefers-reduced-motion: reduce) {
  .phone-mockup,
  .hero-buttons .btn-primary {
    transform: none !important;
    transition: none !important;
  }
  /* Keep: .gradient-text shimmer, .pulse-dot, .pricing-card.popular::before ring */
}

/* ── 10. Contain layout/paint/style to prevent cascading recalcs.
   NOTE: pricing-card EXCLUDED — its popular-badge sits at top:-12px
   and its ::before ring is at inset:-2px (both OUTSIDE the box).
   `contain: paint` would clip them. Only `style` is safe there. ────── */
.hero,
.hero-stats,
.phone-mockup,
.feature-card, .plugin-card, .dev-stage, .team-card,
.faq-item, .demo-card, .cap-card, .security-card {
  contain: layout paint style;
}
.pricing-card {
  contain: style;  /* no layout/paint — ring & badge must overflow */
  overflow: visible !important;
}
.pricing-card.popular {
  overflow: visible !important;
}
/* Also: pricing-grid parent must not clip */
.pricing-grid {
  overflow: visible !important;
  padding-top: 20px;  /* breathing room for the badge */
}

/* ── 11. Text-rendering optimization for big hero titles ─────────── */
.hero-title, h1 {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 12. Subtle idle float on phone for mobile (via CSS keyframe) ──
   Applied only when JS hasn't set a transform yet (touch idle state). */
@media (hover: none) {
  @keyframes phone-idle-float {
    0%, 100% { transform: perspective(1200px) rotateY(-8deg) rotateX(6deg) translate3d(0,0,0); }
    50%      { transform: perspective(1200px) rotateY(-9.5deg) rotateX(5deg) translate3d(0,-4px,0); }
  }
  /* Only apply when no inline style override active */
  .phone-mockup:not([style*="transform"]) {
    animation: phone-idle-float 8s ease-in-out infinite;
  }
}