/*
Layout Verification Checklist
[ ] Grid matches screenshots
[ ] Spacing ratios preserved
[ ] Overlapping elements positioned correctly
[ ] Responsive breakpoints mirror reference
[ ] Animations enhance without breaking layout
*/

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 160ms;
  --duration-med: 360ms;
  --duration-slow: 720ms;
  --duration-page: 820ms;

  --stagger-step: 100ms;
  --stagger-tight: 70ms;
  --float-duration: 4200ms;
  --tilt-perspective: 900px;

  /* Button hover: luxury gold left / burgundy right */
  --btn-glow-outer-warm: -22px 0 34px -20px rgba(197, 160, 89, 0.48);
  --btn-glow-outer-warm-wide: -52px 0 48px -34px rgba(197, 160, 89, 0.18);
  --btn-glow-outer-cool: 22px 0 34px -20px rgba(109, 0, 26, 0.44);
  --btn-glow-outer-cool-wide: 52px 0 48px -34px rgba(109, 0, 26, 0.16);
  --btn-glow-depth: 0 10px 22px -14px rgba(0, 0, 0, 0.55);

  --btn-glow-inset-edge-warm: inset 1px 0 0 rgba(197, 160, 89, 0.85);
  --btn-glow-inset-edge-cool: inset -1px 0 0 rgba(109, 0, 26, 0.78);
  --btn-glow-inset-mix-warm: inset 6px 0 10px -4px rgba(197, 160, 89, 0.16);
  --btn-glow-inset-mix-cool: inset -6px 0 10px -4px rgba(109, 0, 26, 0.14);
  --btn-glow-inset-shine-cap: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --btn-glow-inset-shine-soft: inset 0 3px 5px rgba(255, 255, 255, 0.1);

  --btn-spot-radial:
    radial-gradient(
      circle clamp(38px, 26%, 64px) at var(--cursor-x, 50%) var(--cursor-y, 50%),
      rgba(255, 255, 255, 0.34) 0%,
      rgba(197, 160, 89, 0.22) 18%,
      rgba(109, 0, 26, 0.14) 45%,
      transparent 62%
    );
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-med: 1ms;
    --duration-slow: 1ms;
    --duration-page: 1ms;
    --stagger-step: 0ms;
    --stagger-tight: 0ms;
    --float-duration: 1ms;
  }
}