/* F13 — Motion sutil
 * Filosofia: tudo abaixo de 320ms, easing natural, prefers-reduced-motion respeitado.
 * Carregado APOS _brand.css, _base-mobile.css, style.css e admin.css.
 * Nao remove transitions existentes — so adiciona novas.
 */

/* === 1. Page fade ao carregar === */
body {
  animation: page-fade-in var(--motion-slow, 320ms) var(--motion-easing-out, ease-out) both;
}

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

/* === 2. Wizard step transitions === */
.step.active {
  animation: step-enter var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

@keyframes step-enter {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.step.active.is-going-back {
  animation: step-back-enter var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

@keyframes step-back-enter {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === 3. Hover lift sutil em cards === */
.quote-card,
.client-card,
.region-card,
.dash-card,
.option-card,
.coverage-card {
  transition:
    transform var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    border-color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    box-shadow var(--motion-fast, 120ms) var(--motion-easing-out, ease-out);
}

.quote-card:hover,
.client-card:hover,
.dash-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* === 4. Botoes: hover sutil + active bounce-back === */
.action-btn,
.btn-cta,
.btn-secondary,
.period-btn,
.toggle-tab {
  transition:
    background-color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    border-color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    transform var(--motion-fast, 120ms) var(--motion-easing-out, ease-out);
}

.action-btn:active,
.btn-cta:active,
.btn-secondary:active {
  transform: translateY(1px);
}

/* CTA grande do hero */
.btn-cta-large {
  transition:
    background-color var(--motion-base, 220ms) var(--motion-easing-out, ease-out),
    transform var(--motion-base, 220ms) var(--motion-easing-out, ease-out),
    box-shadow var(--motion-base, 220ms) var(--motion-easing-out, ease-out);
}

/* === 5. Modal entrance === */
.modal-overlay {
  transition: opacity var(--motion-base, 220ms) var(--motion-easing-out, ease-out);
}

.modal-overlay.open .modal {
  animation: modal-content-enter var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

@keyframes modal-content-enter {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* === 6. Toast notification === */
.toast,
.toast-notification,
#errorToast {
  animation: toast-enter var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

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

.toast.is-leaving,
.toast-notification.is-leaving,
#errorToast.is-leaving {
  animation: toast-exit var(--motion-fast, 120ms) var(--motion-easing-inout, ease) forwards;
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* === 7. Form status (success/error) === */
.form-status {
  animation: form-status-enter var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

@keyframes form-status-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 8. Skeleton loading (upgrade existing) === */
.skeleton,
.is-loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-overlay, #F5F5F5) 25%,
    var(--color-bg-card, #FFFFFF) 50%,
    var(--color-bg-overlay, #F5F5F5) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: 3px;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === 9. Spinner inline (botoes em loading) === */
.spinner-inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 600ms linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

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

/* === 10. Region grid stagger === */
.region-grid > * {
  animation: card-enter var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

.region-grid > *:nth-child(1)  { animation-delay: 0ms; }
.region-grid > *:nth-child(2)  { animation-delay: 30ms; }
.region-grid > *:nth-child(3)  { animation-delay: 60ms; }
.region-grid > *:nth-child(4)  { animation-delay: 90ms; }
.region-grid > *:nth-child(5)  { animation-delay: 120ms; }
.region-grid > *:nth-child(6)  { animation-delay: 150ms; }
.region-grid > *:nth-child(7)  { animation-delay: 180ms; }
.region-grid > *:nth-child(8)  { animation-delay: 200ms; }
.region-grid > *:nth-child(n+9) { animation-delay: 220ms; }

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 11. Tab panel fade (admin) === */
.tab-panel.active {
  animation: tab-fade var(--motion-base, 220ms) var(--motion-easing-out, ease-out) both;
}

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

/* === 12. Inputs focus ring === */
input,
textarea,
select {
  transition:
    border-color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    box-shadow var(--motion-fast, 120ms) var(--motion-easing-out, ease-out);
}

/* === 13. Sidebar nav items === */
.sidebar-item {
  transition:
    color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out),
    background-color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out);
}

/* === 14. Page-header entrance === */
.page-header {
  animation: page-header-enter var(--motion-slow, 320ms) var(--motion-easing-out, ease-out) both;
}

@keyframes page-header-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 15. Details summary === */
details > summary {
  transition: background-color var(--motion-fast, 120ms) var(--motion-easing-out, ease-out);
}

details > summary > .arrow,
details summary::before {
  transition: transform var(--motion-fast, 120ms) var(--motion-easing-out, ease-out);
}

/* === ACCESSIBILITY — prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}