/* ========================================== SCROLL ANIMATIONS (Lightweight AOS Alternative) ========================================== */ /* Base state - ready for animation. .aos-ready is added by JS to once scroll observer is set up. This ensures content is visible even if JS fails. */ .aos-ready [data-aos] { opacity: 0; transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: opacity, transform; } /* Animated state - visible */ [data-aos].aos-animated { opacity: 1 !important; transform: none !important; } /* Fade Up */ .aos-ready [data-aos="fade-up"] { transform: translateY(30px); } /* Fade Down */ .aos-ready [data-aos="fade-down"] { transform: translateY(-30px); } /* Fade Left */ .aos-ready [data-aos="fade-left"] { transform: translateX(30px); } /* Fade Right */ .aos-ready [data-aos="fade-right"] { transform: translateX(-30px); } /* Zoom In */ .aos-ready [data-aos="zoom-in"] { transform: scale(0.88); } /* Zoom In Up */ .aos-ready [data-aos="zoom-in-up"] { transform: scale(0.88) translateY(20px); } /* Mobile - Reduce animation distance for snappier feel */ @media (max-width: 768px) { .aos-ready [data-aos="fade-up"] { transform: translateY(20px); } .aos-ready [data-aos="fade-down"] { transform: translateY(-20px); } .aos-ready [data-aos="fade-left"] { transform: translateX(20px); } .aos-ready [data-aos="fade-right"] { transform: translateX(-20px); } .aos-ready [data-aos] { transition-duration: 0.5s; } } /* Stagger delays */ [data-aos-delay="100"] { transition-delay: 100ms; } [data-aos-delay="200"] { transition-delay: 200ms; } [data-aos-delay="300"] { transition-delay: 300ms; } [data-aos-delay="400"] { transition-delay: 400ms; } [data-aos-delay="500"] { transition-delay: 500ms; } /* ========================================== EXTRA HOVER & MICRO-INTERACTIONS ========================================== */ /* Shimmer loading effect for images */ .product-card-image::before, .category-card-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); background-size: 200% 100%; animation: shimmer 2s infinite; z-index: 1; opacity: 0; transition: opacity 0.3s; } /* Gradient overlays on hover */ .product-card-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.03)); z-index: 1; transition: all 0.4s; } .product-card-new:hover .product-card-image::after { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08)); } /* Owl Carousel transitions */ .owl-carousel .owl-item { opacity: 1; } /* Link underline animation */ .footer-col ul li a { position: relative; } .footer-col ul li a::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.3s ease; } .footer-col ul li a:hover::after { width: 100%; } /* Pulsing dot for "New" badge */ .product-card-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #fff; border-radius: 50%; margin-right: 5px; animation: pulse-glow 2s ease-in-out infinite; } .product-card-badge.trending::before { display: none; } /* Smooth image loading - images always visible */ img { opacity: 1; } /* Nav dropdown smooth entrance */ .dropdown-menu { transform-origin: top center; } /* Button ripple effect */ .btn-hero-primary, .btn-cta-primary, .btn-view-all { position: relative; overflow: hidden; } .btn-hero-primary::after, .btn-cta-primary::after, .btn-view-all::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.15); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; } .btn-hero-primary:hover::after, .btn-cta-primary:hover::after, .btn-view-all:hover::after { width: 300px; height: 300px; } /* ========================================== MOBILE NAV ENHANCEMENT ========================================== */ @media (max-width: 768px) { /* GPU-accelerated nav for smooth slide */ .main-nav { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Disable button ripple on touch - prevents visual glitch */ .btn-hero-primary::after, .btn-cta-primary::after, .btn-view-all::after { display: none; } /* Active tap state for mobile buttons */ .btn-hero-primary:active, .btn-hero-secondary:active, .btn-cta-primary:active, .btn-cta-secondary:active, .btn-view-all:active, .btn-enquiry-new:active { transform: scale(0.97) !important; transition-duration: 0.1s; } } /* ========================================== PRODUCTS SLIDER - Stage padding peek on mobile ========================================== */ @media (max-width: 479px) { .products-slider .owl-stage-outer { overflow: visible; } .products-slider { overflow: hidden; } } /* ========================================== SKELETON LOADING SHIMMER ========================================== */ @keyframes skeleton { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%); background-size: 400px 100%; animation: skeleton 1.4s ease infinite; border-radius: 4px; }