/* Illustrations share the product palette. Host layout belongs to each page. */
.ambient-art {
  position: absolute;
  pointer-events: none;
  user-select: none;
  width: 440px;
  color: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-border));
  opacity: 1;
}
.ambient-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.ambient-plate { fill: var(--ui-surface); stroke: currentColor; stroke-width: 1.2; }
.ambient-plate-feature { stroke: color-mix(in srgb, var(--ui-accent) 60%, var(--ui-border)); }
.ambient-plate-mid { fill: color-mix(in srgb, var(--ui-accent-soft) 60%, var(--ui-surface)); }
.ambient-section { fill: var(--ui-soft); stroke: currentColor; stroke-width: .8; }
.ambient-section-tint { fill: var(--ui-accent-soft); stroke: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border)); }
.ambient-section-solid { fill: var(--ui-accent); stroke: none; opacity: .68; }
.ambient-wave { fill: var(--ui-accent); opacity: .55; }
.ambient-rule { stroke: color-mix(in srgb, var(--ui-muted) 50%, var(--ui-border)); stroke-width: 1.6; stroke-linecap: round; }
.ambient-branch { stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ambient-connection { stroke: var(--ui-accent); stroke-width: 1.2; opacity: calc(.2 + var(--ambient-engagement, 0) * .25); }
.ambient-signal { fill: var(--ui-accent); opacity: 0; }
.ambient-layer, .ambient-scroll-plane { transform-box: view-box; }
.ambient-layer-back { transform: translate(calc(var(--ambient-x, 0) * 2px), calc(var(--ambient-y, 0) * 2px)); }
.ambient-layer-middle { transform: translate(calc(var(--ambient-x, 0) * 3px), calc(var(--ambient-y, 0) * 3px)); }
.ambient-layer-front { transform: translate(calc(var(--ambient-x, 0) * 5px), calc(var(--ambient-y, 0) * 4px)); }
.ambient-art[data-motion="moving"] .ambient-layer { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .ambient-enter .ambient-reveal { animation: ambient-scene-in 0.8s cubic-bezier(.16,1,.3,1) both; }
  @keyframes ambient-scene-in {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* The host defines a stable scroll subject; only its nested layers move.
     Keeping scroll and pointer transforms on separate groups prevents conflict. */
  @supports (animation-timeline: view()) {
    .ambient-art { view-timeline-name: --ambient-view; view-timeline-axis: block; }
    .ambient-scroll-plane {
      animation: ambient-scroll-depth 1s linear both;
      animation-timeline: --ambient-view;
      animation-range: cover 0% cover 100%;
    }
    .ambient-scroll-back { --ambient-scroll-from: 14px; --ambient-scroll-to: -14px; }
    .ambient-scroll-middle, .ambient-scroll-route { --ambient-scroll-from: 6px; --ambient-scroll-to: -6px; }
    .ambient-scroll-front { --ambient-scroll-from: 22px; --ambient-scroll-to: -22px; }
    @keyframes ambient-scroll-depth {
      from { transform: translateY(var(--ambient-scroll-from)); opacity: .65; }
      35%, 65% { opacity: 1; }
      to { transform: translateY(var(--ambient-scroll-to)); opacity: .7; }
    }
    .ambient-art[data-ambient-paused="true"] .ambient-scroll-plane { animation-play-state: paused; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-art * { animation: none !important; }
  .ambient-art .ambient-layer, .ambient-art .ambient-scroll-plane { transform: none !important; will-change: auto; }
  .ambient-art .ambient-signal { opacity: 0 !important; }
}