/* ============================================================ Space Parking — Interaction & Animation Layer public/website-assets/css/interactions.css Layered on top of existing styles. No layout or colour changes. Content stays visible when JS is disabled or the browser does not support IntersectionObserver. ============================================================ */ /* ============================================================ Scroll Reveal — hidden state Only active after JS has added .js-ready to . Without .js-ready every element is fully visible. ============================================================ */ .js-ready .reveal, .js-ready .reveal-up, .js-ready .reveal-left, .js-ready .reveal-right, .js-ready .reveal-scale { opacity: 0; transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .js-ready .reveal { transform: translateY(20px); } .js-ready .reveal-up { transform: translateY(32px); } .js-ready .reveal-left { transform: translateX(-32px); } .js-ready .reveal-right { transform: translateX(32px); } .js-ready .reveal-scale { transform: scale(0.94) translateY(16px); } /* Visible state — toggled by IntersectionObserver */ .reveal-visible { opacity: 1 !important; transform: none !important; } /* ── Stagger delays for sibling cards ──────────────────── */ .stagger-item:nth-child(1) { transition-delay: 0ms; } .stagger-item:nth-child(2) { transition-delay: 90ms; } .stagger-item:nth-child(3) { transition-delay: 180ms; } .stagger-item:nth-child(4) { transition-delay: 270ms; } .stagger-item:nth-child(5) { transition-delay: 360ms; } .stagger-item:nth-child(6) { transition-delay: 450ms; } /* ============================================================ Hero Entrance Animations CSS-only, run immediately on load. Staggered by delay. No JS dependency — always plays. ============================================================ */ @keyframes ix-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes ix-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ix-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* Staggered entrance — each element class has a distinct delay */ .hero-badge-anim { animation: ix-fade-up 0.60s cubic-bezier(0.22, 1, 0.36, 1) 80ms both; } .hero-title-anim { animation: ix-fade-up 0.70s cubic-bezier(0.22, 1, 0.36, 1) 200ms both; } .hero-desc-anim { animation: ix-fade-up 0.70s cubic-bezier(0.22, 1, 0.36, 1) 340ms both; } .hero-btn-anim { animation: ix-fade-up 0.70s cubic-bezier(0.22, 1, 0.36, 1) 460ms both; } .hero-visual-anim { animation: ix-fade-in 0.85s ease 300ms both; } /* Optional continuous float for decorative visual elements */ .hero-float { animation: ix-float 5s ease-in-out infinite; } /* ============================================================ Card Hover — Lift Add .hover-lift to card containers that do NOT already use Tailwind's hover:scale-* transforms. ============================================================ */ .hover-lift { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(5, 22, 38, 0.10); } /* ============================================================ Image Hover — Zoom inside container Add .hover-zoom to the wrapper; it must have overflow:hidden (or you can add it via the class — see below). ============================================================ */ .hover-zoom { overflow: hidden; } .hover-zoom img { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .hover-zoom:hover img { transform: scale(1.06); } /* ============================================================ CTA Glow Pulse Add .cta-glow to a background-decoration element inside CTA sections (absolute positioned orb/gradient divs). ============================================================ */ @keyframes ix-glow-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } } .cta-glow { animation: ix-glow-pulse 5s ease-in-out infinite; } /* ============================================================ Navbar — Smooth Hover Underline Layered on top of existing site-nav-link transition-colors. Hides when the active border-b-2 class is present. ============================================================ */ .site-nav-link { position: relative; } .site-nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background: currentColor; border-radius: 2px; transition: width 0.22s ease; } /* Expand underline on hover (but not when already using border-b-2 active state) */ .site-nav-link:not(.border-b-2):hover::after { width: 100%; } /* ============================================================ Reduced Motion — Accessibility Disables all movement. Keeps opacity fades at most. ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Make all reveal elements immediately visible */ .js-ready .reveal, .js-ready .reveal-up, .js-ready .reveal-left, .js-ready .reveal-right, .js-ready .reveal-scale, .stagger-item { opacity: 1 !important; transform: none !important; transition: none !important; } /* Strip hero keyframe animations */ .hero-badge-anim, .hero-title-anim, .hero-desc-anim, .hero-btn-anim, .hero-visual-anim, .hero-float, .cta-glow { animation: none !important; opacity: 1 !important; transform: none !important; } /* Strip hover motion */ .hover-lift, .hover-lift:hover { transform: none !important; transition: box-shadow 0.2s ease !important; } .hover-zoom img, .hover-zoom:hover img { transform: none !important; transition: none !important; } .site-nav-link::after { display: none; } }