/* ==========================================================================
motion.css — Reusable motion + chapter-anchor utilities for the home page
----------------------------------------------------------------------------
Source of truth for the v3 home rebuild's micro-interactions and section
transitions. This file is intentionally surgical: it ONLY ships the
utility classes specified in HOME-FORTUNE-500-BRIEF (M2, M5, M6, M7, M9)
so the home architect can adopt them without bloating home.css.
Tokens used (declared in /css/base/variables.css):
--ink, --bone, --ivory, --red, --red-deep, --red-soft, --red-mist,
--ink-muted, --font-mono, --text-xs
Sections in this file
1. Chapter anchors (M2 + M6)
2. Reveal classes (M7 — paired with home-scroll.js IO)
3. Section bridges + blooms (M5 — refined)
4. Type ladder rhythm (H2 alignment across sections)
5. Closing-CTA breathing glow (M9)
Notes for the home architect
- All motion respects `prefers-reduced-motion`.
- All utility classes are additive — apply alongside section-specific
layout classes, never as a replacement.
- z-index in this file is bounded to [1, 5] to avoid clashing with
header (which lives at higher tiers in home.css/header.css).
========================================================================== */
/* ==========================================================================
1. CHAPTER ANCHORS (M2 sticky scrub + M6 numbered anchor)
--------------------------------------------------------------------------
Drop-in for the "A.01 CAPABILITIES" / "B.02 LOCATION" style emblems that
sit at the top-left of each section and stick while the section scrolls.
Markup pattern the home architect should use:
The letter is the oversized red emblem; the label is the mono caps line.
Both stick together because the parent is the sticky element.
========================================================================== */
.chapter-anchor {
/* Sticks 96px below the top of the viewport (clear of the 72px sticky
header + ~24px breathing room). Each section's anchor scrubs in/out
as the section enters/exits view. */
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--ink-muted);
/* z-index 5 keeps anchors above section bridges/blooms (z=1) but below
the global header. */
z-index: 5;
}
.chapter-anchor__letter {
/* Oversized chapter emblem — fluidly scales between 32px and 48px so it
reads as a "drop cap" on desktop and stays legible on tablets. */
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--red);
/* Tabular nums keeps "01 / 02 / 03" optically aligned across sections. */
font-variant-numeric: tabular-nums;
}
.chapter-anchor__label {
/* Mono caps row sits next to a 24px red hairline, deensgroup-style. */
display: inline-flex;
align-items: center;
gap: 12px;
}
.chapter-anchor__label::before {
content: '';
width: 24px;
height: 1px;
background: var(--red);
}
/* ==========================================================================
2. REVEAL CLASSES (M7 — paired with home-scroll.js IntersectionObserver)
--------------------------------------------------------------------------
The home script toggles `.is-revealed` on elements that carry
`[data-reveal]` once they enter the viewport. Use `data-reveal-delay`
(1, 2, or 3) to cascade siblings — e.g. eyebrow / headline / CTA inside
a hero or section block.
IMPORTANT: Content MUST stay visible if the JS doesn't run (offline,
blocked, errored, slow load). We default `[data-reveal]` to opacity:1
and only hide it when the JS explicitly opts an element in by adding
the `.is-pre-reveal` class. Once the IntersectionObserver fires, the JS
adds `.is-revealed` which restores opacity:1 with the eased transition.
Reduced-motion safe: users with `prefers-reduced-motion: reduce` see the
final state immediately, no transition. Browsers that never run the
reveal JS (or run it after a delay) still show all copy at full opacity.
========================================================================== */
[data-reveal] {
opacity: 1;
transform: none;
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
/* JS opt-in: home-scroll.js adds `.is-pre-reveal` to elements it intends
to animate. Only those start hidden; everything else stays readable. */
[data-reveal].is-pre-reveal {
opacity: 0;
transform: translateY(12px);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-reveal].is-pre-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
3. SECTION BRIDGES + BLOOMS (M5 — refined)
--------------------------------------------------------------------------
Refined replacements for the bridge/bloom utilities currently sitting in
home.css. The shapes are the same (240px mist between sections, soft
radial bloom across seams) but each gradient now has more stops for a
smoother dissolve, blooms gain a `backdrop-filter: blur(12px)` ambient
softness pass, and we add two new variants:
.section-bridge--bone-to-ivory → warm-to-warm seam (no ink)
.section-bloom--vertical → top/bottom oriented bloom
All bridges/blooms are decorative + non-interactive. They overlap the
adjacent sections via negative margins so no horizontal hairline ever
appears between sections. z-index 1 keeps them above section bg paint
but below content (which lives at z=2+ inside sections).
========================================================================== */
/* --- Base bridge: 240px vertical mist that overlaps adjacent sections --- */
.section-bridge {
position: relative;
height: 240px;
margin-top: -120px;
margin-bottom: -120px;
pointer-events: none;
z-index: 1;
/* Refined: 5 stops instead of 3 for a smoother S-curve dissolve.
Eased mid-tones (12% / 38% / 62% / 88%) prevent the visible band
the old 50%-only stop used to show on Retina screens. */
background: linear-gradient(
to bottom,
var(--bg-a, transparent) 0%,
var(--bg-a, transparent) 12%,
color-mix(in oklab, var(--bg-a, transparent) 60%, transparent) 38%,
color-mix(in oklab, var(--bg-b, transparent) 60%, transparent) 62%,
var(--bg-b, transparent) 88%,
var(--bg-b, transparent) 100%
);
}
/* Bone (warm cream) → Ink (near-black). Used at services → labs-CTA seam. */
.section-bridge--bone-to-ink {
--bg-a: rgba(250, 248, 243, 0);
--bg-b: rgba(10, 10, 10, 0.94);
}
/* Ink → Bone. Reverse of the above (labs-CTA → next light section). */
.section-bridge--ink-to-bone {
--bg-a: rgba(10, 10, 10, 0.94);
--bg-b: rgba(250, 248, 243, 0);
}
/* NEW variant — Bone → Ivory. Warm-to-warm seam (e.g. hero → services,
services → home offices). Subtle by design; you should barely see it. */
.section-bridge--bone-to-ivory {
--bg-a: rgba(250, 248, 243, 0);
--bg-b: rgba(241, 237, 228, 0.85);
}
/* NEW variant — Ember red mist seam (cinematic-dark mode). Two adjacent
ink sections share a faint red mist that bleeds across the boundary.
No hairlines, no opaque colored edges. Used by home v4 cinematic. */
.section-bridge--ember {
--bg-a: transparent;
--bg-b: transparent;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(200, 16, 46, 0.04) 30%,
rgba(200, 16, 46, 0.10) 50%,
rgba(200, 16, 46, 0.04) 70%,
transparent 100%
);
filter: blur(8px);
}
/* --- Base bloom: low-opacity red radial that sits across a seam --- */
.section-bloom {
position: relative;
height: 200px;
margin-top: -100px;
margin-bottom: -100px;
pointer-events: none;
z-index: 1;
/* Refined gradient — 5 stops produce a gentler red mist falloff. */
background: radial-gradient(
ellipse 60% 100% at 50% 50%,
rgba(200, 16, 46, 0.12) 0%,
rgba(200, 16, 46, 0.08) 22%,
rgba(200, 16, 46, 0.04) 45%,
rgba(200, 16, 46, 0.015) 65%,
transparent 80%
);
/* Atmospheric softening pass. NOT glassmorphism — used purely as ambient
texture on whatever paints behind the bloom. The body's warm canvas
gradient (declared in home.css) is what actually gets sampled. */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
filter: blur(20px);
}
/* Inverted variant — slightly cooler / inkier. Used when the seam crosses
into the dark labs-CTA so the bloom doesn't blow out on near-black. */
.section-bloom--inverted {
background: radial-gradient(
ellipse 60% 100% at 50% 50%,
rgba(200, 16, 46, 0.08) 0%,
rgba(200, 16, 46, 0.05) 25%,
rgba(10, 10, 10, 0.10) 50%,
rgba(10, 10, 10, 0.04) 70%,
transparent 85%
);
}
/* NEW variant — Vertical bloom. The default bloom is a horizontal ellipse
(wide + short) that sits across a section seam. The vertical variant is
a tall ellipse (narrow + tall) for top/bottom blooms — e.g. anchored to
the top edge of a section as a soft entry mist, or the bottom edge as
an exit mist. Pair with `inset: 0 auto auto 0` etc. positioning in the
consuming section. */
.section-bloom--vertical {
background: radial-gradient(
ellipse 30% 80% at 50% 50%,
rgba(200, 16, 46, 0.10) 0%,
rgba(200, 16, 46, 0.06) 28%,
rgba(200, 16, 46, 0.025) 55%,
rgba(200, 16, 46, 0.01) 75%,
transparent 90%
);
}
/* ==========================================================================
4. TYPE LADDER RHYTHM
--------------------------------------------------------------------------
Apply `.type-ladder` to every