/* Requested SmoothUI effects, tuned to the existing neutral/blue token system. */
:root {
  --metal-shadow: #929eaf;
  --metal-mid: #bac6d5;
  --metal-highlight: #f7f9fd;
  --progress-thickness: 3px;
}
.scroll-progress { position: absolute; inset: auto 0 0; height: var(--progress-thickness); overflow: hidden; pointer-events: none; }
.scroll-progress-fill { width: 100%; height: 100%; transform: translateX(-100%); background: linear-gradient(90deg, var(--accent) 0%, var(--accent) calc(100% - 2.25rem), var(--link) 100%); }
@supports (background-clip: text) {
  .hero h1 .liquid-metal {
    background-image: linear-gradient(100deg, var(--metal-shadow) 0%, var(--metal-highlight) 16%, var(--metal-mid) 32%, var(--metal-highlight) 46%, var(--metal-shadow) 62%, var(--metal-highlight) 78%, var(--metal-shadow) 100%);
    background-size: 300% 100%;
    background-position: 50% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.contact { position: relative; isolation: isolate; overflow: hidden; }
.contact-layout { position: relative; z-index: 1; }
.aurora-curtain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora-curtain canvas { display: block; width: 100%; height: 100%; opacity: 0.8; }
.aurora-fallback { position: absolute; inset: 0; opacity: 0.22; background: radial-gradient(30% 90% at 12% 110%, var(--accent) 0%, transparent 72%), radial-gradient(24% 76% at 40% 110%, var(--link) 0%, transparent 70%); }
.aurora-curtain[data-renderer='webgl2'] .aurora-fallback { display: none; }
.aurora-curtain::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--surface-raised) 55%, transparent) 45%, var(--surface-raised) 75%); }
.motion-toggle { min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 0.75rem; background: var(--surface-canvas); color: var(--text-secondary); transition: border-color var(--duration-fast), color var(--duration-fast); }
.motion-toggle:hover { border-color: var(--input-border); color: var(--text-primary); }
.motion-toggle:disabled { cursor: default; color: var(--text-muted); }
.footer-actions { display: flex; align-items: center; gap: var(--space-6); }
@media (max-width: 760px) {
  .aurora-curtain::after { background: linear-gradient(180deg, transparent, var(--surface-raised) 65%); }
  .footer-bottom { flex-wrap: wrap; }
  .footer-actions { gap: var(--space-4); }
}
@media (forced-colors: active) {
  .hero h1 .liquid-metal { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .aurora-curtain { display: none; }
  .scroll-progress-fill { background: Highlight; }
}
@media print {
  .hero h1 .liquid-metal { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
  .aurora-curtain, .scroll-progress, .motion-toggle { display: none; }
}