/* ============================================
   TRANSITIONS - Shared transition styles
   ============================================ */

/* Welcome Overlay Transitions */
.welcome-overlay {
  transition: opacity 2s ease-in-out;
}

.welcome-overlay.hide {
  transition: opacity 0.6s ease-in-out;
}

.welcome-button {
  transition: opacity 2s ease-in-out 1s, transform 2s ease-in-out 1s,
    all 0.3s ease;
}

/* Form Container Transitions */
.form-container {
  transition: opacity 2s ease-in-out;
}

/* Button Transitions */
button,
.btn {
  transition: all 0.3s ease;
}

button:hover,
.btn:hover {
  transform: translateY(-2px);
}

/* Input and Select Focus Transitions */
input,
select,
textarea {
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background 0.2s ease;
}

/* Field Label Icon Transitions */
.field-label .material-symbols-rounded {
  transition: color 0.5s ease;
}

/* Message Transitions */
.message {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Container Fade-in Transitions */
.container {
  transition: opacity 0.5s ease-in-out;
}

/* Smooth appearance for dynamic content */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in.show {
  opacity: 1;
}

/* Slide-in transitions */
.slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.slide-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Scale transitions */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.scale-in.show {
  opacity: 1;
  transform: scale(1);
}