/* Mobile-specific optimizations - Loaded after main style.css for overrides */ /* Targets screens up to 768px wide, with touch-friendly adjustments */ @media (max-width: 768px) { :root { --neon-pink: #ff1493; --electric-blue: #00ffff; --lime-green: #00ff00; --text-dark: #000000; } body { background-size: 200% 200%; /* Reduce animation intensity for performance */ animation-duration: 8s; /* Slower pulse for smoother mobile rendering */ cursor: default; /* Remove custom cursor on touch devices */ overflow-x: hidden; touch-action: manipulation; /* Improve touch responsiveness */ } .container { width: 100vw; height: 100vh; overflow: hidden; } section { width: 100vw; height: 100vh; transition: all 0.8s ease; /* Slower transitions for mobile */ clip-path: none; /* Simplify clip-path for mobile to avoid rendering issues */ } section.active { opacity: 1; transform: translateY(0); clip-path: none; /* Disable complex clips on mobile */ animation: none; /* Skip glitch animations for perf */ } /* Header adjustments */ header { padding: 0 10px; flex-direction: column; } .logo { width: 80vw; max-width: 300px; animation: burpBubble 4s ease-in-out infinite; /* Slower logo anim */ animation-duration: 4s; } h1 { font-size: clamp(1.5em, 6vw, 3em); /* Smaller on mobile */ margin: 10px 0; letter-spacing: 0.05em; } h2 { font-size: clamp(1.2em, 4vw, 2em); animation-duration: 4s; /* Slower wiggle */ } .story { max-width: 95vw; padding: 15px; font-size: 0.9em; line-height: 1.5; border-radius: 20px; margin: 10px auto; } /* Roadmap: Simplify SVG for mobile */ #roadmap svg { height: 300px; width: 95vw; animation-duration: 10s; } .roadmap-path { stroke-dasharray: 500; stroke-dashoffset: 500; animation-duration: 3s; } /* Gallery: Adjust grid for mobile */ #gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 95vw; padding: 10px; } .gallery img { padding-bottom: 100%; border-radius: 20px; } .gallery img:hover img { transform: scale(1.1) rotate(5deg); /* Reduced hover scale for touch */ animation: none; /* Skip chaos anim on mobile */ } /* Generator: Stack controls vertically */ #generator { flex-direction: column; align-items: center; gap: 20px; padding: 20px; } .controls { flex: 1 1 100%; width: 100%; max-width: 100%; } #memeCanvas { max-width: 90vw; height: 90vw; /* Square aspect for mobile */ border-radius: 20px; box-shadow: 0 0 20px var(--lime-green); animation: canvasWobble 5s ease-in-out infinite; /* Slower wobble */ } input, button { width: 100%; padding: 15px; font-size: 1em; border-radius: 15px; margin: 5px 0; } .sample-gallery { justify-content: center; gap: 5px; } .sample-gallery img { width: 60px; height: 60px; } .rotation-controls { justify-content: center; gap: 5px; } .rotation-btn { padding: 10px; font-size: 0.9em; min-width: 50px; } /* CTA buttons stack */ .cta { flex-direction: column; align-items: center; gap: 15px; padding: 20px; } .cta button { width: 80%; padding: 15px; font-size: 1em; } /* Contract panel */ .contract-panel { padding: 15px; margin: 10px; } #contractAddr { min-width: 150px; font-size: 0.8em; padding: 10px; } #copyAddr { padding: 10px; font-size: 0.8em; } /* Footer: Adjust marquee speed */ footer { padding: 5px; font-size: 0.6em; bottom: 0; } footer p { animation-duration: 30s; /* Slower marquee */ } /* Social icons: Stack vertically, smaller */ #social-icons { top: 10px; right: 10px; gap: 5px; } .social-icon { width: 30px; height: 30px; } /* Swarm particles: Reduce count impact */ .swarm .particle { width: 20px; opacity: 0.4; } /* Touch-friendly hover alternatives */ .gallery img:active img, .sample-gallery img:active, .cta button:active { transform: scale(0.95); /* Press effect for touch */ } } /* Extra small screens */ @media (max-width: 480px) { h1 { font-size: clamp(1.2em, 5vw, 2.5em); } #memeCanvas { max-width: 95vw; height: 95vw; } .gallery { grid-template-columns: repeat(2, 1fr); /* 2-column grid for tiny screens */ gap: 5px; } }