/* ============================================================ Rehan Shahid Portfolio — Mobile Performance v16 Goal: keep the luxury look but stop phone heating / lag. Loaded after all other CSS, so these rules intentionally win. ============================================================ */ /* Early device flag is added in before CSS finishes loading. */ html.rs-lite-mobile, html.rs-lite-mobile body { scroll-behavior: auto !important; text-rendering: optimizeSpeed; } /* Mobile: remove expensive full-page glow layers and moving backgrounds. */ @media (max-width: 900px), (hover: none), (pointer: coarse) { html { scroll-behavior: auto !important; } body::before, body::after, .bg-grid, .orb, .o1, .o2, .o3, .heavy-anim, .deck-grid-lines, .deck-bg-orbit, .orbit-a, .orbit-b, .sparkle, .school-sparkle, .cursor-spark, .premium-script-line, .floating-note, .scatter-word, .lux-title .float-word, .label::after, .section-head h2::after { display: none !important; animation: none !important; transform: none !important; will-change: auto !important; } /* The RS ring/orb looked nice but was the heaviest continuous mobile animation. */ .deck-orb, .deck-orb::before, .deck-orb::after, .deck-orb span, .profile-frame, .float-card, .demo-art, .demo-shell, .ph-pizza-art, .skill-icon, .nav-avatar, .rs-ai-orb, .rs-ai-orb-ring, .rs-ai-avatar-orb, .rs-ai-avatar-glow, #siteSkeleton *, #rehan-preloader * { animation: none !important; transition-duration: .01ms !important; transform: none !important; will-change: auto !important; } /* Stop all continuous shimmer/spin/pulse animations on cards and pseudo layers. */ .glass, .glass::before, .glass::after, .card, .card::before, .card::after, .skill, .skill::before, .skill::after, .service, .service::before, .service::after, .demo-card, .demo-card::before, .demo-card::after, .cta-card, .cta-card::before, .cta-card::after, .stat, .stat::before, .stat::after, .friend-card, .friend-card::before, .friend-card::after, .cpo-card, .cpo-card::before, .cpo-card::after, .footer-col, .footer-col::before, .footer-col::after, .modal-box, .modal-box::before, .modal-box::after, .mobile-menu, .rs-ai-panel, .rs-ai-panel::before, .rs-ai-panel::after { animation: none !important; transition-property: background-color, border-color, color, opacity !important; transition-duration: .12s !important; transform: none !important; will-change: auto !important; } /* Blur/backdrop-filter is expensive on iPhones/Android browsers. Use solid premium glass instead. */ .glass, .navbar, .mobile-menu, .modal-box, .modal-top, .card, .skill, .service, .demo-card, .cta-card, .footer-col, .chat, .rs-ai-panel, .cpo-card, .friend-card, .project-request, .contact-card, .social, .info { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 22px rgba(0,0,0,.22) !important; } /* Keep cards neat without hover/3D work on touch screens. */ .btn:hover, .glass:hover, .card:hover, .skill:hover, .service:hover, .demo-card:hover, .cta-card:hover, .stat:hover, .social:hover, .info:hover, .friend-card:hover, .cpo-card:hover { transform: none !important; filter: none !important; box-shadow: 0 8px 22px rgba(0,0,0,.22) !important; } /* Stop auto-moving strips on mobile; user can still scroll/read normally. */ .marquee, .marquee-track, .marquee-track * { animation: none !important; transform: none !important; will-change: auto !important; } .marquee { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .marquee::-webkit-scrollbar { display: none; } .marquee-track { width: max-content !important; gap: 10px !important; } /* Faster page paint and less offscreen work. */ .section, [data-motion-section], .demos, .services, .skills, .gallery, .contact, .footer { content-visibility: auto; contain-intrinsic-size: 1px 760px; } /* Mobile image safety: avoid decoding giant-looking images at huge dimensions. */ img { max-width: 100%; height: auto; } .pic img, .skill-icon img, .footer-avatar img, .nav-avatar img, .cpo-avatar img, .friend-avatar img { height: 100% !important; } /* Make scroll progress cheap. */ #scrollProgressBar { transition: none !important; height: 2px !important; } /* Chatbot stays usable but its rings/pulse stop heating phone. */ .rs-ai-fab, .rs-ai-fab *, .rs-ai-panel, .rs-ai-panel * { -webkit-tap-highlight-color: transparent; } } /* Extra strict mode class applied by JS on mobile/touch/low-power devices. */ html.rs-lite-mobile body.mobile-performance .marquee-track, html.rs-lite-mobile body.mobile-performance .deck-orb, html.rs-lite-mobile body.mobile-performance .deck-orb *, html.rs-lite-mobile body.mobile-performance .deck-orb::before, html.rs-lite-mobile body.mobile-performance .deck-orb::after, html.rs-lite-mobile body.mobile-performance .rs-ai-orb-ring, html.rs-lite-mobile body.mobile-performance .rs-ai-avatar-glow, html.rs-lite-mobile body.mobile-performance .bar span, html.rs-lite-mobile body.mobile-performance .tab.active::after { animation: none !important; will-change: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }