/* * IncubeSocial — Site FX: page loader + scroll-reveal animations. * New 2026-07-11. Loaded site-wide (header shared by every template). * Everything here is progressive enhancement + fully disabled under * prefers-reduced-motion. Uses design-tokens.css custom properties only. */ /* ============================================================ Page loader — full-screen branded overlay that fades out on load. Animated emoji (bouncing) + the inCube gradient wordmark. ============================================================ */ .incube-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; background: var(--color-navy-dark, #0D132B); /* Fades out (via .is-hidden) then removed from the flow. */ transition: opacity 0.5s ease, visibility 0.5s ease; } .incube-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* The bouncing emoji cluster. Three emoji, staggered bounce, so it reads as playful motion (per Adam's laughing/thinking-emoji reference). */ .incube-loader__emojis { display: flex; gap: 0.35rem; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; } .incube-loader__emojis span { display: inline-block; animation: incube-loader-bounce 0.9s ease-in-out infinite; } .incube-loader__emojis span:nth-child(2) { animation-delay: 0.12s; } .incube-loader__emojis span:nth-child(3) { animation-delay: 0.24s; } @keyframes incube-loader-bounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-16px) scale(1.08); } } .incube-loader__word { font-family: var(--font-heading, 'Sora', sans-serif); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.01em; background: var(--gradient-signature, linear-gradient(90deg, #FF4D8D, #9A45E8, #00B4FF)); -webkit-background-clip: text; background-clip: text; color: transparent; } .incube-loader__bar { width: 140px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; } .incube-loader__bar::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--gradient-signature, linear-gradient(90deg, #FF4D8D, #9A45E8, #00B4FF)); transform: translateX(-100%); animation: incube-loader-fill 1.1s ease-in-out infinite; } @keyframes incube-loader-fill { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(100%); } } /* ============================================================ Scroll-reveal — sections fade + slide up as they enter view. JS adds .is-visible via IntersectionObserver; base state is the hidden/offset state. If JS is off, [data-reveal] stays at the base — so we ONLY hide once JS has flagged support via the .js-reveal class on , avoiding a no-JS blank page. ============================================================ */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } /* Failsafe applied by site-fx.js after a timeout: force visible with NO transition, so a stalled observer or a paused opacity transition can never leave a section hidden. Content is guaranteed to appear. */ .js-reveal [data-reveal].reveal-force { opacity: 1 !important; transform: none !important; transition: none !important; } /* Optional stagger for grids of children. */ .js-reveal [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .js-reveal [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; } .js-reveal [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.07s; } .js-reveal [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.14s; } .js-reveal [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.21s; } .js-reveal [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.28s; } .js-reveal [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.35s; } /* ============================================================ Reduced motion: kill the loader animation (still fades out fast) and disable all scroll-reveal offset so content is simply present. ============================================================ */ @media (prefers-reduced-motion: reduce) { .incube-loader__emojis span, .incube-loader__bar::after { animation: none; } .js-reveal [data-reveal], .js-reveal [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } }