/* ============================================================ ANIMATIONS Reveal-on-scroll + page-load entrance. Elements are hidden only while `js-anim` is on , which is added by a small inline script in (so nothing flashes before being hidden) and removed by a failsafe timeout if animations.js never loads. Without JS, nothing here applies and all content shows. ============================================================ */ :root { --reveal-distance: 26px; --reveal-duration: 0.75s; --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } html.js-anim [data-reveal] { opacity: 0; transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); } /* Direction variants — default is a rise from below */ html.js-anim [data-reveal="up"] { transform: translateY(var(--reveal-distance)); } html.js-anim [data-reveal="down"] { transform: translateY(calc(var(--reveal-distance) * -1)); } html.js-anim [data-reveal="left"] { transform: translateX(calc(var(--reveal-distance) * -1)); } html.js-anim [data-reveal="right"] { transform: translateX(var(--reveal-distance)); } html.js-anim [data-reveal="zoom"] { transform: scale(0.94); } html.js-anim [data-reveal="fade"] { transform: none; } html.js-anim [data-reveal].is-visible { opacity: 1; transform: none; } /* Sideways reveals must never push out a horizontal scrollbar. `clip` rather than `hidden` — `hidden` would break the sticky header. */ html.js-anim .about-direction, html.js-anim .contact-layout { overflow-x: clip; } /* ── Sticky header: condense slightly once the page is scrolled ───────── */ .header { transition: padding 0.3s var(--reveal-ease), box-shadow 0.3s var(--reveal-ease); } .header.is-scrolled { padding: 10px 0; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); } .header .logo img { transition: width 0.3s var(--reveal-ease); } .header.is-scrolled .logo img { width: 48px; } /* ── Accessibility: honour reduced-motion ───────────────────────────────── Everything resolves to its final state instantly — no hidden content, no movement. Also silences the decorative hero SVG loops. */ @media (prefers-reduced-motion: reduce) { html.js-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .header, .header .logo img { transition: none; } .hex-ring, .hex-core-build, .hex-core-host, .hex-core-grow, .hex-float { animation: none !important; } } /* ============================================================ PAGE LOADER + PAGE TRANSITIONS ============================================================ */ /* Both are gated on `js-anim`. If animations.js never loads, the 3s failsafe in drops that class and both disappear, so neither can ever leave the site stuck behind a cover. */ .page-loader, .page-transition { display: none; } /* ── Full-screen branded loader (first visit of a session only) ────────── */ html.js-anim .page-loader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 9999; background: var(--bg, #07273D); opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s linear 0.5s; /* Belt-and-braces: even with no JS at all this self-dismisses. */ animation: loader-autohide 0s linear 4s forwards; } html.loader-seen .page-loader { display: none; /* already shown once this session */ } @keyframes loader-autohide { to { opacity: 0; visibility: hidden; } } html.js-anim .page-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader__mark { position: relative; display: grid; place-items: center; width: 132px; height: 132px; } .page-loader__hex { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .page-loader__hex polygon { fill: none; stroke: #2BD8B0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 280; stroke-dashoffset: 280; animation: loader-draw 1.15s cubic-bezier(0.5, 0, 0.2, 1) forwards; } @keyframes loader-draw { to { stroke-dashoffset: 0; } } .page-loader__logo { width: 74px; height: auto; opacity: 0; transform: scale(0.9); animation: loader-logo-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s forwards; } @keyframes loader-logo-in { to { opacity: 1; transform: scale(1); } } /* ── Cross-page fade ───────────────────────────────────────────────────── */ html.js-anim .page-transition { display: block; position: fixed; inset: 0; z-index: 9998; background: var(--bg, #07273D); opacity: 1; /* covers on arrival, then fades out */ pointer-events: none; transition: opacity 0.32s ease; } html.js-anim .page-transition.is-cleared { opacity: 0; } html.js-anim .page-transition.is-leaving { opacity: 1; } /* ── Reduced motion: no loader, no transitions, nothing covering ──────── */ @media (prefers-reduced-motion: reduce) { html.js-anim .page-loader, html.js-anim .page-transition { display: none !important; } } /* ============================================================ LAYOUT STABILITY (CLS) The header and footer are fetched and injected after load. Their host divs start at 0px and jump to full height, shoving the page down — the main source of layout shift. Reserve the space up front. ============================================================ */ #header { min-height: 130px; } #footer { min-height: 255px; } @media (max-width: 768px) { #footer { min-height: 307px; } } /* ============================================================ SCROLL SPINE A circuit trace with a travelling dot: everything behind the dot is lit, everything ahead is a dim track. Sits inside .content's 40px left padding, so it needs no outer gutter and works on laptops. ============================================================ */ .scroll-spine { /* Written from JS each frame — 0 at the top of the spine, 1 at the end. */ --spine-progress: 0; position: absolute; top: 0; /* Align to the content column, then tuck inside its left padding. */ left: calc(max(0px, (100% - 1200px) / 2) + 6px); width: 22px; pointer-events: none; /* purely decorative — never eat a click */ z-index: 5; /* above section backgrounds, clear of the text */ display: none; } @media (min-width: 1024px) { html.js-anim .scroll-spine { display: block; } } .scroll-spine svg { width: 100%; height: 100%; overflow: visible; } .spine-track { fill: none; stroke: rgba(43, 216, 176, 0.14); stroke-width: 1.5; stroke-linecap: round; } /* The trail behind the dot — full strength so it reads clearly. */ .spine-lit { fill: none; stroke: url(#spineGradient); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(43, 216, 176, 0.6)); transition: stroke-dashoffset 0.1s linear; } /* The travelling dot itself. */ .spine-dot { fill: #2BD8B0; filter: drop-shadow(0 0 8px rgba(43, 216, 176, 0.95)); transition: cy 0.1s linear; } .spine-dot-halo { fill: rgba(43, 216, 176, 0.22); transition: cy 0.1s linear; } .spine-node { fill: var(--bg); stroke: rgba(43, 216, 176, 0.3); stroke-width: 1.5; transition: fill 0.35s ease, stroke 0.35s ease; } .spine-node.is-lit { fill: #2BD8B0; stroke: #2BD8B0; filter: drop-shadow(0 0 6px rgba(43, 216, 176, 0.8)); } .spine-branch { fill: none; stroke: rgba(43, 216, 176, 0.14); stroke-width: 1.2; transition: stroke 0.35s ease; } .spine-branch.is-lit { stroke: rgba(43, 216, 176, 0.55); } @media (prefers-reduced-motion: reduce) { html.js-anim .scroll-spine { display: none; } }