/*
  File: SDAI_Animations.css
  Purpose: Lightweight motion placeholders for screen transitions and loading states.
  Architecture Role: Provides optional animation hooks used by renderers and overlay toggles.
  Expected Collaborators: SDAI_LoadingOverlay.jspf, SDAI_ScreenEngine.js, and future DOM transition helpers.
  Scaffold Status: Scaffold/template only; timing and motion direction are TODO.
*/
@keyframes sdaiFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sdaiSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sdai-animate-fade-in {
    animation: sdaiFadeIn 180ms ease-out;
}

.sdai-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(13, 95, 115, 0.2);
    border-top-color: var(--sdai-color-primary);
    border-radius: 50%;
    animation: sdaiSpin 900ms linear infinite;
}

.sdai-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 37, 49, 0.35);
}

.sdai-loading-overlay__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sdai-space-3);
    padding: var(--sdai-space-5);
    background: var(--sdai-color-surface);
    border-radius: var(--sdai-radius-lg);
}