/* ---------------------------------------------------------- global.css — only contains rules Tailwind cannot do inline ---------------------------------------------------------- */ /* Smooth scrolling for in-page anchors. Tailwind has no utility for the root scroll-behavior, and applying it globally is the simplest fix. */ /* Lenis owns scroll. Native smooth would fight it. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* Reveal-on-scroll initial state — opacity:0, translateY:24px. .is-visible class is set by JS when element enters viewport. */ .r-fade { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); } .r-fade.is-visible { opacity: 1; transform: translateY(0); } /* Pinned features — phone img + text crossfade. Short transition so quick scroll still feels responsive, not gummy. */ .feature-phone-img, .feature-text { transition: opacity 0.35s ease-out, transform 0.45s cubic-bezier(0.22,1,0.36,1); transform: translateY(0); will-change: opacity, transform; } .feature-phone-img[style*="opacity: 0"], .feature-text[style*="opacity: 0"], .feature-phone-img.opacity-0, .feature-text.opacity-0 { transform: translateY(12px); } .feature-phone-img.is-active, .feature-text.is-active { opacity: 1 !important; transform: translateY(0); } .feature-dot { transition: width 0.3s ease-out, background-color 0.3s ease-out; } /* Quote showcase — bg image starts slightly zoomed + tinted, settles on scroll */ .quote-showcase .quote-bg img { transform: scale(1.15); transition: transform 1.6s cubic-bezier(0.22,1,0.36,1); will-change: transform; } .quote-showcase.is-revealed .quote-bg img { transform: scale(1); } /* Ambient body styling — Tailwind classes already cover bg/text/font, but text-rendering needs a CSS rule (no Tailwind utility). */ body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------- .reveal is now a no-op marker class (kept on elements so future opt-in animation is easy). Content is visible by default; we no longer gate visibility on JS because Motion's inView() occasionally misses elements already in viewport and leaves them hidden. */ /* Hero word stagger is the one entrance animation we still drive from JS — short, deterministic, runs once on load. Gated behind body.js-active so the page is readable if animations.js never boots. */ body.js-active .hero-word { opacity: 0; transform: translateY(18px); } /* ---------------------------------------------------------- Custom keyframes — Tailwind 'animate-pulse' is too uniform for the live-dot pulse (we need a transparent ring growth, not opacity fade). */ @keyframes pulse-dot { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } .animate-pulse-dot { animation: pulse-dot 1.6s ease-out infinite; } /* ---------------------------------------------------------- Reduced-motion override — disables every JS-and-CSS animation we added. prefers-reduced-motion has no Tailwind shortcut in v3 CDN without plugin. */ @media (prefers-reduced-motion: reduce) { .hero-word { opacity: 1 !important; transform: none !important; } .animate-pulse-dot { animation: none !important; } html { scroll-behavior: auto; } }