/**
 * Motion utilities — curtas, interrompíveis, transform/opacity only.
 */

.sc-fade-in {
  animation: sc-fade-in var(--transition-base) var(--ease-out) both;
}

.sc-rise-in {
  animation: sc-rise-in var(--transition-slow) var(--ease-fluid) both;
}

.sc-overlay-enter {
  animation: sc-overlay-in var(--transition-base) ease both;
}

.sc-panel-enter {
  animation: sc-panel-in var(--transition-slow) var(--ease-fluid) both;
}

.sc-overlay-leave {
  animation: sc-overlay-out var(--transition-fast) ease both;
}

.sc-panel-leave {
  animation: sc-panel-out var(--transition-base) var(--ease-out) both;
}

@keyframes sc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sc-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sc-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sc-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sc-panel-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sc-panel-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

/* Transição padrão para superfícies interativas */
.sc-motion {
  transition:
    transform var(--transition-base) var(--ease-fluid),
    opacity 180ms ease,
    box-shadow var(--transition-base) var(--ease-fluid),
    background-color 180ms ease,
    border-color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .sc-fade-in,
  .sc-rise-in,
  .sc-overlay-enter,
  .sc-panel-enter,
  .sc-overlay-leave,
  .sc-panel-leave {
    animation: none !important;
  }
}