/* Brand splash intro (Phase 2 — logo_placement_02062026) Full-screen lavender overlay shown ≤3000ms on first session visit. No external deps, no canvas, CSS-only motion. The overlay is VISIBLE from first paint (server-rendered, no `hidden` attribute). The inline pre-paint script in base.html sets `.brand-intro-skip` on for returning / reduced-motion visitors so the overlay never paints for them. JS controls only the fade-out timing and final node removal. */ .brand-intro { position: fixed; inset: 0; z-index: 100000; /* above sticky header, global nav loading, drawers */ display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #f9f6fd 0%, #efe4fb 55%, #e3d4f7 100%); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 400ms ease-out, visibility 0s linear 400ms; will-change: opacity; } /* Pre-paint skip: returning visitors and reduced-motion users never see it. */ html.brand-intro-skip .brand-intro { display: none !important; } .brand-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; } .brand-intro__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; max-width: min(420px, 86vw); text-align: center; } .brand-intro__logo { width: min(360px, 70vw); height: auto; max-height: 60vh; object-fit: contain; filter: drop-shadow(0 14px 36px rgba(123, 44, 191, 0.28)); animation: brand-intro-pulse 1600ms ease-in-out infinite; } @keyframes brand-intro-pulse { 0%, 100% { transform: scale(0.98); opacity: 0.97; } 50% { transform: scale(1.06); opacity: 1; } } .brand-intro__wordmark { font-family: 'Mukta', 'Poppins', system-ui, -apple-system, sans-serif; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.2px; background: linear-gradient(90deg, #7b2cbf 0%, #c792e9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-intro__tm { font-size: 0.7em; margin-left: 2px; vertical-align: super; } .brand-intro__progress { margin-top: 6px; width: 140px; height: 3px; border-radius: 3px; background: rgba(123, 44, 191, 0.15); overflow: hidden; } .brand-intro__progress > span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #7b2cbf, #c792e9); border-radius: 3px; animation: brand-intro-progress 2600ms ease-out forwards; } @keyframes brand-intro-progress { 0% { width: 0%; } 100% { width: 100%; } } @media (max-width: 480px) { .brand-intro__logo { width: min(280px, 78vw); } .brand-intro__wordmark { font-size: 1.3rem; } .brand-intro__progress { width: 140px; } } @media (prefers-reduced-motion: reduce) { /* Safety net — the pre-paint script + JS also skip rendering entirely. */ .brand-intro { display: none !important; } }