/* North River Group — animated logo splash. Timeline (ms from .is-running): 90 lattice hexes ghost in on the logo's own honeycomb grid 330 the three real hexes stroke-draw, staggered 980 the full mark outline (incl. the river ribbon) draws 1560 solid gold fill blooms in, wireframe retires 2000 specular sweep crosses the mark 2320 wordmark wipes open from centre, gold rule expands 3150 hold, then the host fades the splash out */ .nrg-splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(720px 520px at 50% 44%, rgba(201, 164, 92, 0.10), transparent 68%), #08080a; opacity: 1; transition: opacity 620ms ease, visibility 0s linear 620ms; } /* FAILSAFE — the black shell ships in the HTML so it paints on frame one. If splash.js never runs (module fetch failure, JS off), nothing would remove it and the site would sit behind a black screen. This clears it regardless. When JS works the splash is long gone before this fires. */ /* Scoped to the shell that ships in index.html, NOT to .nrg-splash generally — the preview page mounts its own .nrg-splash and parks on the final frame deliberately, and must not be cleared out from under it. */ #nrg-splash { animation: nrg-splash-failsafe 400ms ease 8s forwards; } @keyframes nrg-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .nrg-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; } /* set synchronously in the page when this tab has already seen the splash (or the visitor asked for reduced motion) — the shell never paints */ .nrg-no-splash .nrg-splash { display: none; } .nrg-splash-svg { width: min(560px, 74vw); height: auto; overflow: visible; } /* every animated part waits for .is-running so the first frame is never mid-flight */ .nrg-splash :is(.nrg-lat, .nrg-build, .nrg-outline, .nrg-mark-fill, .nrg-sweep, .nrg-word, .nrg-word-wipe, .nrg-rule, .nrg-wire) { animation-play-state: paused; } .nrg-splash.is-running :is(.nrg-lat, .nrg-build, .nrg-outline, .nrg-mark-fill, .nrg-sweep, .nrg-word, .nrg-word-wipe, .nrg-rule, .nrg-wire) { animation-play-state: running; } /* --- 1. honeycomb lattice --------------------------------------------- */ .nrg-lat { fill: none; stroke: #c9a45c; stroke-width: 1.1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: nrg-lat-in 1000ms cubic-bezier(.2,.7,.3,1) var(--d) both; } @keyframes nrg-lat-in { 0% { opacity: 0; transform: scale(1.22); } 55% { opacity: var(--o); } 100% { opacity: calc(var(--o) * 0.8); transform: scale(1); } } .nrg-lattice { animation: nrg-lat-dim 900ms ease 1700ms both; } @keyframes nrg-lat-dim { to { opacity: 0.22; } } /* --- 2/3. wireframe build --------------------------------------------- */ .nrg-build { fill: none; stroke: #f0d9a4; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; /* stroke-dasharray / -dashoffset are set per path by splash.js */ animation: nrg-draw 820ms cubic-bezier(.55,.06,.25,1) var(--d) both; } .nrg-outline { fill: none; stroke: #ffeec4; stroke-width: 2; stroke-linejoin: round; animation: nrg-draw 900ms cubic-bezier(.4,.1,.25,1) 980ms both; } @keyframes nrg-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } .nrg-wire { animation: nrg-wire-out 620ms ease-in 1800ms both; } @keyframes nrg-wire-out { to { opacity: 0; } } /* --- 4. solid mark ----------------------------------------------------- */ .nrg-mark-fill { fill: url(#nrgGold); opacity: 0; transform-box: fill-box; transform-origin: center; animation: nrg-solid-in 700ms cubic-bezier(.2,.7,.3,1) 1560ms both; } @keyframes nrg-solid-in { 0% { opacity: 0; transform: scale(1.045); } 100% { opacity: 1; transform: scale(1); } } /* --- 5. specular sweep -------------------------------------------------- */ .nrg-sweep { opacity: 0; animation: nrg-sweep 900ms cubic-bezier(.35,0,.2,1) 2000ms both; } @keyframes nrg-sweep { 0% { opacity: 0; transform: translateX(0) skewX(-12deg); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(700px) skewX(-12deg); } } /* --- 6. wordmark -------------------------------------------------------- */ .nrg-word-wipe { transform-box: fill-box; transform-origin: center; transform: scaleX(0); animation: nrg-wipe 760ms cubic-bezier(.2,.75,.25,1) 2320ms both; } @keyframes nrg-wipe { to { transform: scaleX(1); } } .nrg-wm { fill: #ece8de; opacity: 0; transition: fill 620ms ease; } .nrg-word { animation: nrg-word-rise 760ms cubic-bezier(.2,.75,.25,1) 2320ms both; } @keyframes nrg-word-rise { 0% { transform: translateY(14px); } 100% { transform: translateY(0); } } .nrg-wm-1 { animation: nrg-wm-in 620ms ease-out 2360ms both; } .nrg-wm-2 { animation: nrg-wm-in 620ms ease-out 2520ms both; } @keyframes nrg-wm-in { to { opacity: 1; } } .nrg-rule { fill: #c9a45c; transform-box: fill-box; transform-origin: center; transform: scaleX(0); opacity: 0; animation: nrg-rule-in 820ms cubic-bezier(.2,.75,.25,1) 2600ms both; } @keyframes nrg-rule-in { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: scaleX(64); opacity: 0.75; } } /* --- reduced motion: show the finished lockup, skip the show ------------ */ @media (prefers-reduced-motion: reduce) { .nrg-splash :is(.nrg-lat, .nrg-build, .nrg-outline, .nrg-mark-fill, .nrg-sweep, .nrg-word, .nrg-word-wipe, .nrg-rule, .nrg-wire, .nrg-lattice, .nrg-wm-1, .nrg-wm-2) { animation: none !important; } .nrg-splash .nrg-wire, .nrg-splash .nrg-lattice, .nrg-splash .nrg-sweep { opacity: 0; } .nrg-splash .nrg-mark-fill { opacity: 1; } .nrg-splash .nrg-wm { opacity: 1; } .nrg-splash .nrg-word-wipe { transform: none; } .nrg-splash .nrg-rule { opacity: 0.75; transform: scaleX(64); } .nrg-splash { transition: opacity 200ms ease; } } /* --- handoff: the lockup cools from gold to the hero's white as it flies --- into the header. The white twin of the mark fades up over the gold one, the wordmark warms out to white, and the rule (which the hero lockup does not have) retires. By the time the swap happens the two are identical. */ .nrg-mark-ink { opacity: 0; transition: opacity 560ms ease; } .nrg-splash.is-handing-off .nrg-mark-ink { opacity: 1; } .nrg-splash.is-handing-off .nrg-wm { fill: #ffffff; } .nrg-splash.is-handing-off .nrg-rule { opacity: 0; transition: opacity 380ms ease; } .nrg-splash.is-handing-off .nrg-lattice { opacity: 0; transition: opacity 420ms ease; } .nrg-splash.is-handing-off { background: transparent; transition: background 700ms ease; }