/* ===================================================================== MOTION SYSTEM v1 — global polish layer Loaded after figures.css on every article + hub. Designed to ENHANCE existing inline styles without overriding them. No layout changes. No color reassignment. No required markup updates. ===================================================================== */ :root { /* Motion vocabulary — 4 curves */ --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1); /* soft arrival */ --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* committed leave */ --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1); /* subtle settle */ --ease-precision: cubic-bezier(0.4, 0, 0.2, 1); /* material */ /* Duration scale */ --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 560ms; --dur-5: 840ms; } /* ---------- Series chip asymmetry ---------- The series-strip footer paints all four chips at full opacity inline. Without touching markup, dim the non-current ones based on the attribute set by motion.js. "Current" gets a soft accent glow; others recede to ~42% and lift on hover. */ body[data-series] .series-strip .series-chip { opacity: 0.42; filter: saturate(0.55); transition: opacity var(--dur-3) var(--ease-entrance), filter var(--dur-3) var(--ease-entrance), transform var(--dur-2) var(--ease-emphasis), box-shadow var(--dur-3) var(--ease-entrance); will-change: transform; } body[data-series] .series-strip .series-chip:hover { opacity: 1; filter: saturate(1); transform: translateY(-2px); } body[data-series="agentic"] .series-strip .series-chip[href="/writing/agentic"], body[data-series="harness"] .series-strip .series-chip[href="/writing/harness"], body[data-series="evals"] .series-strip .series-chip[href="/writing/evals"], body[data-series="ai-pm-os"] .series-strip .series-chip[href="/writing/ai-pm-os"] { opacity: 1; filter: saturate(1.05); box-shadow: 0 6px 24px -8px var(--current-accent, rgba(244,63,94,0.55)); } body[data-series="agentic"] { --current-accent: rgba(6,182,212,0.55); } body[data-series="harness"] { --current-accent: rgba(244,63,94,0.55); } body[data-series="evals"] { --current-accent: rgba(157,78,221,0.55); } body[data-series="ai-pm-os"] { --current-accent: rgba(245,158,11,0.55); } /* ---------- Next-card lift refinement ---------- Replace generic scale hover with luminance-lift. Won't fight existing transitions because we increase shadow specificity via attribute selector. */ .next-card { transition: transform var(--dur-3) var(--ease-emphasis), box-shadow var(--dur-3) var(--ease-entrance), border-color var(--dur-3) var(--ease-entrance) !important; } /* ---------- Figure entrance choreography ---------- Opt-in via .figure-stage class added by motion.js to large figure containers. Children fade + lift on stage activation; staggered via inline --i. */ /* Guard against SVG children — a CSS `transform` on an , true italic for , optional eyebrow when caption begins with "Fig" / "Figure". Targets existing classes only. No markup needed. */ .svg-caption, .sig-svg-caption, .signature-caption, .signature-svg-caption, .sig-svg-figcaption, .diagram-caption-line, [class$="-caption"]:not(.recap-eyebrow):not(.cross-series-eyebrow), figcaption { font-family: var(--font-body, 'Newsreader', Georgia, serif); font-size: clamp(0.92rem, 1.5vw, 1rem); line-height: 1.55; letter-spacing: 0.005em; color: var(--ink-faint, #5A5D67); font-style: normal; text-wrap: pretty; max-width: 64ch; margin-left: auto; margin-right: auto; } .svg-caption strong, figcaption strong, [class$="-caption"]:not(.recap-eyebrow) strong { color: var(--ink-main, #111318); font-weight: 600; font-family: var(--font-sans, 'Inter', sans-serif); font-size: 0.96em; letter-spacing: -0.005em; } .svg-caption em, figcaption em, [class$="-caption"] em { font-style: italic; color: var(--ink-body, #1A1C20); } /* Caption edge padding on narrow screens — prevents flush-bleed figures from letting their captions hug the viewport edge. */ @media (max-width: 640px) { .svg-caption, .sig-svg-caption, .signature-caption, .signature-svg-caption, .sig-svg-figcaption, .diagram-caption-line, [class$="-caption"]:not(.recap-eyebrow):not(.cross-series-eyebrow), figcaption { padding-left: 1rem; padding-right: 1rem; font-size: 0.9rem; line-height: 1.5; } } /* ---------- 2. PAGE-TURN OUTBOUND FADE ---------- When the reader clicks an internal /writing/ link, motion.js sets data-pageturn="true" on and we paint a thin overlay tinted to the destination series. ~220ms — long enough to register, short enough not to feel laggy on fast networks. */ html[data-pageturn="true"]::after { content: ""; position: fixed; inset: 0; z-index: 99998; pointer-events: none; background: var(--pageturn-tint, rgba(3, 4, 7, 0.85)); opacity: 0; animation: pageturn-fade 240ms var(--ease-precision, cubic-bezier(0.4,0,0.2,1)) forwards; } @keyframes pageturn-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html[data-pageturn="true"]::after { animation: none; opacity: 0; } } /* ============================================================ HARNESS · SVG title consistency (v1) Every SVG frame / figure title reads as a single, highly legible sans-serif label. No italic display serif at title size — that was hard to read at small caps sizes. Reveal blur is disabled on titles so they never appear faded/ghosted. ============================================================ */ .sig-svg-frame .sig-svg-eyebrow, .attribution-svg .attribution-title, .harness-figure .figure-eyebrow, .harness-figure .figure-title, .recap-block h2, .svg-figure-title { font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #0B0D12 !important; line-height: 1.15 !important; } .sig-svg-frame .sig-svg-heading, .harness-figure .figure-heading { font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #0B0D12 !important; font-size: clamp(1.35rem, 2.4vw, 1.8rem) !important; line-height: 1.2 !important; margin-bottom: 2rem !important; text-align: center; } .sig-svg-frame .sig-svg-eyebrow { font-size: 0.72rem !important; color: #E11D48 !important; /* harness red — same accent everywhere */ margin-bottom: 0.75rem !important; } /* SVG titles must never render in the blurred reveal state. The reveal wrapper still animates the SVG body; the title stays readable end-to-end. */ .reveal .sig-svg-heading, .reveal .sig-svg-eyebrow, .reveal .attribution-title, .reveal .figure-title, .reveal .figure-heading, .reveal .figure-eyebrow, .sig-svg-heading.reveal, .sig-svg-eyebrow.reveal, .attribution-title.reveal { opacity: 1 !important; filter: none !important; transform: none !important; } /* Article section H2s — the big serif titles that were reading as ghosted italic. Keep the editorial feel but lift contrast so they never blend into the page. */ .text-col h2 { color: #0B0D12 !important; font-style: normal !important; letter-spacing: -0.02em !important; }