/* Homepage splash — animated logo (assets/js/logo-intro.js; source: infinity_logo_premium.html) */ /* Lock scroll behind splash while pending (class on from head + cleared on dismiss) */ html.logo-intro-pending { overflow: hidden; height: 100%; } html.logo-intro-pending body { overflow: hidden; overscroll-behavior: none; } .logo-intro-overlay { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 100dvh; min-height: 100vh; width: 100%; padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: var(--canvas-base, #060d0f); cursor: pointer; opacity: 1; transition: opacity 0.45s ease, visibility 0.45s ease; -webkit-tap-highlight-color: transparent; } :root.light .logo-intro-overlay { background: var(--canvas-base, #f0f7f8); } .logo-intro-overlay.logo-intro--out { opacity: 0; pointer-events: none; visibility: hidden; } .logo-intro__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; max-width: min(640px, 92vw); pointer-events: none; } .logo-intro__wrap { position: relative; width: 100%; padding: 32px 16px 16px; display: flex; flex-direction: column; align-items: center; } .logo-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .logo-intro-svg { display: block; width: 100%; max-width: 540px; overflow: visible; will-change: transform, opacity; } .logo-intro__hint { font-family: var(--mono, "DM Mono", monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #6a9aa3); opacity: 0.85; text-align: center; margin: 0; } /* SVG draw / fill / text (scoped) */ .logo-intro-overlay .logo-intro-inf-left path, .logo-intro-overlay .logo-intro-inf-right path { fill: none; stroke: #246c8c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; } .logo-intro-overlay .logo-intro-inf-left .fill-shape, .logo-intro-overlay .logo-intro-inf-right .fill-shape { fill: #246c8c; opacity: 0; } .logo-intro-overlay .logo-intro-stem, .logo-intro-overlay .logo-intro-dot, .logo-intro-overlay .logo-intro-tl, .logo-intro-overlay .logo-intro-shimmer { opacity: 0; } .logo-intro-overlay .logo-intro-dot { transform-origin: 5.6px 5.6px; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-inf-left path { animation: logoIntroDrawPath 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-inf-right path { animation: logoIntroDrawPath 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1.1s forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-inf-left .fill-shape { animation: logoIntroFillFade 0.5s ease-out 1.55s forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-inf-right .fill-shape { animation: logoIntroFillFade 0.5s ease-out 2.35s forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-stem { animation: logoIntroSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-dot { animation: logoIntroPopDot 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-tl { animation: logoIntroTextUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .logo-intro-overlay .logo-intro-svg.animate .logo-intro-shimmer { animation: logoIntroShimmerOn 0.12s ease-out 3s forwards, logoIntroShimmerSweep 0.7s ease-in-out 3.12s forwards; } @keyframes logoIntroDrawPath { to { stroke-dashoffset: 0; } } @keyframes logoIntroFillFade { to { opacity: 1; } } @keyframes logoIntroSlideUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes logoIntroPopDot { 0% { opacity: 0; transform: scale(0); } 65% { transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } } @keyframes logoIntroTextUp { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes logoIntroShimmerOn { to { opacity: 1; } } @keyframes logoIntroShimmerSweep { 0% { opacity: 0.55; transform: translateX(-120%); } 100% { opacity: 0; transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .logo-intro-overlay .logo-intro-inf-left path, .logo-intro-overlay .logo-intro-inf-right path { stroke-dashoffset: 0; animation: none !important; } .logo-intro-overlay .logo-intro-inf-left .fill-shape, .logo-intro-overlay .logo-intro-inf-right .fill-shape { opacity: 1; animation: none !important; } .logo-intro-overlay .logo-intro-stem, .logo-intro-overlay .logo-intro-dot, .logo-intro-overlay .logo-intro-tl { opacity: 1; transform: none; animation: none !important; } .logo-intro-overlay .logo-intro-shimmer { display: none !important; } }