/** * Micro-Cues System * Subtle animations and visual affordances that guide users * without adding heavy graphics - PWA/mobile optimized * * Created: December 29, 2025 * * Features: * 1. Scroll indicator (auto-hide, clickable, mobile swipe variant) * 2. WhatsApp button breathing pulse * 3. Reading progress bar (long pages only) * 4. Section reveal animations */ /* ============================================ I. SCROLL INDICATOR - Enhanced ============================================ */ .hero-scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.7); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; z-index: 10; /* Smooth hide transition */ transition: opacity 0.4s ease, transform 0.4s ease; /* Make entire area clickable */ padding: 1rem; margin: -1rem; } .hero-scroll-indicator:hover { color: rgba(255, 255, 255, 0.95); } /* Hidden state - after scroll or timeout */ .hero-scroll-indicator.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); } /* Mouse icon */ .hero-scroll-indicator .scroll-mouse { width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 11px; position: relative; opacity: 0.8; } /* Animated wheel/dot inside mouse */ .hero-scroll-indicator .scroll-wheel { width: 3px; height: 7px; background: currentColor; border-radius: 2px; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); animation: scrollWheelBounce 2s ease-in-out infinite; } @keyframes scrollWheelBounce { 0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.3; transform: translateX(-50%) translateY(10px); } } /* Focus state for accessibility */ .hero-scroll-indicator:focus { outline: 2px solid var(--accent-coral, #FF1654); outline-offset: 4px; border-radius: 4px; } /* ============================================ MOBILE: Swipe-Up Variant ============================================ */ @media (max-width: 991px) { .hero-scroll-indicator { display: flex; /* Show on mobile */ bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 1.5rem); /* Above mobile action bar */ } /* Hide mouse icon on mobile */ .hero-scroll-indicator .scroll-mouse { display: none; } /* Show swipe arrow instead */ .hero-scroll-indicator .scroll-swipe { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .hero-scroll-indicator .scroll-swipe-arrow { font-size: 1.25rem; animation: swipeUpArrow 1.8s ease-in-out infinite; } /* Change text to "Swipe" on mobile */ .hero-scroll-indicator .scroll-text-desktop { display: none; } .hero-scroll-indicator .scroll-text-mobile { display: block; } } @media (min-width: 992px) { .hero-scroll-indicator .scroll-swipe { display: none; } .hero-scroll-indicator .scroll-text-mobile { display: none; } .hero-scroll-indicator .scroll-text-desktop { display: block; } } @keyframes swipeUpArrow { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-6px); opacity: 1; } } /* ============================================ II. WHATSAPP BUTTON - Breathing Pulse Very subtle, draws attention without being annoying ============================================ */ /* Hero WhatsApp CTA */ .hero-cta-group a[href*="wa.me"], .hero-cta-group .btn-whatsapp { animation: whatsappBreathe 3.5s ease-in-out infinite; animation-delay: 2s; /* Wait for page to settle */ } /* Mobile action bar WhatsApp */ @keyframes whatsappBreathe { 0%, 100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25), 0 0 0 0 rgba(37, 211, 102, 0); } 50% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 0 0 4px rgba(37, 211, 102, 0.1); } } /* Pause animation on hover - user is already engaged */ .hero-cta-group a[href*="wa.me"]:hover { animation-play-state: paused; } /* ============================================ III. READING PROGRESS BAR Shows scroll progress on long content pages ============================================ */ /* Hide on homepage */ /* Hide on short pages (contact, etc) - controlled via JS or class */ /* Mobile: slightly thicker for visibility */ /* ============================================ IV. SECTION REVEAL ON SCROLL Subtle fade-in for content sections ============================================ */ /* Stagger children for cascading effect */ /* ============================================ V. SUBTLE SECTION DIVIDERS Animated line between major sections ============================================ */ .section-divider { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border-subtle, rgba(0, 0, 0, 0.1)) 20%, var(--border-subtle, rgba(0, 0, 0, 0.1)) 80%, transparent 100% ); margin: 0; overflow: hidden; } /* Animated dot traveling along the line */ .section-divider::after { content: ''; position: absolute; width: 40px; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--accent-coral, #FF1654) 50%, transparent 100% ); top: -1px; left: -40px; animation: dividerGlow 4s ease-in-out infinite; } @keyframes dividerGlow { 0% { left: -40px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% + 40px); opacity: 0; } } /* Dark mode divider */ [data-theme="dark"] .section-divider, body.theme-dark .section-divider { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 100% ); } /* ============================================ VI. ACCESSIBILITY - Reduced Motion ============================================ */ @media (prefers-reduced-motion: reduce) { /* Disable all animations */ .hero-scroll-indicator .scroll-wheel, .hero-scroll-indicator .scroll-swipe-arrow, .hero-cta-group a[href*="wa.me"], .section-divider::after { animation: none !important; } /* Keep transitions but make them instant */ /* Static states for reduced motion */ .hero-scroll-indicator .scroll-wheel { opacity: 0.7; } .hero-cta-group a[href*="wa.me"] { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25); } /* Hide animated divider dot */ .section-divider::after { display: none; } } /* ============================================ VII. PERFORMANCE OPTIMIZATIONS ============================================ */ /* GPU acceleration for smooth animations */ .hero-scroll-indicator { will-change: transform, opacity; } /* Remove will-change after animation completes (via JS) */ /* Reduce animation complexity on low-power mode */ @media (prefers-reduced-motion: reduce), (update: slow) { .hero-scroll-indicator { will-change: auto; } }