/* ========================================
   SMOOTH MODAL TRANSITIONS & ANIMATIONS
   ======================================== */

/* Modal fade-in animation when opening */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Modal fade-out animation when switching modes */
@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Apply fade-in to modal on creation */
.autotimex-modal-content {
  animation: modalFadeIn 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Dimension transition easing curve - smooth and natural */
.autotimex-modal-content {
  /* These transitions are critical for smooth height/width changes */
  transition:
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    max-width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease,
    opacity 300ms ease-out;

  /* GPU acceleration for smooth animations */
  will-change: width, height, box-shadow, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .autotimex-modal-content {
    animation: none !important;
    transition: none !important;
  }
}

/* Ensure smooth scrolling on iOS */
.autotimex-modal-content {
  -webkit-overflow-scrolling: touch;
}