/* ============================================================ QUANTC ADAPTIVE ANIMATION LAYER (animation-adaptive.css) Append this file AFTER style.css in index.html. Architecture: • [data-tier="low"] → CPU-free CSS-only statics • [data-tier="mid"] → Reduced keyframe count, no blur filters • [data-tier="high"] → Full fidelity (default, nothing overridden) The JS DeviceEngine sets data-tier on at boot. NO JavaScript animation code is added here — pure CSS. GSAP parallax is controlled by device-engine.js (animations.orbParallax). ============================================================ */ /* ── SHARED: Honour OS preference before our own tier logic ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .bubble { display: none; } } /* ══════════════════════════════════════════════════════════════ LOW TIER — [data-tier="low"] Goal: zero GPU overdraw, zero filter compositing cost. All visuals are colour/opacity only (no blur, no mix-blend). ══════════════════════════════════════════════════════════════ */ [data-tier="low"] .bubble { /* Replace filter:blur(40px) — extremely expensive on low GPU */ filter: none; /* mix-blend-mode:screen triggers a compositor layer per bubble */ mix-blend-mode: normal; opacity: 0.12; /* Stop GSAP from trying to animate these; they are static */ will-change: auto; animation: none; transform: none !important; /* override GSAP inline styles */ } /* Hide orbs 2 & 3 entirely — DeviceEngine sets orbs:1 anyway, but CSS provides an instant paint-level guarantee */ [data-tier="low"] .b2, [data-tier="low"] .b3 { display: none; } /* Particle container — JS won't create them (particles:false), but guard here if a future regression adds them */ [data-tier="low"] #particle-container { display: none; } /* Grain texture SVG fetch: skip on low-end (save a network call) */ [data-tier="low"] .background-canvas::after { display: none; } /* Glass hub: drop expensive backdrop-filter blur on low tier. Replace with a solid semi-transparent fill — visually ~80% identical. */ [data-tier="low"] .glass-hub { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15, 23, 42, 0.92); /* opaque enough without blur */ } [data-tier="low"] .floating-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15, 23, 42, 0.95); } /* Reduce neural SVG animation to a single slow fade (≈ 1 keyframe/s) */ [data-tier="low"] .neural-pulse { animation: neuralPulseLow 4s ease-in-out infinite; } [data-tier="low"] .neural-ring, [data-tier="low"] .neural-track { animation: none; opacity: 0.4; } [data-tier="low"] .neural-center { animation: none; } @keyframes neuralPulseLow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Spinner: CSS transform rotate is GPU-accelerated and cheap */ [data-tier="low"] .spinner { /* Keep the spinner but remove the glow box-shadow */ box-shadow: none; animation: spinLow 1.2s linear infinite; } @keyframes spinLow { to { transform: rotate(360deg); } } /* Nav & heading entry animations: instant on low-end */ [data-tier="low"] .floating-nav, [data-tier="low"] .heading-section { animation: none; opacity: 1; transform: none; } /* Glow box-shadows: skip on low-end (triggers repaint on every hover) */ [data-tier="low"] .btn-glow-primary:hover, [data-tier="low"] .btn-glow-primary:focus, [data-tier="low"] .nav-btn.active, [data-tier="low"] .nav-btn:hover { box-shadow: none; } /* Drop the pulse-icon animation (atom icon) */ [data-tier="low"] .pulse-icon { animation: none; } /* ══════════════════════════════════════════════════════════════ MID TIER — [data-tier="mid"] Goal: looks nearly identical to HIGH but halves GPU load. Keep blur but reduce it; remove expensive mix-blend layers. ══════════════════════════════════════════════════════════════ */ [data-tier="mid"] .bubble { filter: blur(20px); /* was 40px — halves compositing cost */ mix-blend-mode: normal; /* remove 'screen' overdraw */ opacity: 0.45; } [data-tier="mid"] .b3 { display: none; /* drop the third orb */ } /* Reduce backdrop-filter intensity */ [data-tier="mid"] .glass-hub { backdrop-filter: blur(8px); /* was 20px+ */ -webkit-backdrop-filter: blur(8px); } [data-tier="mid"] .floating-nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Slower neural animation on mid — fewer repaints per second */ [data-tier="mid"] .neural-ring.inner { animation-duration: 12s; } [data-tier="mid"] .neural-ring.outer { animation-duration: 18s; } [data-tier="mid"] .neural-pulse { animation-duration: 5s; } /* ══════════════════════════════════════════════════════════════ HIGH TIER — no overrides needed; style.css defaults apply. This section documents what is *intentionally* unchanged. ══════════════════════════════════════════════════════════════ */ /* High tier gets full: • filter: blur(40px) on bubbles • mix-blend-mode: screen • backdrop-filter: blur(30px) on nav • GSAP parallax orbits • Particle canvas • Full neural SVG animation • Magnetic button hover effect All of the above remain as authored in style.css. */ /* ── TOAST: always GPU-free regardless of tier ────────────── */ /* Toasts use opacity + translateY; no blur. Already good. */ .toast { /* Explicitly set will-change only during animation, not at rest */ will-change: transform, opacity; } .toast.show { will-change: auto; /* reset after animation completes */ }