/* Transition and animation utilities for admin pages.
   These are required by Phoenix JS.show/JS.hide in core_components.ex
   and by various admin UI interactions (spinners, hover effects, etc.).

   Placed in @layer admin so they integrate with the cascade. */

@layer admin {

/* ── Transition properties ── */

.transition {
  transition-property: color, background-color, border-color, text-decoration-color,
    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\] {
  transition-property: left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── Duration overrides ── */

.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ── Easing overrides ── */

.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

/* ── Opacity states (JS.show / JS.hide) ── */

.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* ── Transform states (JS.show / JS.hide) ── */

.translate-y-4 { translate: 0 1rem; }
.translate-y-0 { translate: 0 0; }
.scale-95 { scale: 0.95; }
.scale-100 { scale: 1; }

@media (min-width: 640px) {
  .sm\:translate-y-0 { translate: 0 0; }
  .sm\:scale-95 { scale: 0.95; }
  .sm\:scale-100 { scale: 1; }
}

/* ── Spin animation ── */

@keyframes spin { to { transform: rotate(360deg); } }

.animate-spin { animation: spin 1s linear infinite; }

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-spin { animation: spin 1s linear infinite; }
}

} /* @layer admin */