/* Brand-reveal intro overlay — first-visit only, ~7s. Isolated under the fm-intro__* namespace so nothing here can collide with the site's Tailwind-generated classes. Colors: var(--color-page)/var(--color-secondary)/var(--color-brand) come from the Tailwind @theme tokens already compiled into output.css (loaded before this file); the three hex stops are the logo's own fixed portalGrad gradient, reused as-is. Timeline (must stay in sync with intro.js's fallback timer): 0.0 – 1.4s logo fade + scale in 1.3 – 3.9s glow pulse (overlaps the tail of the logo-in) 1.6 – 3.6s light sweep across the logo 3.5 – 5.4s tagline fades/slides in 5.4 – 7.0s everything fades + scales out */ /* Prevents the page behind the overlay from scrolling out from under it during the ~7s intro; removed the moment intro.js finishes or the user clicks Skip. */ html.fm-intro-lock { overflow: hidden; } .fm-intro { --fm-c1: #4338ca; --fm-c2: #7c3aed; --fm-c3: #06b6d4; position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; background: var(--color-page, #f8fafc); background-image: radial-gradient( circle at 50% 42%, rgb(124 58 237 / 0.12), rgb(6 182 212 / 0.06) 35%, transparent 70% ); overflow: hidden; } /* Flipped to display:flex only when the pending-intro attribute is set by the early inline script in — keeps repeat visitors at zero paint, zero flash. */ [data-fm-intro="pending"] .fm-intro { display: flex; } .fm-intro__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem; animation: fm-content-out 1.6s ease-in 5.4s forwards; } .fm-intro__glow { position: absolute; left: 50%; top: 50%; width: clamp(260px, 42vw, 520px); height: clamp(260px, 42vw, 520px); transform: translate(-50%, -50%) scale(0.9); border-radius: 50%; background: radial-gradient(circle, var(--fm-c2) 0%, var(--fm-c3) 45%, transparent 72%); filter: blur(48px); opacity: 0; pointer-events: none; animation: fm-glow-pulse 2.6s ease-out 1.3s forwards; } .fm-intro__logo-wrap { position: relative; overflow: hidden; border-radius: 1rem; } .fm-intro__logo { position: relative; display: block; width: clamp(200px, 52vw, 420px); height: auto; opacity: 0; transform: scale(0.85); animation: fm-fade-scale-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .fm-intro__sweep { position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 40%, rgb(255 255 255 / 0.65) 50%, transparent 60% ); transform: translateX(-130%) skewX(-12deg); opacity: 0; animation: fm-sweep 2s ease-in-out 1.6s forwards; } .fm-intro__tagline { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(0.9rem, 2.6vw, 1.125rem); font-weight: 500; letter-spacing: 0.02em; color: var(--color-secondary, #0f172a); text-align: center; opacity: 0; transform: translateY(12px); animation: fm-tagline-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 3.5s forwards; } .fm-intro__skip { position: absolute; left: max(1.1rem, env(safe-area-inset-left)); top: max(1.1rem, env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 0.375rem; border: 1px solid transparent; border-radius: 999px; background: var(--color-brand, #2563eb); box-shadow: 0 2px 10px rgb(37 99 235 / 0.35); color: #ffffff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 1rem; cursor: pointer; opacity: 0; animation: fm-simple-fade 0.4s ease-out 0.15s forwards; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .fm-intro__skip:hover, .fm-intro__skip:focus-visible { background: var(--color-brand-dark, #1d4ed8); box-shadow: 0 4px 14px rgb(37 99 235 / 0.45); transform: translateY(-1px); } .fm-intro__skip:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .fm-intro__skip:active { transform: translateY(0); } /* JS-driven fast exit path (Skip click, or the reduced-motion short fade). Overrides whatever timed keyframe state the overlay/content were in mid-animation. */ .fm-intro--closing { animation: none !important; opacity: 0 !important; transition: opacity 0.25s ease !important; } .fm-intro--closing .fm-intro__content { animation: none !important; } @keyframes fm-fade-scale-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes fm-simple-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes fm-glow-pulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } } @keyframes fm-sweep { 0% { transform: translateX(-130%) skewX(-12deg); opacity: 0; } 15% { opacity: 0.7; } 55% { opacity: 0.7; } 100% { transform: translateX(130%) skewX(-12deg); opacity: 0; } } @keyframes fm-tagline-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fm-content-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.94); } } /* The overlay itself fades out in step with .fm-intro__content (same delay/duration), so the whole thing — including the skip button — dissolves away into the homepage. Harmless to declare unconditionally: an animation on a display:none element simply never runs, so this only takes effect once the pending-attribute rule above flips .fm-intro to display:flex. */ .fm-intro { animation: fm-overlay-out 1.6s ease-in 5.4s forwards; } @keyframes fm-overlay-out { from { opacity: 1; } to { opacity: 0; } } @media (max-width: 380px) { .fm-intro__logo { width: clamp(170px, 68vw, 300px); } .fm-intro__skip { font-size: 0.75rem; padding: 0.45rem 0.8rem; } } @media (prefers-reduced-motion: reduce) { .fm-intro__logo, .fm-intro__tagline, .fm-intro__skip, .fm-intro__content, [data-fm-intro="pending"] .fm-intro { animation: none !important; } .fm-intro__logo, .fm-intro__tagline, .fm-intro__skip { opacity: 1 !important; transform: none !important; } .fm-intro__glow, .fm-intro__sweep { display: none !important; } }