/* ============================================================
   FlightDeck — Animations & Transitions
   ============================================================ */

/* ---- Skeleton Pulse ---- */
@keyframes fd-skeleton-pulse {
  0%, 100% { background-color: rgba(0,0,0,0.04); }
  50% { background-color: rgba(0,0,0,0.02); }
}

.fd-skeleton {
  animation: fd-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--fd-radius-sm);
}

/* ---- Status Dot Glow ---- */
@keyframes fd-dot-glow-green {
  0%, 100% { box-shadow: 0 0 4px rgba(39,174,96,0.3); }
  50% { box-shadow: 0 0 10px rgba(39,174,96,0.6); }
}

@keyframes fd-dot-glow-amber {
  0%, 100% { box-shadow: 0 0 4px rgba(243,156,18,0.3); }
  50% { box-shadow: 0 0 10px rgba(243,156,18,0.6); }
}

@keyframes fd-dot-glow-red {
  0%, 100% { box-shadow: 0 0 4px rgba(231,76,60,0.3); }
  50% { box-shadow: 0 0 10px rgba(231,76,60,0.6); }
}

/* ---- Toast ---- */
@keyframes fd-toast-enter {
  from {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fd-toast-exit {
  from {
    transform: translateX(0);
    opacity: 1;
    max-height: 100px;
    margin-bottom: 10px;
  }
  to {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
  }
}

.fd-toast {
  animation: fd-toast-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fd-toast.exiting {
  animation: fd-toast-exit 0.25s ease-in forwards;
}

/* ---- Modal ---- */
@keyframes fd-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fd-modal-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
}

@keyframes fd-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fd-modal { animation: fd-modal-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fd-modal.exiting { animation: fd-modal-exit 0.2s ease-in forwards; }
.fd-modal-overlay { animation: fd-overlay-enter 0.2s ease forwards; }

/* ---- Dropdown ---- */
@keyframes fd-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fd-dropdown-menu.open {
  animation: fd-dropdown-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---- Drawer ---- */
@keyframes fd-drawer-enter {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fd-drawer-exit {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.fd-drawer { animation: fd-drawer-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fd-drawer.exiting { animation: fd-drawer-exit 0.25s ease-in forwards; }

/* ---- Progress Bar Fill ---- */
@keyframes fd-progress-fill {
  from { width: 0; }
}

.fd-progress-fill {
  animation: fd-progress-fill 0.6s ease-out forwards;
}

/* ---- Card Hover ---- */
.fd-hover-lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.fd-hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--fd-shadow-hover);
}

/* ---- Spin (loading spinner) ---- */
@keyframes fd-spin {
  to { transform: rotate(360deg); }
}

.fd-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: fd-spin 0.7s linear infinite;
}

/* ---- Page fade ---- */
@keyframes fd-page-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fd-content {
  animation: fd-page-in 0.2s ease forwards;
}

/* ---- Kanban drag ---- */
.fd-kanban-card.dragging {
  opacity: 0.7;
  transform: rotate(2deg);
  box-shadow: var(--fd-shadow-modal);
  cursor: grabbing;
}

.fd-kanban-col.drag-over {
  background: rgba(41,128,185,0.05);
  outline: 2px dashed var(--fd-blue-400);
  outline-offset: -4px;
}