/* ============================================================ VASEO signature layer (PRD 28) - loads AFTER fixes.css ------------------------------------------------------------ The "Ledger" signature: the WebGL hero scaffold, the Index Rail, one reveal personality, the forest-wipe link, the mono readout, and the in-page motion toggle. Token-driven, BEM. Everything degrades: no JS / reduced-motion = full static page, no hidden content. ============================================================ */ /* ---- One reveal: "settle, do not bounce" -------------------- */ /* Hidden ONLY when motion is on (html.has-motion, set in ). No-JS / reduced-motion never hide content. */ html.has-motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); will-change: opacity, transform; } html.has-motion [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.has-motion [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---- Signature hero viz: static SVG poster + WebGL canvas --- */ .hero { position: relative; overflow: clip; isolation: isolate; } .hero__viz { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; } .hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero__poster { opacity: 0.9; color: var(--color-primary); } /* the canvas mounts OVER the poster only once live (JS-gated) */ .hero__canvas { opacity: 0; transition: opacity 1200ms var(--ease-out); } .hero__canvas.is-live { opacity: 1; } /* bone scrim: keep the headline side clean, let the field breathe right */ .hero__viz::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, var(--color-bg) 16%, color-mix(in srgb, var(--color-bg) 55%, transparent) 48%, transparent 72% ); } .hero__inner { position: relative; z-index: 1; } /* the poster stroke draws itself in once, on load (motion only) */ html.has-motion .hero__poster .hero__poster-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: vaseoDraw 2200ms var(--ease-out) 200ms forwards; } @keyframes vaseoDraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { html.has-motion .hero__poster .hero__poster-path { animation: none; stroke-dashoffset: 0; } } /* ---- Index Rail: sticky mono section spine ------------------ */ .index-rail { position: fixed; left: var(--space-4); top: 50%; transform: translateY(-50%); z-index: var(--z-chrome); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; } .index-rail__item { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text-muted); opacity: 0.55; transition: opacity var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .index-rail__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--letter-spacing-mono); font-variant-numeric: tabular-nums; position: relative; padding-left: 18px; } .index-rail__num::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: currentColor; transition: width var(--duration-base) var(--ease-out); } .index-rail__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .index-rail__item:hover, .index-rail__item:focus-visible, .index-rail__item.is-active { opacity: 1; color: var(--color-primary); } .index-rail__item.is-active .index-rail__num::before { width: 22px; } .index-rail__item.is-active .index-rail__name, .index-rail__item:hover .index-rail__name, .index-rail__item:focus-visible .index-rail__name { max-width: 180px; opacity: 1; } /* not enough room next to content below this width */ @media (max-width: 1320px) { .index-rail { display: none; } } /* ---- Forest wipe: underline that draws in on content links -- */ main p a:not(.c-btn), .hero__sub a:not(.c-btn) { text-decoration: none; color: var(--color-primary); background-image: linear-gradient(var(--color-primary), var(--color-primary)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--duration-base) var(--ease-out); } main p a:not(.c-btn):hover, main p a:not(.c-btn):focus-visible, .hero__sub a:not(.c-btn):hover { background-size: 100% 1.5px; } /* ---- Mono readout: tabular counters ------------------------- */ .mono-readout { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--letter-spacing-snug); } /* ---- In-page motion toggle (lives in the footer) ----------- */ .motion-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .motion-toggle:hover, .motion-toggle:focus-visible { color: var(--color-primary); border-color: var(--color-primary); } .motion-toggle__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); } .motion-toggle[aria-pressed="true"] .motion-toggle__dot { background: var(--color-text-muted); } /* ---- Editorial Ledger touch: one italic emphasis, flush-left */ .hero__title em, .h-display em { font-style: italic; }