/* ============================================================ BRAND SPLASH — first-visit curtain for the public site. Load AFTER tokens.css. Markup sits at the top of ; the timeline + exit live in /assets/js/splash.js. Three-class contract: html.sa-splash-on set synchronously in — the ONLY thing that makes the curtain visible, so a page with JS off (or a returning session) never renders it at all. html.sa-splash-lifting set when the curtain starts to rise, releasing the page's own entrance animations so they play into view. .sa-splash.is-exiting runs the exit on the panel itself. ============================================================ */ .sa-splash { display: none; } html.sa-splash-on { overflow: hidden; } html.sa-splash-on .sa-splash { display: block; } /* Hold the page's load-in animations behind the curtain so they play on the reveal instead of finishing unseen. Released by .sa-splash-lifting. */ html.sa-splash-on .animate-blur-fade-up { animation-play-state: paused; } html.sa-splash-on.sa-splash-lifting .animate-blur-fade-up { animation-play-state: running; } /* ----- Panel ----- */ .sa-splash { position: fixed; inset: 0; z-index: 9999; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 42% 38% at 50% 47%, rgb(24 60 49 / 0.75), transparent 72%), radial-gradient(ellipse 55% 42% at 80% 8%, rgb(199 164 108 / 0.14), transparent 66%), radial-gradient(ellipse 62% 48% at 10% 96%, rgb(13 77 58 / 0.42), transparent 64%), radial-gradient(ellipse 105% 75% at 50% 48%, #0c2720 0%, #061410 58%, #030c0a 100%); will-change: transform; } /* Film grain, same recipe as the hero so the two surfaces read as one material */ .sa-splash__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* Brass hairline along the bottom edge — only reads during the lift, where it works as the leading edge of the curtain. */ .sa-splash::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgb(199 164 108 / 0.85) 50%, transparent); } /* ----- Centered stack ----- */ .sa-splash__stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); /* optical centering — the stack is bottom-heavy, so sit it just above true middle */ padding-bottom: calc(var(--space-8) + 4vh); text-align: center; } /* ----- Crest ----- */ .sa-splash__crest { position: relative; line-height: 0; } .sa-splash__crest::before { /* brass bloom behind the shield */ content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%) scale(0.7); border-radius: 50%; background: radial-gradient(circle, rgb(199 164 108 / 0.22), transparent 65%); opacity: 0; animation: saBloom 1400ms var(--ease-spring) 300ms forwards; } .sa-splash__crest svg { position: relative; width: clamp(84px, 9vw, 108px); height: auto; overflow: visible; } .sa-crest__shield { fill: #0d2a22; fill-opacity: 0; stroke: var(--color-accent); stroke-width: 4.5; stroke-dasharray: 330; stroke-dashoffset: 330; animation: saDraw 1000ms cubic-bezier(0.65, 0, 0.35, 1) forwards, saFill 700ms ease-out 460ms forwards; } .sa-crest__arms path { fill: none; stroke: var(--color-accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: saDrawArm 620ms cubic-bezier(0.33, 0.9, 0.4, 1) forwards; } .sa-crest__arms path:nth-child(1) { animation-delay: 620ms; } .sa-crest__arms path:nth-child(2) { animation-delay: 720ms; } .sa-crest__arms path:nth-child(3) { animation-delay: 820ms; } .sa-crest__dots circle { fill: var(--color-accent); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: saPop 520ms var(--ease-spring) forwards; } .sa-crest__dots circle:nth-child(1) { animation-delay: 860ms; } .sa-crest__dots circle:nth-child(2) { animation-delay: 940ms; } .sa-crest__dots circle:nth-child(3) { animation-delay: 1020ms; } /* ----- Wordmark ----- */ .sa-splash__word { overflow: hidden; margin: var(--space-6) 0 var(--space-4); } .sa-splash__word span { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 4.2vw, 2.125rem); letter-spacing: -0.022em; line-height: 1.1; color: #fff; transform: translateY(115%); animation: saRise 900ms cubic-bezier(0.2, 0.85, 0.2, 1) 900ms forwards; } /* ----- Motto ----- */ .sa-splash__motto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(255 255 255 / 0.64); } .sa-splash__motto span { /* the tracking adds a trailing gap; pull it back so the dots sit centered */ margin-right: -0.24em; opacity: 0; transform: translateY(6px); animation: saLift 700ms var(--ease-spring) forwards; } .sa-splash__motto span:nth-of-type(1) { animation-delay: 1180ms; } .sa-splash__motto span:nth-of-type(2) { animation-delay: 1280ms; } .sa-splash__motto span:nth-of-type(3) { animation-delay: 1380ms; } .sa-splash__motto i { width: 3px; height: 3px; flex: none; rotate: 45deg; background: var(--color-accent); opacity: 0; animation: saDot 600ms var(--ease-spring) forwards; } .sa-splash__motto i:nth-of-type(1) { animation-delay: 1240ms; } .sa-splash__motto i:nth-of-type(2) { animation-delay: 1340ms; } /* Narrow screens: stack the three clauses instead of letting the line wrap and strand a separator at the end of a row. */ @media (max-width: 480px) { .sa-splash__motto { flex-direction: column; gap: var(--space-2); font-size: 0.6875rem; letter-spacing: 0.2em; } .sa-splash__motto i { display: none; } .sa-splash__motto span { margin-right: -0.2em; } } /* ----- Progress hairline ----- */ .sa-splash__rule { position: relative; width: 168px; height: 1px; margin-top: var(--space-8); overflow: hidden; background: rgb(255 255 255 / 0.12); opacity: 0; animation: saLift 600ms var(--ease-spring) 1100ms forwards; } .sa-splash__rule span { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent)); animation: saProgress 2000ms cubic-bezier(0.2, 0.75, 0.3, 1) 1100ms forwards; } /* JS snaps the bar full the moment the real work finishes */ .sa-splash.is-exiting .sa-splash__rule span { animation: none; transform: scaleX(1); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ----- Exit: content settles out, then the panel lifts ----- */ .sa-splash.is-exiting .sa-splash__stack { opacity: 0; transform: scale(1.035) translateY(-6px); transition: opacity 380ms ease-in 140ms, transform 520ms var(--ease-spring) 140ms; } .sa-splash.is-exiting { transform: translateY(-100%); transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1) 420ms; } .sa-splash.is-exiting::after { opacity: 1; transition: opacity 200ms ease-out 420ms; } @keyframes saDraw { to { stroke-dashoffset: 0; } } @keyframes saDrawArm { to { stroke-dashoffset: 0; } } @keyframes saFill { to { fill-opacity: 1; } } @keyframes saPop { 0% { transform: scale(0); } 65% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes saBloom { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes saRise { to { transform: translateY(0); } } @keyframes saLift { to { opacity: 1; transform: translateY(0); } } @keyframes saDot { to { opacity: 1; } } @keyframes saProgress{ 0% { transform: scaleX(0); } 100% { transform: scaleX(0.93); } } /* Reduced motion: no draw-on, no lift. The mark and motto are simply present, and the panel cross-fades away. */ @media (prefers-reduced-motion: reduce) { .sa-splash__crest::before, .sa-crest__shield, .sa-crest__arms path, .sa-crest__dots circle, .sa-splash__word span, .sa-splash__motto span, .sa-splash__motto i, .sa-splash__rule, .sa-splash__rule span { animation: none !important; opacity: 1; transform: none; } .sa-crest__shield { fill-opacity: 1; stroke-dashoffset: 0; } .sa-crest__arms path { stroke-dashoffset: 0; } .sa-crest__dots circle { transform: scale(1); } .sa-splash__crest::before { transform: translate(-50%, -50%) scale(1); } .sa-splash__rule span { transform: scaleX(1); } .sa-splash.is-exiting, .sa-splash.is-exiting .sa-splash__stack { transform: none; opacity: 0; transition: opacity 240ms linear !important; } }