/* ===== Page Load Animations ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(184,161,227,0.3); }
  50% { box-shadow: 0 0 50px rgba(184,161,227,0.6); }
}

/* ===== Scroll-triggered: hidden by default ===== */
.anim-fade-in,
.anim-slide-up,
.anim-slide-down,
.anim-slide-left,
.anim-slide-right,
.anim-scale-in {
  opacity: 0;
}

/* ===== Visible state (added by IntersectionObserver) ===== */
.anim-fade-in.visible {
  animation: fadeIn 0.5s ease-out both;
}

.anim-slide-up.visible {
  animation: slideUp 0.6s ease-out both;
}

.anim-slide-down.visible {
  animation: slideDown 0.5s ease-out both;
}

.anim-slide-left.visible {
  animation: slideLeft 0.5s ease-out both;
}

.anim-slide-right.visible {
  animation: slideRight 0.5s ease-out both;
}

.anim-scale-in.visible {
  animation: scaleIn 0.5s ease-out both;
}

.anim-pulse {
  animation: pulse 3s ease-in-out infinite;
}

/* ===== Staggered Delays ===== */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
.anim-delay-7 { animation-delay: 0.7s; }
.anim-delay-8 { animation-delay: 0.8s; }

/* ===== Booking Step Transitions ===== */
.step-panel {
  animation: slideLeft 0.4s ease-out both;
}

.step-panel.slide-out {
  animation: slideRight 0.3s ease-in both;
}

/* ===== Form Input Focus Glow ===== */
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(168,191,163,0.25);
  border-color: #A8BFA3;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.input-group .form-control:focus {
  box-shadow: none;
}

.input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(168,191,163,0.25);
  border-radius: 0.375rem;
  transition: box-shadow 0.3s ease;
}

/* ===== Button Hover Effects ===== */
.btn {
  transition: all 0.25s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* ===== Card Hover ===== */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
}

/* ===== Chat Message Animation ===== */
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(15px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-msg {
  animation: chatBubbleIn 0.35s ease-out both;
}

/* ===== Quick Reply Buttons ===== */
.quick-reply {
  transition: all 0.2s ease;
}

.quick-reply:hover {
  transform: scale(1.03);
}

/* ===== Time Slot & Payment Selection ===== */
.time-slot, .payment-option {
  transition: all 0.25s ease;
}

.time-slot:hover, .payment-option:hover {
  transform: scale(1.02);
}

.time-slot.selected, .payment-option.selected {
  transform: scale(1.02);
}

/* ===== Sophie Avatar Glow ===== */
.sophie-avatar, .sophie-avatar-sm {
  animation: pulse 3s ease-in-out infinite;
}

/* ===== Tab Content Transition ===== */
.tab-pane {
  animation: slideUp 0.4s ease-out both;
}

/* ===== Progress Bar Smooth ===== */
.step-circle {
  transition: background-color 0.4s ease, transform 0.3s ease;
}

.step-circle.active {
  transform: scale(1.1);
}