/* ux-polish.css — additive UX/motion layer for ldw.build Namespace: .lw-* — never touches the Vantage .v-reveal system. Flash-free: elements hide only when is set by the head script BEFORE first paint. If motion.js never signals ready, the head script removes lw-motion after 3s (failsafe) so content can never get stuck hidden. Reduced-motion: html.lw-motion is only added when (prefers-reduced-motion: no-preference). Animates opacity/transform only (no layout properties). Ease-out-expo, no bounce. */ html.lw-motion .section-label, html.lw-motion .section-title, html.lw-motion .section-desc, html.lw-motion .offer-item, html.lw-motion .topic-card, html.lw-motion .book-row, html.lw-motion .consult-stat, html.lw-motion .hero-tagline { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); } html.lw-motion .section-label.lw-in, html.lw-motion .section-title.lw-in, html.lw-motion .section-desc.lw-in, html.lw-motion .offer-item.lw-in, html.lw-motion .topic-card.lw-in, html.lw-motion .book-row.lw-in, html.lw-motion .consult-stat.lw-in, html.lw-motion .hero-tagline.lw-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.lw-motion .section-label, html.lw-motion .section-title, html.lw-motion .section-desc, html.lw-motion .offer-item, html.lw-motion .topic-card, html.lw-motion .book-row, html.lw-motion .consult-stat, html.lw-motion .hero-tagline { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Brand token alignment ──────────────────────────────────────────── Brand-lock says Signal = #E85D3A (orange, "the period that breaks the pattern"). Site CSS shipped --signal: #00E676 (green). Realign the brand accent (hero square + headline periods, 15 var(--signal) uses) to the lock. Functional state greens (e.g. .notify-success) are hardcoded, so unaffected. */ :root { --signal: #E85D3A !important; } /* ── Scroll progress (Signal accent) ────────────────────────────────── Thin precise progress line — on-brand for an operator/infrastructure voice. */ .lw-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; z-index: 9999; pointer-events: none; transition: transform .08s linear; } @media (prefers-reduced-motion: reduce) { .lw-progress { transition: none; } }