/**
 * Motion Design Foundation — reusable animation tokens + opt-in utilities.
 * No mechanics. Opt-in only (avoid animation spam).
 * Pair with: src/presentation/motion/motionTokens.ts
 */

:root {
  /* ── Duration scale ── */
  --md-fast: 80ms;
  --md-medium: 180ms;
  --md-slow: 280ms;
  --md-hero: 480ms;

  /* ── Interaction ── */
  --md-hover: 150ms;
  --md-click: 100ms;
  --md-button: 120ms;

  /* ── Surfaces ── */
  --md-card: 180ms;
  --md-menu: 200ms;
  --md-popup: 240ms;
  --md-toast: 220ms;
  --md-dialog: 250ms;
  --md-panel: 250ms;
  --md-transition: 220ms;

  /* ── Feedback ── */
  --md-reward: 420ms;
  --md-success: 320ms;
  --md-warning: 280ms;
  --md-error: 240ms;

  /* ── Domains ── */
  --md-companion: 300ms;
  --md-collection: 220ms;
  --md-inventory: 200ms;

  /* ── Epic (slot / rare moments — use sparingly) ── */
  --md-major: 350ms;
  --md-epic-min: 600ms;
  --md-epic-max: 900ms;

  /* ── Easing ── */
  --md-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --md-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --md-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --md-ease-enter: cubic-bezier(0.34, 1.35, 0.64, 1);
  --md-ease-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --md-ease-soft: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --md-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --md-ease-ui: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Distances (keep small — responsive, not floaty) ── */
  --md-lift-hover: -2px;
  --md-press: 1px;
  --md-enter-y: 12px;
  --md-sheet-y: 28px;
  --md-scale-enter: 0.96;
  --md-scale-press: 0.98;

  /* Align legacy RC7 + premium polish tokens */
  --motion-fast: var(--md-fast);
  --motion-button: var(--md-button);
  --motion-hover: var(--md-hover);
  --motion-card: var(--md-card);
  --motion-panel: var(--md-panel);
  --motion-major: var(--md-major);
  --motion-epic-min: var(--md-epic-min);
  --motion-epic-max: var(--md-epic-max);
  --motion-ease-ui: var(--md-ease-ui);
  --motion-ease-enter: var(--md-ease-enter);
  --motion-ease-exit: var(--md-ease-exit);

  --premium-duration: var(--md-medium);
  --premium-duration-slow: var(--md-slow);
  --premium-ease: var(--md-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --md-fast: 0ms;
    --md-medium: 0ms;
    --md-slow: 0ms;
    --md-hero: 0ms;
    --md-hover: 0ms;
    --md-click: 0ms;
    --md-button: 0ms;
    --md-card: 0ms;
    --md-menu: 0ms;
    --md-popup: 0ms;
    --md-toast: 0ms;
    --md-dialog: 0ms;
    --md-panel: 0ms;
    --md-transition: 0ms;
    --md-reward: 0ms;
    --md-success: 0ms;
    --md-warning: 0ms;
    --md-error: 0ms;
    --md-companion: 0ms;
    --md-collection: 0ms;
    --md-inventory: 0ms;
    --md-major: 0ms;
    --md-epic-min: 0ms;
    --md-epic-max: 0ms;
  }
}

/* ═══════════════════════════════════════════
   Opt-in utilities — apply deliberately
   ═══════════════════════════════════════════ */

.md-transition {
  transition-property: transform, opacity, box-shadow, background-color, border-color, color, filter;
  transition-duration: var(--md-transition);
  transition-timing-function: var(--md-ease-out);
}

.md-hover-lift {
  transition:
    transform var(--md-hover) var(--md-ease-out),
    box-shadow var(--md-hover) var(--md-ease-out);
}
.md-hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(var(--md-lift-hover));
}

.md-click-press {
  transition: transform var(--md-click) var(--md-ease-snap);
}
.md-click-press:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(var(--md-press)) scale(var(--md-scale-press));
}

.md-hover-lift.md-click-press:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(var(--md-press)) scale(var(--md-scale-press));
}

/* Surface enter (one-shot — add class, then remove if replaying) */
.md-card-enter {
  animation: md-enter-fade-up var(--md-card) var(--md-ease-out) both;
}
.md-menu-enter {
  animation: md-enter-fade-up var(--md-menu) var(--md-ease-out) both;
}
.md-popup-enter {
  animation: md-enter-pop var(--md-popup) var(--md-ease-enter) both;
}
.md-dialog-enter {
  animation: md-enter-pop var(--md-dialog) var(--md-ease-enter) both;
}
.md-toast-enter {
  animation: md-enter-toast var(--md-toast) var(--md-ease-out) both;
}
.md-hero-enter {
  animation: md-enter-hero var(--md-hero) var(--md-ease-out) both;
}

/* Domain soft transitions */
.md-companion-fade,
[data-md='companion'] {
  transition:
    opacity var(--md-companion) var(--md-ease-soft),
    transform var(--md-companion) var(--md-ease-soft);
}
.md-collection-fade,
[data-md='collection'] {
  transition:
    opacity var(--md-collection) var(--md-ease-out),
    transform var(--md-collection) var(--md-ease-out);
}
.md-inventory-fade,
[data-md='inventory'] {
  transition:
    opacity var(--md-inventory) var(--md-ease-out),
    transform var(--md-inventory) var(--md-ease-out);
}

[data-md='card'] {
  transition:
    transform var(--md-card) var(--md-ease-out),
    box-shadow var(--md-card) var(--md-ease-out),
    border-color var(--md-card) var(--md-ease-out);
}
[data-md='menu'] {
  transition:
    opacity var(--md-menu) var(--md-ease-out),
    transform var(--md-menu) var(--md-ease-out);
}

/* Feedback pulses — rare, intentional */
.md-reward {
  animation: md-reward-pulse var(--md-reward) var(--md-ease-enter) both;
}
.md-success {
  animation: md-feedback-glow var(--md-success) var(--md-ease-out) both;
  --md-feedback-color: rgba(74, 222, 128, 0.35);
}
.md-warning {
  animation: md-feedback-glow var(--md-warning) var(--md-ease-in-out) both;
  --md-feedback-color: rgba(251, 191, 36, 0.4);
}
.md-error {
  animation: md-error-shake var(--md-error) var(--md-ease-in-out) both;
}

@keyframes md-enter-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--md-enter-y));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes md-enter-pop {
  from {
    opacity: 0;
    transform: scale(var(--md-scale-enter)) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes md-enter-toast {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes md-enter-hero {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes md-reward-pulse {
  0% {
    transform: scale(0.96);
    filter: brightness(1);
  }
  45% {
    transform: scale(1.03);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes md-feedback-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  40% {
    box-shadow: 0 0 0 3px var(--md-feedback-color, rgba(74, 222, 128, 0.35));
  }
}

@keyframes md-error-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

/* Reduced motion: kill utility animations / lifts */
@media (prefers-reduced-motion: reduce) {
  .md-hover-lift:hover:not(:disabled),
  .md-click-press:active:not(:disabled),
  .md-hover-lift.md-click-press:active:not(:disabled) {
    transform: none;
  }

  .md-card-enter,
  .md-menu-enter,
  .md-popup-enter,
  .md-dialog-enter,
  .md-toast-enter,
  .md-hero-enter,
  .md-reward,
  .md-success,
  .md-warning,
  .md-error {
    animation: none !important;
  }
}