/* ============================================================
   Animations — Keyframes, Skeleton Loaders,
   Hover Effects, Micro-interactions, Fade-ins
   ============================================================ */


/* ── Auth Keyframes ───────────────────────────────────────── */
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes form-enter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-blob-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(20px, -15px) scale(1.05); }
    100% { transform: translate(-10px, 10px) scale(0.97); }
}

@keyframes auth-form-enter {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auth-field-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-img-enter {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes auth-btn-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes auth-feature-enter {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes alert-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Component Keyframes ──────────────────────────────────── */
@keyframes badge-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes pulse-ring {
    0%   { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes stepShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}


/* ── Content Fade-in Animations ───────────────────────────── */
.fade-in       { animation: fadeIn var(--dur-slow) var(--ease-out-expo) both; }
.fade-in-up    { animation: fadeInUp var(--dur-slow) var(--ease-out-expo) both; }
.fade-in-down  { animation: fadeInDown var(--dur-slow) var(--ease-out-expo) both; }
.fade-in-left  { animation: fadeInLeft var(--dur-slow) var(--ease-out-expo) both; }
.fade-in-right { animation: fadeInRight var(--dur-slow) var(--ease-out-expo) both; }

.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

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

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

.scale-in { animation: scaleIn var(--dur-normal) var(--ease-spring) both; }

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

.content { animation: fadeInUp var(--dur-slow) var(--ease-out-expo) both; }

.animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; }


/* ── Skeleton Loaders ─────────────────────────────────────── */
.skeleton {
    background: var(--skeleton-base);
    border-radius: var(--bs-border-radius-sm);
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.skeleton * { visibility: hidden; }

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--skeleton-shine) 40%, var(--skeleton-shine) 60%, transparent 100%);
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.skeleton-text    { height: 0.875rem; width: 100%; border-radius: 4px; margin-bottom: 0.5rem; }
.skeleton-text-sm { height: 0.75rem; width: 60%; border-radius: 3px; }
.skeleton-text-lg { height: 1.25rem; width: 80%; border-radius: 5px; }
.skeleton-heading { height: 1.5rem; width: 50%; border-radius: 5px; margin-bottom: 0.75rem; }

.skeleton-circle    { border-radius: 50%; }
.skeleton-circle-sm { width: 2rem; height: 2rem; border-radius: 50%; }
.skeleton-circle-md { width: 3rem; height: 3rem; border-radius: 50%; }
.skeleton-circle-lg { width: 4rem; height: 4rem; border-radius: 50%; }

.skeleton-avatar    { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-btn       { height: 2.5rem; width: 120px; border-radius: var(--bs-border-radius); }
.skeleton-card      { height: 200px; border-radius: var(--bs-border-radius-lg); }
.skeleton-chart     { height: 250px; border-radius: var(--bs-border-radius-lg); }
.skeleton-table-row { height: 3rem; border-radius: 4px; margin-bottom: 0.25rem; }
.skeleton-img       { width: 100%; height: 180px; border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0; }


/* ── Micro-interactions & Hover Effects ───────────────────── */
.hover-lift {
    transition:
        transform var(--dur-normal) var(--ease-out-expo),
        box-shadow var(--dur-normal) var(--ease-out-expo);
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.hover-scale { transition: transform var(--dur-normal) var(--ease-out-expo); }
.hover-scale:hover { transform: scale(1.03); }

.hover-glow { transition: box-shadow var(--dur-normal) var(--ease-out-expo); }
.hover-glow:hover { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.12), var(--shadow-lg); }

.hover-border { transition: border-color var(--dur-fast) ease; border: 1px solid transparent; }
.hover-border:hover { border-color: var(--bs-primary); }

.hover-rotate-icon:hover .bi,
.hover-rotate-icon:hover i {
    transform: rotate(15deg);
    transition: transform var(--dur-normal) var(--ease-spring);
}

.clickable-row { cursor: pointer; transition: background-color var(--dur-fast) ease; }
.clickable-row:hover { background-color: rgba(var(--bs-primary-rgb), 0.03); }

.focus-ring-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

.btn-press:active { transform: scale(0.97); }

.link-underline-anim { position: relative; text-decoration: none; }
.link-underline-anim::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: width var(--dur-normal) var(--ease-out-expo);
}
.link-underline-anim:hover::after { width: 100%; }