@webority/theme 0.0.9

package/scss/_components.scss

@@ -0,0 +1,720 @@
+// =====================================================================
+// Lumex — Shared custom component CSS.
+// Imported AFTER Bootstrap. Anything that needs to render identically
+// on the Razor marketing site AND the React customer portal lives here.
+// Per-project styling (page layouts, route-specific tweaks) stays in
+// the consuming project, NOT in this shared theme.
+// =====================================================================
+
+
+// ---- Brand wordmark / logo ------------------------------------------
+.lumex-logo {
+    height: 2rem;
+    width: auto;
+}
+
+
+// ---- Section helpers ------------------------------------------------
+// Marketing + portal both use vertically-padded sections with the
+// brand's spacing rhythm. Bootstrap's py-* gets you part-way; these
+// are the named variants the design system reaches for.
+.section-y-sm { padding-block: 3rem; }
+.section-y    { padding-block: 5rem; }
+.section-y-lg { padding-block: 7rem; }
+@media (min-width: 768px) {
+    .section-y-sm { padding-block: 4rem; }
+    .section-y    { padding-block: 6rem; }
+    .section-y-lg { padding-block: 9rem; }
+}
+
+
+// ---- Eyebrow (accent-dot + label) -----------------------------------
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--wui-primary);
+}
+.eyebrow::before {
+    content: "";
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: var(--wui-primary);
+}
+.eyebrow--on-dark {
+    color: rgba(255, 255, 255, 0.85);
+}
+.eyebrow--on-dark::before {
+    background: #FFFFFF;
+}
+
+
+// ---- Display heading -------------------------------------------------
+// Bootstrap's .display-1..6 ladder skews bigger than our locked design.
+// .h-display drops in where the marketing hero needs the locked
+// font-weight 500 + tight letter-spacing.
+.h-display {
+    font-weight: 500;
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+}
+
+
+// ---- Gradient backgrounds -------------------------------------------
+.bg-hero-gradient { background: var(--wui-hero-gradient); }
+.bg-cta-gradient  { background: var(--wui-cta-gradient); }
+
+
+// ---- Button polish (used by both Razor + React) ---------------------
+// Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
+// retained because it's a tactile signal, not a depth cue.
+.btn-primary {
+    // Pin hover/active to the reference's `--accent-dark` (#2440C4).
+    // Bootstrap's auto-shaded $primary would compute a slightly different
+    // shade, drifting off-spec by a few hex points.
+    --bs-btn-hover-bg:            #2440C4;
+    --bs-btn-hover-border-color:  #2440C4;
+    --bs-btn-active-bg:           #2440C4;
+    --bs-btn-active-border-color: #2440C4;
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+}
+
+
+// ---- Marketing pill buttons (locked design parity) -------------------
+// Pixel-locked to the standalone reference's `btn-squircle inline-flex
+// h-12 items-center text-sm font-medium` pattern. Each marketing CTA
+// layers .btn-pill on a Bootstrap variant — these classes only override
+// Bootstrap's btn CSS vars (height / padding / radius / font), so
+// every variant inherits the right size without redefining colors.
+//
+// Reference values:
+//   - height       : 48px         (h-12 = 3rem)
+//   - radius       : 16px          (matches `.btn-squircle` literal)
+//   - font         : 14px / 500    (text-sm font-medium)
+//   - padding-x    : 20px (px-5)   default — Watch demo / outline-dark
+//                    Primary CTA overrides to 24px (px-6) inline
+//   - corner-shape : squircle      (iOS-style smooth curve)
+//
+// Example:
+//   <a class="btn btn-primary btn-pill" style="--bs-btn-padding-x:1.5rem;">…</a>
+//   <a class="btn btn-light btn-pill-sm">Learn more</a>
+.btn-pill {
+    --bs-btn-padding-y:     0;          // height driven by min-height + flex centering
+    --bs-btn-padding-x:     1.25rem;    // 20px (px-5)
+    --bs-btn-font-size:     0.875rem;   // 14px
+    --bs-btn-font-weight:   500;
+    --bs-btn-line-height:   1.25;
+    --bs-btn-border-radius: 16px;       // matches .btn-squircle exactly
+    min-height: 3rem;                   // 48px (h-12)
+
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;                      // 6px — matches primary arrow's ml-1.5
+}
+.btn-pill-sm {
+    --bs-btn-padding-y:     0;
+    --bs-btn-padding-x:     0.875rem;   // 14px (px-3.5)
+    --bs-btn-font-size:     0.875rem;   // 14px (text-sm)
+    --bs-btn-font-weight:   500;
+    --bs-btn-line-height:   1.25;
+    --bs-btn-border-radius: 12px;
+    min-height: 2.5rem;                 // 40px (h-10) — reference "Learn more" CTA
+
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+
+// ---- Ghost-dark button (frosted glass on light surface) -------------
+// Pixel-locked to the reference's `WatchDemoButton` "outline-dark" variant
+// (src/components/marketing/brand/watch-demo-button.tsx):
+//   - border  : rgba(13, 24, 43, 0.15)  (foreground/15 in marketing-root)
+//   - bg      : rgba(255, 255, 255, 0.6) (surface/60)
+//   - text    : #0d182b                  (text-foreground in marketing-root)
+//   - blur    : 4px                      (backdrop-blur-sm)
+//   - hover bg: #ffffff                  (hover:bg-surface = full opacity)
+.btn-ghost-dark {
+    --bs-btn-color:               #0d182b;
+    --bs-btn-bg:                  rgba(255, 255, 255, 0.60);
+    --bs-btn-border-color:        rgba(13, 24, 43, 0.15);
+    --bs-btn-hover-color:         #0d182b;
+    --bs-btn-hover-bg:            #ffffff;
+    --bs-btn-hover-border-color:  rgba(13, 24, 43, 0.20);
+    --bs-btn-active-color:        #0d182b;
+    --bs-btn-active-bg:           #ffffff;
+    --bs-btn-active-border-color: rgba(13, 24, 43, 0.20);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+
+
+// ---- Card "lifted" (shadowless) -------------------------------------
+// Previously a soft drop-shadow card; now flat. The `.card-lifted`
+// class is preserved so existing call sites don't break — it now
+// expresses elevation only via the 1px hover translate (kept as a
+// tactile signal, not a depth cue). No box-shadow, here or on hover.
+.card-lifted {
+    transition: transform 0.2s var(--wui-ease-out-quart);
+    &:hover {
+        transform: translateY(-1px);
+    }
+}
+
+
+// ---- Inputs (Lumex canonical) ---------------------------------------
+// 5 locked states — default / hover / focus / disabled / error —
+// matching the reference `<Input>` component. Bootstrap drives the base
+// look via $input-* vars in _lumex-variables.scss; these blocks add the
+// hover-border-darken cue and the leading/trailing-slot wrapper.
+//
+// The error state is driven by `aria-invalid="true"` (NOT by Bootstrap's
+// .is-invalid class) so accessibility tooling and visual cue stay in
+// sync without extra markup.
+
+.form-control,
+.form-select {
+    transition: border-color 0.15s ease;
+}
+.form-control:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]),
+.form-select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]) {
+    border-color: var(--color-border-strong);   // --wui-text-3 @ 60%
+}
+.form-control[aria-invalid="true"],
+.form-select[aria-invalid="true"] {
+    border-color: var(--bs-danger);
+}
+.form-control[aria-invalid="true"]:focus,
+.form-select[aria-invalid="true"]:focus {
+    border-color: var(--bs-danger);
+    box-shadow: none;
+}
+
+// Optional helper class for forms that prefer the explicit Bootstrap
+// validation pattern. Mirrors aria-invalid styling.
+.form-control.is-invalid,
+.form-select.is-invalid {
+    border-color: var(--bs-danger);
+    background-image: none;     // kill Bootstrap's exclamation-mark SVG
+    padding-right: 0.875rem;
+}
+.form-control.is-invalid:focus,
+.form-select.is-invalid:focus {
+    border-color: var(--bs-danger);
+    box-shadow: none;
+}
+
+
+// ---- Input group (leading / trailing slots) ------------------------
+// Single outlined box that contains leading icon + input + trailing
+// icon (or clear button). Border lives on the wrapper, so hover / focus
+// / error states are visible regardless of which child has focus.
+//
+// Usage:
+//   <div class="lumex-input-group">
+//     <span class="lumex-input-leading"><i class="bi bi-currency-dollar"></i></span>
+//     <input type="text" class="form-control" placeholder="0.00" />
+//   </div>
+//
+//   <div class="lumex-input-group">
+//     <input type="password" class="form-control" placeholder="Password" />
+//     <button type="button" class="lumex-input-trailing"><i class="bi bi-eye"></i></button>
+//   </div>
+.lumex-input-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-inline: 0.875rem;
+    height: calc(2.5rem + 2px);          // 40px box + 1px border each side
+    background: var(--wui-bg-light, #FFFFFF);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.625rem;             // 10px — matches the bare input radius
+    transition: border-color 0.15s ease;
+
+
+}
+.lumex-input-group:hover:not(:focus-within):not(.is-disabled) {
+    border-color: rgba(120, 130, 157, 0.6);
+}
+.lumex-input-group:focus-within {
+    border-color: var(--wui-primary, #2F50E4);
+}
+.lumex-input-group.is-disabled,
+.lumex-input-group:has(input:disabled) {
+    background: var(--wui-bg-muted, #F5F6FA);
+    cursor: not-allowed;
+    border-color: var(--bs-border-color);
+}
+.lumex-input-group.has-error,
+.lumex-input-group:has(input[aria-invalid="true"]) {
+    border-color: var(--bs-danger);
+}
+
+// Strip the bare input's own chrome — the wrapper carries it all.
+.lumex-input-group > .form-control {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    padding-block: 0;
+    padding-inline: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none !important;
+    border-radius: 0;
+}
+.lumex-input-group > .form-control:focus,
+.lumex-input-group > .form-control:hover {
+    border: 0;
+    box-shadow: none !important;
+    background: transparent;
+}
+
+// Leading + trailing slots — flex children that hold icons or buttons.
+// Default muted color, inherits hover/focus state from the wrapper.
+.lumex-input-leading,
+.lumex-input-trailing {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--wui-text-3, #78829D);
+    flex-shrink: 0;
+    font-size: 1rem;
+    line-height: 1;
+    pointer-events: none;       // icons are visual only by default
+}
+
+// When the trailing slot is a button (clear, toggle, etc.), reset
+// button chrome and re-enable pointer events.
+button.lumex-input-trailing,
+button.lumex-input-leading {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    pointer-events: auto;
+    cursor: pointer;
+    transition: color 0.15s ease;
+}
+button.lumex-input-trailing:hover,
+button.lumex-input-leading:hover {
+    color: var(--wui-text-1, #252F4A);
+}
+button.lumex-input-trailing:focus-visible,
+button.lumex-input-leading:focus-visible {
+    outline: none;
+    color: var(--wui-primary);
+    border-radius: 9999px;
+}
+
+
+// ---- Link with the marketing wipe underline (matches locked design) -
+// Uses background-image (not a pseudo-element with inline-block) so the link
+// stays inline. inline-block + overflow:hidden used to give the link its own
+// baseline, which dropped it below surrounding prose whenever the parent had
+// a non-default font-size (see Pricing footnote "Talk to sales" regression).
+
+.link-wipe {
+    background-image: linear-gradient(currentColor, currentColor);
+    background-repeat: no-repeat;
+    background-position-x: 100%;
+    background-position-y: 100%;
+    background-size: 0 1px;
+    transition: background-size 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@media (hover: hover) {
+    .link-wipe:hover {
+        background-position-x: 0%;
+        background-size: 100% 1px;
+    }
+}
+.link-wipe--accent {
+    background-image: linear-gradient(var(--wui-primary), var(--wui-primary));
+}
+
+
+// ---- Tabular-numerals helper for KPIs / counters --------------------
+.tabular-nums { font-variant-numeric: tabular-nums; }
+
+
+// ---- Container with the marketing 1512px canvas ---------------------
+// Pair with --wui-container-pad (responsive). Distinct from Bootstrap's
+// .container (max-width steps at 540/720/960/1140/1320). Use this when a
+// section needs to breathe up to 1512px on wide monitors.
+.container-cloves {
+    max-width: var(--wui-container-max, 1512px);
+    margin-inline: auto;
+    padding-inline: var(--wui-container-pad, 24px);
+    width: 100%;
+}
+
+
+// ---- Squircle corners (iOS-style) -----------------------------------
+// `corner-shape: squircle` renders a smoother continuous curve instead
+// of a simple circular arc — the same effect iOS app icons use. Mirrors
+// the locked design's global `* { corner-shape: squircle }` rule.
+// Browser support: Chrome 138+ and Safari 16+ with -webkit- prefix.
+// Older browsers ignore the property and fall back to standard
+// border-radius — no breakage.
+//
+// Apply by default to EVERY element, then explicitly opt
+// `.rounded-circle` and `.rounded-pill` back to `round` — squircle on
+// a 50% / 9999px radius reads as a subtly rounded square rather than a
+// true circle/pill.
+* {
+
+
+}
+.rounded-circle,
+.rounded-pill {
+
+
+}
+
+// Named opt-in utilities — preserved for places where authors want a
+// specific squircle radius without relying on Bootstrap's $border-radius.
+.btn-squircle {
+    border-radius: 16px;
+
+
+}
+.rounded-squircle {
+    border-radius: 32px;
+
+
+}
+
+
+// ---- Hero radial wash ------------------------------------------------
+// Soft tinted glow over an elevated surface — sits behind hero copy.
+.hero-wash {
+    background:
+        radial-gradient(80% 50% at 50% 0%,
+            rgba(47, 80, 228, 0.08), transparent 70%),
+        var(--wui-bg-elevated);
+}
+
+
+// ---- Page entry fade -------------------------------------------------
+// Apply to <main> in _Layout so every page entry has a polite fade-up.
+.page-fade-in {
+    animation: pageFadeIn 0.25s var(--wui-ease-ui) backwards;
+}
+
+
+// ---- Single-element fade-in ------------------------------------------
+.fade-in {
+    animation: fadeIn 220ms var(--wui-ease-out-quart);
+}
+
+
+// ---- Stagger groups --------------------------------------------------
+// Wrap a container in `.stagger-children` and its direct children
+// cascade in 40ms apart, capped at 12 children. For bigger groups,
+// use the IntersectionObserver-driven `[data-reveal]` pattern below.
+.stagger-children > * {
+    animation: staggerRise 360ms var(--wui-ease-out-quart) backwards;
+}
+.stagger-children > *:nth-child(1)  { animation-delay:   0ms; }
+.stagger-children > *:nth-child(2)  { animation-delay:  40ms; }
+.stagger-children > *:nth-child(3)  { animation-delay:  80ms; }
+.stagger-children > *:nth-child(4)  { animation-delay: 120ms; }
+.stagger-children > *:nth-child(5)  { animation-delay: 160ms; }
+.stagger-children > *:nth-child(6)  { animation-delay: 200ms; }
+.stagger-children > *:nth-child(7)  { animation-delay: 240ms; }
+.stagger-children > *:nth-child(8)  { animation-delay: 280ms; }
+.stagger-children > *:nth-child(9)  { animation-delay: 320ms; }
+.stagger-children > *:nth-child(10) { animation-delay: 360ms; }
+.stagger-children > *:nth-child(11) { animation-delay: 400ms; }
+.stagger-children > *:nth-child(12) { animation-delay: 440ms; }
+
+
+// ---- Opt-in single-element stagger -----------------------------------
+// Use when you need granular control: set `--stagger: 240ms` inline on
+// individual items inside a non-stagger-children container.
+.stagger-item {
+    opacity: 0;
+    animation: rise 320ms var(--wui-ease-out-quart) forwards;
+    animation-delay: var(--stagger, 0ms);
+}
+
+
+// ---- Press feedback --------------------------------------------------
+// Lightweight tactile alternative to a Material ripple. Add to any
+// pressable element (button, card link, chip). 80ms ease-out.
+.press-feedback {
+    transition: transform 80ms ease-out;
+}
+.press-feedback:active:not(:disabled) {
+    transform: scale(0.96);
+}
+
+
+// ---- Subtle hover lift -----------------------------------------------
+.lift-on-hover {
+    transition: transform 0.2s var(--wui-ease-out-quart),
+                box-shadow 0.2s var(--wui-ease-out-quart);
+}
+.lift-on-hover:hover {
+    transform: translateY(-1px);
+}
+
+
+// ---- Loading shimmer skeleton ----------------------------------------
+.shimmer {
+    position: relative;
+    overflow: hidden;
+    background: var(--wui-bg-muted);
+}
+.shimmer::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.5),
+        transparent);
+    transform: translateX(-100%);
+    animation: shimmer 1.4s infinite;
+}
+
+
+// ---- Marquee (customer-logo carousel etc.) ---------------------------
+// Pair with a flex wrapper that duplicates its children so the
+// translateX(-50%) loops seamlessly. Example:
+//   <div class="overflow-hidden">
+//     <div class="d-flex animate-marquee" style="width: max-content;">
+//       <ul class="d-flex gap-5 mb-0 list-unstyled">...</ul>
+//       <ul class="d-flex gap-5 mb-0 list-unstyled" aria-hidden="true">...</ul>
+//     </div>
+//   </div>
+.animate-marquee {
+    animation: marketing-marquee 32s linear infinite;
+}
+
+
+// ---- Scroll-triggered reveals (paired with wwwroot/js/reveal.js) -----
+// Author opts in by adding `data-reveal` to a section. The JS module
+// adds `.is-visible` when the element scrolls into view; CSS transitions
+// fade + lift on the transition. Stagger descendants via
+// `[data-reveal-stagger] > *` with `--reveal-step` inline (default 40ms).
+[data-reveal] {
+    opacity: 0;
+    transform: translateY(8px);
+    transition:
+        opacity   540ms var(--wui-ease-out-quart),
+        transform 540ms var(--wui-ease-out-quart);
+    will-change: opacity, transform;
+}
+[data-reveal].is-visible {
+    opacity: 1;
+    transform: none;
+}
+
+[data-reveal-stagger] > * {
+    opacity: 0;
+    transform: translateY(8px);
+    transition:
+        opacity   540ms var(--wui-ease-out-quart),
+        transform 540ms var(--wui-ease-out-quart);
+}
+[data-reveal-stagger].is-visible > * {
+    opacity: 1;
+    transform: none;
+}
+[data-reveal-stagger].is-visible > *:nth-child(1)  { transition-delay: calc(var(--reveal-step,  40ms) * 0);  }
+[data-reveal-stagger].is-visible > *:nth-child(2)  { transition-delay: calc(var(--reveal-step,  40ms) * 1);  }
+[data-reveal-stagger].is-visible > *:nth-child(3)  { transition-delay: calc(var(--reveal-step,  40ms) * 2);  }
+[data-reveal-stagger].is-visible > *:nth-child(4)  { transition-delay: calc(var(--reveal-step,  40ms) * 3);  }
+[data-reveal-stagger].is-visible > *:nth-child(5)  { transition-delay: calc(var(--reveal-step,  40ms) * 4);  }
+[data-reveal-stagger].is-visible > *:nth-child(6)  { transition-delay: calc(var(--reveal-step,  40ms) * 5);  }
+[data-reveal-stagger].is-visible > *:nth-child(7)  { transition-delay: calc(var(--reveal-step,  40ms) * 6);  }
+[data-reveal-stagger].is-visible > *:nth-child(8)  { transition-delay: calc(var(--reveal-step,  40ms) * 7);  }
+[data-reveal-stagger].is-visible > *:nth-child(9)  { transition-delay: calc(var(--reveal-step,  40ms) * 8);  }
+[data-reveal-stagger].is-visible > *:nth-child(10) { transition-delay: calc(var(--reveal-step,  40ms) * 9);  }
+[data-reveal-stagger].is-visible > *:nth-child(11) { transition-delay: calc(var(--reveal-step,  40ms) * 10); }
+[data-reveal-stagger].is-visible > *:nth-child(12) { transition-delay: calc(var(--reveal-step,  40ms) * 11); }
+
+
+// ---- Keyframes -------------------------------------------------------
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pageFadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes rise {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes staggerRise {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes shimmer {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+@keyframes marketing-marquee {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-50%); }
+}
+
+
+// ---- Refined native scrollbars --------------------------------------
+// Mirrors the locked design's always-visible scrollbar treatment:
+//
+//   - 8px thin WebKit thumb (also Firefox via `scrollbar-width: thin`)
+//   - Quiet grey-blue tint always visible at rest (~40% alpha)
+//   - Brighter on hover (~60% alpha) and active (~80%)
+//   - Pill thumb with a 2px transparent border (visual cushion)
+//   - `scrollbar-gutter: stable` on <html>/<body> so the page never
+//     shifts when scrollable content grows/shrinks. Internal containers
+//     (avatars, badges, rounded buttons) intentionally skip the gutter
+//     reservation — applying it everywhere would push centered glyphs
+//     off-center inside rounded boxes.
+//
+// `wwwroot/js/scroll-state.js` toggles `html.is-scrolling` for ~800ms
+// after each scroll event; the thumb gets an extra opacity bump while
+// the class is on, giving subtle "I'm scrolling now" feedback without
+// sacrificing the always-visible affordance.
+html,
+body {
+    scrollbar-gutter: stable;
+}
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(145, 158, 171, 0.45) transparent;
+}
+*::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+    background-color: rgba(145, 158, 171, 0.45);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    min-height: 36px;
+    min-width: 36px;
+    transition: background-color 220ms ease;
+}
+*::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(145, 158, 171, 0.65);
+    background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:active {
+    background-color: rgba(145, 158, 171, 0.85);
+    background-clip: padding-box;
+}
+*::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+// While the page is actively scrolling, give the thumb a slight extra
+// pop so the user can track its position more easily.
+html.is-scrolling * {
+    scrollbar-color: rgba(145, 158, 171, 0.65) transparent;
+}
+html.is-scrolling *::-webkit-scrollbar-thumb {
+    background-color: rgba(145, 158, 171, 0.65);
+}
+
+// Utility: completely hide a scrollbar (e.g., for marquee/horizontal
+// carousels where the rail itself is visually intrusive).
+.scrollbar-hide {
+    scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
+
+// ---- Render perf primitives ----------------------------------------
+//
+// `content-visibility: auto` lets the browser skip layout + paint for
+// offscreen sections — a 1500px page with 8 sections paints in ~⅓ the
+// time after this change. Sections opt in via [data-section] (already
+// used on most homepage sections) or .section-y / .section-y-lg /
+// .section-y-sm wrappers. `contain-intrinsic-size` reserves a sane
+// height so the scrollbar doesn't snap as sections paint in.
+//
+// Notes:
+//   - Don't apply to the inner hero or any element that hosts
+//     position: sticky descendants — `content-visibility` creates a
+//     containing block which breaks sticky positioning in those areas.
+//   - First section is excluded — it's above the fold on every page,
+//     no benefit and risks delaying LCP.
+[data-section]:not(:first-of-type):not([data-section="inner-hero"]):not([data-section="home-hero"]):not([data-section-skip-cv]),
+.section-y:not(:first-of-type):not([data-section-skip-cv]),
+.section-y-sm:not(:first-of-type):not([data-section-skip-cv]),
+.section-y-lg:not(:first-of-type):not([data-section-skip-cv]) {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 720px;
+}
+
+// GPU-promote frequently-animated elements at rest so the compositor
+// can flip them on hover without a paint hit. We deliberately do NOT
+// add will-change globally — that costs memory on every element. Only
+// elements with motion-on-interact get it.
+.card-lifted,
+.lift-on-hover,
+.press-feedback,
+.contact-submit,
+.btn-pill,
+.btn-pill-sm,
+[data-reveal],
+[data-reveal-stagger] > * {
+    will-change: auto;            // baseline — opt out of promotion
+}
+.card-lifted:hover,
+.lift-on-hover:hover,
+.press-feedback:active,
+[data-reveal]:not(.is-visible),
+[data-reveal-stagger]:not(.is-visible) > * {
+    will-change: transform, opacity;
+}
+
+// Reduce paint on form-field focus rings — box-shadow repaints are
+// cheaper when the painted layer is isolated.
+.contact-field,
+.custom-select-toggle,
+.contact-submit {
+    backface-visibility: hidden;
+    transform: translateZ(0);
+}
+
+
+// ---- Reduced motion -------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+    .card-lifted,
+    .lift-on-hover,
+    .link-wipe,
+    .press-feedback {
+        transition: none;
+    }
+    .page-fade-in,
+    .fade-in,
+    .stagger-children > *,
+    .stagger-item,
+    .animate-marquee,
+    .shimmer::after,
+    [data-reveal],
+    [data-reveal-stagger] > * {
+        animation: none;
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+}