/* Base duration for reference distance */
--base-duration: 300ms;
--base-distance: 100px;

/* Duration scales with distance */
/* 50px travel = 200ms, 200px travel = 450ms */

function getDuration(distance) {
  const baseDuration = 300;
  const baseDistance = 100;
  return Math.min(600, baseDuration * Math.sqrt(distance / baseDistance));
}

/* Desktop - full duration */
.transition { transition-duration: 400ms; }

/* Tablet - slightly faster */
@media (max-width: 1024px) {
  .transition { transition-duration: 350ms; }
}

/* Mobile - faster for perceived responsiveness */
@media (max-width: 768px) {
  .transition { transition-duration: 250ms; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Reduce motion, don't eliminate */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 100ms;
    transform: none; /* Only opacity fades */
  }
}

:root {
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

@media (max-width: 768px) {
  :root {
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 100ms;
    --duration-slow: 150ms;
  }
}