/* ═══════════════════════════════════════════════ LUMERA ANIMATIONS & MOBILE ENHANCEMENTS ═══════════════════════════════════════════════ */ /* ─── KEYFRAMES ─────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } @keyframes rotateIn { from { opacity: 0; transform: rotate(-8deg) scale(0.92); } to { opacity: 1; transform: rotate(0) scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-8px) rotate(2deg); } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); } 70% { box-shadow: 0 0 0 14px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes blinkCaret { 0%, 100% { border-color: transparent; } 50% { border-color: #2563eb; } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes counterUp { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes drawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } @keyframes dotPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes navShrink { from { padding-top: 0.75rem; padding-bottom: 0.75rem; } to { padding-top: 0.5rem; padding-bottom: 0.5rem; } } @keyframes ripple { to { transform: scale(4); opacity: 0; } } @keyframes particleFade { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } } /* ─── SCROLL REVEAL BASE ─────────────────────── IMPORTANT: Only hide elements AFTER JS has run. Without .lm-ready on , everything stays fully visible — no flash, no jump on load. ─────────────────────────────────────────────── */ .lm-ready [data-animate] { opacity: 0; transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } .lm-ready [data-animate="up"] { transform: translateY(40px); } .lm-ready [data-animate="down"] { transform: translateY(-40px); } .lm-ready [data-animate="left"] { transform: translateX(-50px); } .lm-ready [data-animate="right"] { transform: translateX(50px); } .lm-ready [data-animate="scale"] { transform: scale(0.88); } .lm-ready [data-animate="rotate"] { transform: rotate(-6deg) scale(0.94); } .lm-ready [data-animate="fade"] { transform: none; } /* Visible state — always wins */ [data-animate].lm-visible { opacity: 1 !important; transform: none !important; } /* Stagger children — also only hide after JS ready */ .lm-ready [data-stagger] > * { opacity: 0; transform: translateY(32px); transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); } [data-stagger].lm-visible > * { opacity: 1 !important; transform: none !important; } [data-stagger].lm-visible > *:nth-child(1) { transition-delay: 0.05s; } [data-stagger].lm-visible > *:nth-child(2) { transition-delay: 0.13s; } [data-stagger].lm-visible > *:nth-child(3) { transition-delay: 0.21s; } [data-stagger].lm-visible > *:nth-child(4) { transition-delay: 0.29s; } [data-stagger].lm-visible > *:nth-child(5) { transition-delay: 0.37s; } [data-stagger].lm-visible > *:nth-child(6) { transition-delay: 0.45s; } /* ─── HERO PARTICLE CANVAS ─────────────────── */ #lm-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.55; } /* ─── NAVBAR SCROLL SHRINK ─────────────────── */ .lm-nav-shrunk nav { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; transition: padding 0.35s ease; } .lm-nav-shrunk { box-shadow: 0 4px 32px rgba(0,0,0,0.5) !important; background: rgba(11,17,32,0.97) !important; backdrop-filter: blur(16px); transition: all 0.35s ease; } /* ─── BUTTON RIPPLE ─────────────────────────── */ .lm-btn-ripple { position: relative; overflow: hidden; } .lm-btn-ripple .ripple-circle { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple 0.65s linear; background: rgba(255,255,255,0.25); pointer-events: none; } /* ─── SHIMMER TEXT ──────────────────────────── */ .lm-shimmer { background: linear-gradient(90deg, #2563eb 0%, #60a5fa 35%, #2563eb 65%, #60a5fa 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3.5s linear infinite; } /* ─── FLOATING ORBS (hero bg) ──────────────── */ .lm-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: glowPulse 6s ease-in-out infinite; } .lm-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 70%); top: -100px; right: -100px; animation-delay: 0s; } .lm-orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%); bottom: -60px; left: -80px; animation-delay: 3s; } /* ─── CARD HOVER LIFT ───────────────────────── */ .lm-card-hover { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; } .lm-card-hover:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px rgba(0,0,0,0.12); } .lm-card-hover-dark:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px rgba(37,99,235,0.15); } /* ─── COUNTER NUMBER ───────────────────────── */ .lm-counter { display: inline-block; animation: counterUp 0.5s cubic-bezier(0.22,1,0.36,1) both; } /* ─── GRADIENT ANIMATED BG ─────────────────── */ .lm-grad-bg { background: linear-gradient(135deg, #060d1f, #0d1a3a, #0a1628, #060d1f); background-size: 300% 300%; animation: gradientShift 12s ease infinite; } /* ─── TYPING CURSOR ─────────────────────────── */ .lm-cursor { border-right: 3px solid #2563eb; animation: blinkCaret 0.85s step-end infinite; white-space: nowrap; overflow: hidden; display: inline-block; } /* ─── PAGE LOADER ───────────────────────────── */ #lm-loader { position: fixed; inset: 0; z-index: 9999; background: #0B1120; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; } #lm-loader.lm-loaded { opacity: 0; visibility: hidden; pointer-events: none; } .lm-loader-bar { width: 200px; height: 3px; background: rgba(255,255,255,0.1); border-radius: 9999px; overflow: hidden; position: relative; margin-top: 20px; } .lm-loader-progress { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 9999px; width: 0%; transition: width 0.6s ease; } /* ─── MOBILE ─────────────────────────────────── */ @media (max-width: 768px) { /* Reduce animation intensity on mobile */ .lm-ready [data-animate="left"], .lm-ready [data-animate="right"] { transform: translateY(24px) !important; } /* Bigger touch targets */ a, button { min-height: 44px; } /* Hero typography scale */ .text-headline-xl { font-size: clamp(2.2rem, 9vw, 4rem) !important; } .text-headline-lg { font-size: clamp(1.8rem, 6vw, 3rem) !important; } /* Card improvements */ .lm-card-hover:hover { transform: none; box-shadow: none; } /* Better spacing */ section { padding-left: 1.25rem; padding-right: 1.25rem; } /* Hide heavy orbs on mobile */ .lm-orb { display: none; } /* Mobile menu slide animation */ #mobileMenu { transform: translateY(-10px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } #mobileMenu.open { display: block !important; transform: translateY(0); opacity: 1; } } /* ─── REDUCED MOTION ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lm-ready [data-animate], .lm-ready [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .lm-shimmer, .lm-orb, .lm-loader-progress { animation: none !important; } .lm-card-hover:hover { transform: none; } } /* ─── SMOOTH SCROLL ─────────────────────────── */ html { scroll-behavior: smooth; } /* ─── SECTION LABEL BADGE ───────────────────── */ .lm-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.25); border-radius: 9999px; color: #2563eb; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } /* ─── GLOW BUTTON ───────────────────────────── */ .lm-glow-btn { position: relative; z-index: 0; } .lm-glow-btn::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, #2563eb, #60a5fa, #2563eb); border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.3s ease; filter: blur(8px); } .lm-glow-btn:hover::before { opacity: 0.7; } /* ─── SCROLL PROGRESS BAR ───────────────────── */ #lm-scroll-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa); z-index: 9998; width: 0%; transition: width 0.1s linear; border-radius: 0 3px 3px 0; } /* ─── IMAGE REVEAL ──────────────────────────── */ .lm-img-reveal { overflow: hidden; } .lm-img-reveal img { transition: transform 0.65s cubic-bezier(0.22,1,0.36,1); } .lm-img-reveal:hover img { transform: scale(1.04); } /* ─── UNDERLINE HOVER ───────────────────────── */ .lm-underline { position: relative; } .lm-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #2563eb; border-radius: 2px; transition: width 0.3s ease; } .lm-underline:hover::after { width: 100%; } /* ─── STAT CARD GLOW ─────────────────────────── */ .lm-stat-card { transition: box-shadow 0.4s ease, border-color 0.4s ease; } .lm-stat-card:hover { box-shadow: 0 0 0 2px rgba(37,99,235,0.4), 0 12px 40px rgba(37,99,235,0.12); } /* ─── TIMELINE DOT ANIMATION ─────────────────── */ .lm-tl-dot { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; } .lm-tl-dot:hover { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(37,99,235,0.2); } /* ─── NDI BOX DEVICE GLOW ────────────────────── */ .lm-device-glow { animation: glowPulse 4s ease-in-out infinite; } /* ─── MAGNETIC BUTTON ────────────────────────── */ .lm-magnetic { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); display: inline-block; }