/* EASING — your physics */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;

/* THE LIFT — buttons rise to meet the finger */
.button {
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-out);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.button:active {
  transform: translateY(0);
}

/* THE TILT — icons acknowledge attention */
.icon {
  transition: transform var(--duration-fast) var(--ease-spring);
}
.icon:hover {
  transform: rotate(8deg) scale(1.05);
}

/* THE REVEAL — content arrives with grace */
.reveal {
  animation: fadeUp var(--duration-normal) var(--ease-out) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* THE STAGGER — elements enter like music */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }

/* THE GLOW — focus states that breathe */
.input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* THE PULSE — subtle attention without aggression */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ACCESSIBILITY — always */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}