/* =========================================================================== Motion system Three layers, in the order the visitor meets them: 1. Intro : the BSI logo sting that plays on landing 2. Entrance : hero content taking the stage once the sting clears 3. Reveal : everything below the fold arriving on scroll, plus the word-by-word text animation and hover choreography Everything here is additive: with JS off (or reduced motion on) the page renders fully composed and static. `html.js-motion` is set by an inline script in before first paint, so there is never a flash of hidden content on a browser that will not run the animations. =========================================================================== */ /* =========================================================================== 1. Intro sting =========================================================================== */ .intro { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: var(--navy); cursor: pointer; transition: transform 0.75s var(--ease-frame), opacity 0.5s ease; } .js-motion.intro-active .intro { display: flex; } .intro__glow { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 40%, rgba(157, 195, 234, 0.14), rgba(22, 36, 58, 0) 70%); } /* Faint blueprint grid, a nod to the drafting lines in the original logo. */ .intro__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(157, 195, 234, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 195, 234, 0.07) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%); opacity: 0; animation: intro-grid 1.6s ease 0.2s forwards; } .intro__lockup { position: relative; text-align: center; transition: transform 0.6s var(--ease-out), opacity 0.45s ease; } /* Clips the light sweep to the mark. The padding matters: without it the frame's 1.5px border sits exactly on the clip boundary and subpixel rounding shaves it off, which is how the right edge went missing. */ .intro__markwrap { position: relative; display: inline-block; overflow: hidden; padding: 3px; } /* The font-size lives here, not on the letters, so the frame's padding can be sized in em and the whole mark scales as one piece. */ .intro__mark { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 3.5rem); border: 1.5px solid rgba(255, 255, 255, 0.55); padding: 0.36em 0.61em; animation: intro-frame 0.62s var(--ease-frame) both; } .intro__letters { display: flex; /* Separation comes from the gap alone. letter-spacing would add a trailing space after the I that has to be cancelled with a negative margin, and any mismatch between the two reads as an off-centre mark. */ gap: 0.18em; font-family: var(--font-head); font-weight: 900; color: var(--white); line-height: 1; /* Raleway's ascent and descent are not symmetric, so caps in a line-height:1 box sit low in it. Padding below the baseline grows the box downwards and lifts the caps back onto the centre of the frame. The value is measured, not guessed: it puts the ink dead centre at 56px and within a pixel at the 40px the mark clamps to on a phone. */ padding-bottom: 0.017em; /* The B's left sidebearing is fractionally wider than the I's on the right, which parks the ink half a pixel right of centre at the mark's full size. This trims it back. */ padding-right: 0.018em; } .intro__letters span { display: block; animation: intro-letter 0.5s var(--ease-out) both; } .intro__letters span:nth-child(1) { animation-delay: 0.34s; } .intro__letters span:nth-child(2) { animation-delay: 0.41s; } .intro__letters span:nth-child(3) { animation-delay: 0.48s; } .intro__sweep { position: absolute; top: 0; left: 0; width: 34%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); pointer-events: none; animation: intro-sweep 1.05s var(--ease-sweep) 0.82s both; } .intro__rule { width: 52px; height: 2px; background: var(--blue-light); margin: 20px auto 14px; transform-origin: center; animation: intro-rule 0.5s var(--ease-out) 0.74s both; } .intro__word { font-family: var(--font-head); font-size: 1rem; font-weight: 800; letter-spacing: 2.5px; text-indent: 2.5px; color: var(--white); text-transform: uppercase; animation: intro-word 0.7s var(--ease-out) 0.86s both; } .intro__sub { font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-indent: 2px; color: var(--blue-light); text-transform: uppercase; margin-top: 5px; animation: intro-sub 0.5s ease 1.14s both; } .intro__skip { position: absolute; right: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); bottom: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); font-family: var(--font-head); font-size: 0.6875rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.25); opacity: 0; animation: intro-sub 0.4s ease 1.4s forwards; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .intro__skip:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.7); } /* Exit: the lockup lifts away and the navy panel wipes up off the hero. */ .intro.is-leaving { transform: translateY(-100%); pointer-events: none; } .intro.is-leaving .intro__lockup { opacity: 0; transform: translateY(-24px) scale(0.96); } @keyframes intro-frame { from { opacity: 0; transform: scale(1.14); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } } @keyframes intro-letter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes intro-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-word { from { opacity: 0; letter-spacing: 8px; text-indent: 8px; } to { opacity: 1; letter-spacing: 2.5px; text-indent: 2.5px; } } @keyframes intro-sub { from { opacity: 0; } to { opacity: 1; } } @keyframes intro-sweep { from { transform: translateX(-260%) skewX(-18deg); } to { transform: translateX(360%) skewX(-18deg); } } @keyframes intro-grid { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } /* =========================================================================== 2. Hero entrance, held back until the sting has cleared =========================================================================== */ .js-motion [data-hero] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); } .js-motion.hero-in [data-hero] { opacity: 1; transform: translateY(0); } /* The hero video pulls back from a slow push-in as the content lands. */ .js-motion .hero__media { transform: scale(1.12); transition: transform 2.4s var(--ease-out); } .js-motion.hero-in .hero__media { transform: scale(1); } .hero__scroll span:last-child { animation: scroll-hint 2.2s ease-in-out infinite; } @keyframes scroll-hint { 0%, 100% { transform: scaleY(1); opacity: 0.9; transform-origin: top center; } 50% { transform: scaleY(0.55); opacity: 0.45; transform-origin: top center; } } /* =========================================================================== 3. Scroll reveals [data-reveal] sets the resting state; .is-revealed releases it. The variant is read from the attribute value, and [data-stagger] hands each child an --i so a group arrives in sequence rather than all at once. =========================================================================== */ .js-motion [data-reveal] { opacity: 0; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), clip-path 0.9s var(--ease-out), filter 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger, 90ms) + var(--delay, 0ms)); will-change: opacity, transform; } .js-motion [data-reveal="up"], .js-motion [data-reveal=""] { transform: translateY(34px); } .js-motion [data-reveal="left"] { transform: translateX(-38px); } .js-motion [data-reveal="right"] { transform: translateX(38px); } .js-motion [data-reveal="scale"] { transform: scale(0.94); } .js-motion [data-reveal="fade"] { transform: none; } /* Photography wipes open from the bottom and settles out of a slow zoom. */ .js-motion [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transform: scale(1.06); } .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; } /* The eyebrow's leading rule draws itself in with the text. */ .js-motion .eyebrow[data-reveal]::before { transform: scaleX(0); transition: transform 0.6s var(--ease-out) 0.15s; } .js-motion .eyebrow[data-reveal].is-revealed::before { transform: scaleX(1); } /* =========================================================================== 4. Word-by-word text animation split-text.js rewrites a [data-split] heading into masked word spans. Each word rises out of its own mask with a touch of blur, one after the next. The mask is what makes it read as type setting itself rather than fading. =========================================================================== */ .split-line { display: block; } .split-word { display: inline-block; overflow: hidden; /* Room for descenders, pulled back so line-height is unchanged. */ padding-bottom: 0.14em; margin-bottom: -0.14em; vertical-align: bottom; } .js-motion .split-word > span { display: inline-block; transform: translateY(110%) rotate(2deg); opacity: 0; filter: blur(6px); transition: transform 0.85s var(--ease-out), opacity 0.6s ease, filter 0.6s ease; transition-delay: calc(var(--w, 0) * 62ms + var(--delay, 0ms)); } .js-motion [data-split].is-revealed .split-word > span, .js-motion.hero-in [data-split][data-hero-split] .split-word > span { transform: translateY(0) rotate(0); opacity: 1; filter: blur(0); } /* Character variant, used sparingly on short uppercase labels. */ .js-motion .split-char { display: inline-block; opacity: 0; transform: translateY(0.5em) scale(0.9); transition: opacity 0.45s ease, transform 0.55s var(--ease-out); transition-delay: calc(var(--w, 0) * 28ms + var(--delay, 0ms)); } .js-motion [data-split="chars"].is-revealed .split-char { opacity: 1; transform: none; } /* =========================================================================== 5. Counters =========================================================================== */ .stat__value[data-count] { display: inline-block; } /* =========================================================================== 6. Ambient + hover extras =========================================================================== */ /* Section backdrops drift a few pixels as they pass: depth without parallax jank, since it is driven by the same IntersectionObserver, not scroll. */ .js-motion .band__bg { transform: scale(1.08) translateY(2%); transition: transform 1.6s var(--ease-out); } .js-motion .band__bg.is-revealed { transform: scale(1.08) translateY(-2%); } /* Cards lift as a set when a grid reveals, then respond individually to hover (hover rules live with the components). */ .js-motion [data-reveal] .tag { transition: transform var(--dur-mid) var(--ease-out); } .js-motion [data-reveal]:hover .tag { transform: translateY(-2px); } /* =========================================================================== 7. Reduced motion Honour the OS setting: no sting, no reveals, no drift. Content renders in its final state, and hover feedback stays as a colour change only. =========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-motion .intro { display: none !important; } .js-motion [data-hero], .js-motion [data-reveal], .js-motion .split-word > span, .js-motion .split-char { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; } .js-motion .hero__media, .js-motion .band__bg { transform: none !important; transition: none !important; } .js-motion .eyebrow[data-reveal]::before { transform: scaleX(1) !important; } .hero__scroll span:last-child { animation: none; } .btn:hover, .btn:focus-visible, .pill:hover, .person:hover, .mv-card:hover, .to-top:hover, .contact__value:hover, .site-footer__links a:hover, .site-footer__contact a:hover { transform: none; } .btn::before, .btn::after, .project-card img, .feature-card img, .person__frame img { transition: none; animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }