/* === Fade in === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* === Scale on hover === */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  }

/* === Glow pulse na CTA === */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255,107,53,0.3);
  }

  50% {
    box-shadow: 0 0 24px rgba(255,107,53,0.5);
  }
}

.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

/* === Smooth section transition === */
.section-enter {
  animation: fadeIn 0.25s ease-out;
}

/* === Preview fade === */
@keyframes previewFade {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.preview-updated {
  animation: previewFade 0.4s ease-out;
}

/* === Input focus glow === */
.mud-input-outlined .mud-input-slot:focus-within {
  box-shadow: 0 0 0 2px rgba(255,107,53,0.2);
  transition: box-shadow 0.2s ease;
}

/* === Sidebar nav item smooth === */
.section-nav-item {
  transition: all 0.15s ease;
}

/* === Progress bar smooth === */
.mud-progress-linear .mud-progress-linear-bar {
  transition: width 0.5s ease !important;
}
@media (max-width: 600px) {
  .mud-dialog {
    margin: 0 !important;
    max-height: 100vh !important;
    width: 100vw !important;
    border-radius: 0 !important;
  }

  .mud-dialog-container {
    align-items: flex-end !important;
  }
}