/* Remove use of `zoom` which causes inconsistent behaviour on mobile. Use responsive CSS instead. */ /* Mobile-friendly reduced motion rules (activated by JS adding .mobile-reduced-motion to ) */ @media screen and (max-width: 768px) { body.mobile-reduced-motion, body.mobile-reduced-motion [class*="animate-"] { animation: none !important; transition: none !important; } /* Disable large grain/blur backgrounds on small screens */ .animate-grain { display: none !important; } .blur-\[180px\] { display: none !important; } } /* Reintroduce `zoom` for widescreens only per request. This keeps mobile behavior unchanged. Adjust the min-width breakpoint if you want zoom applied earlier/later (e.g. 1024px). */ @media screen and (min-width: 1280px) { /* Scale down the overall page slightly for large/wide screens */ body { zoom: 0.70; } /* Keep header elements slightly larger relative to the scaled body */ header * { zoom: 1.1; } } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); } 60% { transform: translate(15%, 0%); } 70% { transform: translate(0%, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); } } .animate-grain { animation: grain 8s steps(10) infinite; } @keyframes growMain { to { stroke-dashoffset: 0; } } @keyframes growBranch { 0% { opacity: 1; stroke-dashoffset: 40; } 100% { opacity: 1; stroke-dashoffset: 0; } } @keyframes fadeInLeaves { 0% { opacity: 0; transform: scale(0.5); transform-origin: center; } 100% { opacity: 1; transform: scale(1); transform-origin: center; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }