/* Design System v1 visual/motion extension. Scene-specific geometry stays local. */
:root {
  --color-white: #fff;
  --color-dark: #151927;
  --color-muted-on-dark: #aeb2c0;
  --color-accent-on-dark: #aaa4ff;
  --color-label-on-accent: #d8d5ff;
  --color-emphasis-on-accent: #c8c4ff;
  --color-line-on-dark: #3c4050;
  --surface-paper: var(--paper);
  --surface-dark: var(--color-dark);
  --surface-accent: var(--accent);
  --surface-header: #f5f3eedd;
  --surface-header-blur: 12px;
  --border-hairline: 1px;
  --radius-flat: 0;
  --radius-orbit: 50%;
  --section-space-compact: var(--space-9);
  --section-space-roomy: var(--space-11);
  --layout-inset: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
  --content-details: 900px;
  --image-overscan: 1.08;
  --image-filter-color: saturate(.72) contrast(1.05);
  --image-filter-mono: grayscale(1) saturate(.45);
  --image-filter-grayscale: grayscale(1);
  --grid-size: var(--page-gutter);
  --grid-pattern: linear-gradient(var(--line) var(--border-hairline), transparent var(--border-hairline)), linear-gradient(90deg, var(--line) var(--border-hairline), transparent var(--border-hairline));
  --duration-ui: 300ms;
  --duration-reveal-basic: 500ms;
  --duration-reveal: 800ms;
  --duration-intro: 1100ms;
  --ease-ui: ease;
  /* GSAP named easing curves. Scroll progress uses linear interpolation. */
  --ease-reveal-basic: power1.out;
  --ease-reveal: power2.out;
  --ease-intro: power3.out;
  --ease-scroll: none;
  --reveal-distance: 40px;
  --reveal-distance-wide: 70px;
  --stagger-intro: 120ms;
  --stagger-reveal: 140ms;
  --stagger-basic: 100ms;
  --stagger-decoration: 80ms;
  --scroll-scrub: 1000ms;
  --scroll-scrub-soft: 1200ms;
  --scroll-scrub-slow: 1400ms;
  --scroll-scrub-image: 1600ms;
}
html { scroll-behavior: smooth; }
.surface-paper { background: var(--surface-paper); color: var(--ink); }
.surface-dark { background: var(--surface-dark); color: var(--paper); }
.surface-accent { background: var(--surface-accent); color: var(--color-white); }
.surface-dark .kicker { color: var(--color-accent-on-dark); }
.surface-accent .kicker { color: var(--color-label-on-accent); }
.surface-accent h2 em { color: var(--color-emphasis-on-accent); }
.section-space { padding-block: var(--section-space); }
.section-space-compact { padding-block: var(--section-space-compact); }
.section-space-roomy { padding-block: var(--section-space-roomy); }
.layout-inset { padding-inline: var(--layout-inset); }
.width-reading { width: 100%; max-width: var(--content-reading); }
.width-details { width: 100%; max-width: var(--content-details); }
.width-content { width: 100%; max-width: var(--content-width); }
.image-cover { width: 100%; height: 100%; object-fit: cover; }
.image-hero { transform: scale(var(--image-overscan)); }
.image-color { filter: var(--image-filter-color); }
.image-mono { filter: var(--image-filter-mono); }
.image-grayscale { filter: var(--image-filter-grayscale); }
.visual-grid { background-image: var(--grid-pattern); background-size: var(--grid-size) var(--grid-size); mix-blend-mode: multiply; }
/* Flat content/controls; circles only for ornaments. No rounded-card system.
   The unused legacy photo stack retains its local 3px edge. */
.image-cover, .button { border-radius: var(--radius-flat); }
.orbit-ring, .motion-lines i { border-radius: var(--radius-orbit); }
@media (max-width: 700px) {
  :root { --image-filter-color: saturate(.62) contrast(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --duration-ui: 0ms; }
}

/* Scenes own absolute/transformed artwork. Clip paint locally, not root geometry.
   overflow:clip preserves the sticky heading (hidden creates a scroll container). */
:where(.scene,.cv-hero) { position:relative; isolation:isolate; overflow:clip; }
:where([data-scene-visual]) { pointer-events:none; }
:where(.arrival-background,.experience-image,.cv-hero-bg,.motion-lines) { overflow:clip; contain:paint; }