/* * scroll-performance-override.css * Smart Brains BPO — CSS Performance Override * * Load this LAST in your , after all other CSS files. * It precisely targets the animations and 3D contexts identified * as causing jerk/lag/stutter during scroll in the main section, * services section, and form section. * * WHAT THIS FIXES: * 1. .white-orb — fixed-position, animates across full viewport = biggest offender * 2. .ray (×5) — 3s scan loop, constant translateY compositing * 3. .shape (×4) — dual animations (shapeFloat + shapePulse) simultaneously * 4. .glowing-text — text-shadow animation = repaint every frame (not GPU) * 5. .floating-3d — rotateX/Y/Z on 12 service cards = 12 forced 3D layers * 6. .enhanced-3d — preserve-3d + perspective on entire main section * 7. .content-wrapper, * .page-content — preserve-3d makes ENTIRE PAGE a 3D stacking context * 8. .section-swirl — unnecessary rotate animation in services + form * 9. .icon-box — preserve-3d on all service cards * 10. form inputs — preserve-3d + translateZ on focus * 11. .glowing-title — text-shadow animation = repaint * 12. .titlePulse — text-shadow animation on h1 in main section */ /* ══════════════════════════════════════════════════════════════ 1. WHITE ORB — biggest single offender position:fixed + translates across 100vw/100vh every 20s. The browser repaints the entire viewport on every frame. Replace with a static soft glow — visually identical. ══════════════════════════════════════════════════════════════ */ .white-orb { animation: none !important; transform: translate(15vw, 15vh) !important; will-change: auto !important; /* Keep the visual — just stop it moving */ opacity: 0.4 !important; position: absolute !important; /* change from fixed to absolute — no full-page repaint */ } /* ══════════════════════════════════════════════════════════════ 2. LIGHT RAYS — 5 rays scanning 3s each = constant compositing Replaced with a static fade-in. Visually still beautiful. ══════════════════════════════════════════════════════════════ */ .ray { animation: none !important; will-change: auto !important; transform: translateY(0) !important; opacity: 0.15 !important; background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.2) 60%, transparent 100%) !important; } /* ══════════════════════════════════════════════════════════════ 3. FLOATING SHAPES — shapeFloat (30s) + shapePulse (4s) dual Two simultaneous transform animations = 2× compositor work. Keep shapes visible but static. ══════════════════════════════════════════════════════════════ */ .shape { animation: none !important; will-change: auto !important; transform: none !important; opacity: 0.2 !important; } /* ══════════════════════════════════════════════════════════════ 4 + 11 + 12. GLOWING TEXT — text-shadow animation text-shadow changes force a SOFTWARE REPAINT every frame. They are NOT GPU-composited unlike transform/opacity. We keep the glow — just make it static (zero repaint cost). ══════════════════════════════════════════════════════════════ */ .glowing-text { animation: none !important; text-shadow: 0 0 12px rgba(135, 206, 235, 0.85), 0 0 22px rgba(135, 206, 235, 0.65), 0 0 32px rgba(135, 206, 235, 0.45) !important; } .glowing-title { animation: none !important; text-shadow: 0 0 15px rgba(135, 206, 235, 0.85), 0 0 25px rgba(135, 206, 235, 0.65), 0 0 35px rgba(135, 206, 235, 0.45) !important; } .main-3d-content h1.main-title { animation: none !important; text-shadow: 0 0 12px rgba(135, 206, 235, 0.9), 0 0 22px rgba(135, 206, 235, 0.7), 0 0 32px rgba(135, 206, 235, 0.5), 0 0 42px rgba(135, 206, 235, 0.25) !important; } /* ══════════════════════════════════════════════════════════════ 5. FLOATING-3D — rotateX/Y/Z on 12 service cards Each card with preserve-3d creates a GPU compositor layer. 12 cards × 8s animation = 12 layers all ticking simultaneously. We keep the hover effect (set inline by advanced-effects.js). ══════════════════════════════════════════════════════════════ */ .floating-3d { animation: none !important; transform: none !important; transform-style: flat !important; perspective: none !important; will-change: auto !important; /* Keep the box-shadow visual */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(135, 206, 235, 0.2) !important; transition: box-shadow 0.3s ease, transform 0.3s ease !important; } .floating-3d:hover { animation: none !important; transform: translateY(-8px) scale(1.02) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(135, 206, 235, 0.4) !important; } /* ══════════════════════════════════════════════════════════════ 6. ENHANCED-3D — preserve-3d + perspective on main section Forces every child element into 3D stacking context. ══════════════════════════════════════════════════════════════ */ .enhanced-3d { transform-style: flat !important; perspective: none !important; } /* ══════════════════════════════════════════════════════════════ 7. CONTENT-WRAPPER + PAGE-CONTENT — 3D stacking context Makes the ENTIRE PAGE a 3D compositing context. Every scroll frame recalculates 3D positions for ALL elements. ══════════════════════════════════════════════════════════════ */ .content-wrapper, .page-content { transform-style: flat !important; perspective: none !important; scroll-snap-type: none !important; } /* ══════════════════════════════════════════════════════════════ 8. SECTION SWIRL — rotates in services + form sections ══════════════════════════════════════════════════════════════ */ .section-swirl, .section-swirl::before, .section-swirl::after { animation: none !important; transform: translate(-50%, -50%) !important; will-change: auto !important; } /* ══════════════════════════════════════════════════════════════ 9. ICON-BOX — preserve-3d on all 12 service cards Even without animation, preserve-3d forces compositor layers. The JS mousemove tilt in advanced-effects.js still works — it sets transform inline which overrides this. ══════════════════════════════════════════════════════════════ */ .icon-box { transform-style: flat !important; perspective: none !important; will-change: auto !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .icon-box h2 { transform: none !important; transition: color 0.3s ease !important; } .icon-box:hover h2 { transform: none !important; } .icon-box .floating-3d i { transform: none !important; } /* ══════════════════════════════════════════════════════════════ 10. FORM INPUTS — preserve-3d + translateZ on focus transform-style: preserve-3d on inputs forces compositing. translateZ(20px) on :focus triggers a full layout recalc. ══════════════════════════════════════════════════════════════ */ .form-section input, .form-section select, .form-section button, .form-section textarea { transform-style: flat !important; transform: none !important; transition: border-color 0.25s ease, box-shadow 0.25s ease !important; } .form-section input:focus, .form-section select:focus, .form-section textarea:focus { transform: none !important; /* was translateZ(20px) — triggers layout recalc */ border-color: skyblue !important; box-shadow: 0 0 15px rgba(135, 206, 235, 0.35), 0 0 30px rgba(135, 206, 235, 0.15) !important; } .form-section button.Send, .form-section button.Send:hover { transform-style: flat !important; transform: none !important; transition: box-shadow 0.25s ease, background 0.25s ease !important; } .form-section button.Send:hover { box-shadow: 0 10px 25px rgba(135, 206, 235, 0.4), 0 6px 15px rgba(0, 0, 0, 0.2) !important; } /* ══════════════════════════════════════════════════════════════ BONUS: Kill floating animation on .floating class globally — it uses rotateX/Y which forces 3D layers. ══════════════════════════════════════════════════════════════ */ .floating { animation: none !important; transform: none !important; } /* ══════════════════════════════════════════════════════════════ BONUS: Kill visual-container 3D float — it animates rotateX/Y ══════════════════════════════════════════════════════════════ */ .interactive-visual .visual-container { animation: none !important; transform: none !important; } /* ══════════════════════════════════════════════════════════════ BONUS: circleFloat uses rotateY — 3D layer ══════════════════════════════════════════════════════════════ */ .interactive-circle { animation: none !important; } /* ══════════════════════════════════════════════════════════════ BONUS: teamImageRotate uses rotateY(360deg) — 3D layer on every team member photo ══════════════════════════════════════════════════════════════ */ .circular-team-member .team-image { animation: none !important; transform: none !important; } /* ══════════════════════════════════════════════════════════════ KEEP THESE RUNNING — they are cheap (opacity/scale only, GPU composited, no layout cost): .pulse, .bouncing-image, .rotating-ring, .central-orb, .dance-image, .bubbleFloat, .mainBubbleFloat ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ SCROLL FREEZE — extend ssf-scrolling to catch CSS animations missed by smooth-scroll-fix.js ══════════════════════════════════════════════════════════════ */ body.ssf-scrolling .glowing-text, body.ssf-scrolling .glowing-title, body.ssf-scrolling .section-swirl, body.ssf-scrolling .section-swirl::before, body.ssf-scrolling .pulse { animation-play-state: paused !important; } /* ══════════════════════════════════════════════════════════════ FORM SECTION REMAINING FIXES (from form-section.css) ══════════════════════════════════════════════════════════════ ROOT CAUSES of remaining form section sticking: A) bounceVertical1-4 animations animate transform + box-shadow simultaneously. box-shadow changes are SOFTWARE REPAINTS — not GPU composited. 4 images doing this constantly = jerk. B) floatingShadow animation also animates box-shadow only. Same repaint issue. C) containerGlow animates box-shadow on the container. Repaint. D) formEntrance uses rotateY(10deg) — 3D transform on load. E) form-left + form-right both have backdrop-filter: blur(20px) — two heavy blur layers in the same section. F) #contact-form input:focus uses transform: translateY(-2px) — triggers layout recalculation on every focus event. FIX: Keep the bounce movement (translateY only, no rotation), strip box-shadow animation, replace backdrop-filter with a simple dark background. ══════════════════════════════════════════════════════════════ */ /* A+B: Strip box-shadow from bounce animations — keep translateY movement */ .bouncing-image-1 { animation: bounceLite1 3s infinite ease-in-out !important; } .bouncing-image-2 { animation: bounceLite2 3s 0.5s infinite ease-in-out !important; } .bouncing-image-3 { animation: bounceLite3 3s 1s infinite ease-in-out !important; } .bouncing-image-4 { animation: bounceLite4 3s 1.5s infinite ease-in-out !important; } /* Lightweight bounce — translateY only, GPU composited, zero repaint */ @keyframes bounceLite1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes bounceLite2 { 0%, 100% { transform: translateY(10px); } 50% { transform: translateY(-15px); } } @keyframes bounceLite3 { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(18px); } } @keyframes bounceLite4 { 0%, 100% { transform: translateY(15px); } 50% { transform: translateY(-18px); } } /* B: Kill floatingShadow — it only animates box-shadow (pure repaint) */ .bouncing-image { animation: bounceLite1 3s infinite ease-in-out !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(32, 178, 170, 0.25) !important; /* Static shadow — visually identical, zero repaint cost */ } /* C: Kill containerGlow — only animates box-shadow */ .bouncing-images-container { animation: none !important; box-shadow: 0 0 0 1px rgba(32, 178, 170, 0.1) inset !important; } /* D: Kill formEntrance rotateY — 3D transform on load causes layout cost right when the section first becomes visible */ .form-right { animation: none !important; opacity: 1 !important; transform: none !important; } /* E: Replace backdrop-filter blur on form panels with solid background. backdrop-filter: blur(20px) = one compositor layer per panel. Two panels = two blur layers recalculating on every scroll frame. */ .form-left, .form-right { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(135deg, rgba(10, 10, 10, 0.97) 0%, rgba(15, 15, 15, 0.95) 50%, rgba(10, 10, 10, 0.97) 100%) !important; } /* F: Remove translateY from input focus — triggers layout recalc */ #contact-form input:focus, #contact-form select:focus, #contact-form input[type="text"]:focus, #contact-form input[type="email"]:focus, #contact-form input[type="tel"]:focus { transform: none !important; border-color: rgba(32, 178, 170, 0.8) !important; box-shadow: 0 0 0 2px rgba(32, 178, 170, 0.3), 0 0 15px rgba(32, 178, 170, 0.15) !important; } /* Pause all bouncing during scroll — belt and braces */ body.ssf-scrolling .bouncing-image, body.ssf-scrolling .bouncing-images-container { animation-play-state: paused !important; } /* ══════════════════════════════════════════════════════════════ ADDITIONAL FIXES — from styles.css, form-section.css, section-5.css (identified from full CSS audit) ══════════════════════════════════════════════════════════════ NEW CRITICAL FINDS: - .service-desc has backdrop-filter:blur(5px) !important on ALL 12 cards = 12 simultaneous blur compositor layers in services section - textPulse (12×) + buttonPulse (12×) = 24 constant box-shadow repaint loops running at all times - serviceCardEntrance uses rotateX(15deg)+translateZ(100px) on 12 cards - .team-member jump = translateY animation on every team photo - .feature-card backdrop-filter in why-us section ══════════════════════════════════════════════════════════════ */ /* ── SERVICES: 12× backdrop-filter on .service-desc ───────────── This is the single biggest remaining services section offender. Each blur = one compositor layer. 12 cards = 12 layers. */ .service-desc { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, 0.35) !important; animation: none !important; /* kills textPulse box-shadow repaint */ box-shadow: none !important; } /* ── SERVICES: 12× backdrop-filter on icon circle ────────────── */ .icon-box-inner i { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(32, 178, 170, 0.25) !important; } /* ── SERVICES: buttonPulse animates transform+box-shadow on 12 buttons */ .service-read-more { animation: none !important; transform: none !important; } .service-read-more:hover { transform: translateY(-2px) !important; /* hover only = fine */ } /* ── SERVICES: serviceCardEntrance — rotateX+translateZ 3D on 12 cards Replace with simple fade-in (already handled by smooth-scroll-fix stagger, but this kills the 3D keyframe definitively) */ .icon-box.slide-up { animation: iconBoxFadeIn 0.5s ease forwards !important; } @keyframes iconBoxFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── SERVICES: particle-bg::before filter:blur(40px) on section bg */ .icon-boxes-section.particle-bg::before { filter: none !important; background: radial-gradient(circle at 50% 50%, rgba(32, 178, 170, 0.08) 0%, rgba(32, 178, 170, 0.03) 40%, transparent 70%) !important; } /* ── SERVICES: icon-box hover — remove 3D transforms, keep lift ── */ .icon-box:hover { transform: translateY(-12px) scale(1.02) !important; border-color: rgba(32, 178, 170, 0.4) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(32, 178, 170, 0.1) !important; } /* ── TEAM: jump animation on every member — translateY loop ────── */ .team-member { animation: none !important; transform: none !important; will-change: auto !important; } /* ── WHY-US: feature-card backdrop-filter ──────────────────────── */ .feature-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, 0.08) !important; } /* ── SCROLL INDICATOR: bounce animation ───────────────────────── Small but runs constantly at 2s loop */ .scroll-indicator { animation: none !important; transform: translateY(-50%) !important; } /* ── STYLES.CSS: duplicate backdrop-filter on form panels ──────── These override the ones already in styles.css */ .form-left, .form-right { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── LOCATION INFO blur ───────────────────────────────────────── */ .location-info { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, 0.85) !important; } /* ── KEEP ONLY HEADER blur — it's GPU-composited via will-change ─ */ .main-header { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* ══════════════════════════════════════════════════════════════ FINAL SCROLL FREEZE ADDITIONS Catch any remaining animations during active scroll ══════════════════════════════════════════════════════════════ */ body.ssf-scrolling .team-member, body.ssf-scrolling .feature-card, body.ssf-scrolling .service-read-more, body.ssf-scrolling .scroll-indicator, body.ssf-scrolling .stat-card { animation-play-state: paused !important; transition-duration: 0ms !important; } body.mobile-device .color-blinker, body.mobile-device .floating-element, body.mobile-device .shape { display: none !important; } body.low-performance .color-blinker, body.low-performance .bubble, body.low-performance .floating-element, body.low-performance .shape { opacity: 0.2 !important; animation-duration: 4s !important; } body.reduced-motion .color-blinker, body.reduced-motion .bubble, body.reduced-motion .shape, body.reduced-motion .floating-element { animation: none !important; transition: none !important; } @keyframes fadeOut { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }