/**
 * Constanta.one - Centralized Animation System
 * All keyframe definitions, animation utilities, and prefers-reduced-motion.
 * Duration/easing tokens are in shared.css (theme-aware).
 */

/* ===== LOADING ANIMATIONS ===== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

/* ===== SWEEP ANIMATIONS (GPU-only: transform instead of top/bottom/left/right) ===== */
@keyframes sweep-up {
    from { transform: translateY(0); }
    to { transform: translateY(-350%); }
}

@keyframes sweep-down {
    from { transform: translateY(0); }
    to { transform: translateY(350%); }
}

@keyframes sweep-left {
    from { transform: translateX(0); }
    to { transform: translateX(-350%); }
}

@keyframes sweep-right {
    from { transform: translateX(0); }
    to { transform: translateX(350%); }
}

/* ===== SLIDE ANIMATIONS ===== */
@keyframes swipeOutLeft {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-40%) scale(0.92);
        opacity: 0;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-40%) scale(0.92);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(40%) scale(0.92);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(40%) scale(0.92);
        opacity: 0;
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

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

/* ===== BOTTOM SHEET ANIMATIONS ===== */
@keyframes bottomSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes bottomSheetOut {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* ===== MODAL ANIMATIONS ===== */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

/* ===== FEEDBACK ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

@keyframes tap-hint {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
}

@keyframes bounce-hint {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(8px); }
}

/* ===== SKELETON LOADING ===== */
@keyframes skeleton-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.skeleton-card {
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    background: var(--card-bg, var(--bg-primary));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: skeleton-fade-in var(--duration-fast) var(--ease-out);
}

.skeleton-card .skeleton-image {
    height: 55%;
    background: var(--skeleton-base);
}

.skeleton-card .skeleton-content {
    flex: 1;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-card .skeleton-line {
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s var(--ease-default) infinite;
}

.skeleton-card .skeleton-line:nth-child(1) { width: 90%; height: 20px; }
.skeleton-card .skeleton-line:nth-child(2) { width: 75%; }
.skeleton-card .skeleton-line:nth-child(3) { width: 60%; }

.skeleton-card .skeleton-meta {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.skeleton-card .skeleton-badge {
    width: 70px;
    height: 24px;
    border-radius: 12px;
    background: var(--skeleton-base);
}

.skeleton-card .skeleton-actions {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
}

.skeleton-card .skeleton-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--skeleton-base);
}

/* ===== ACTION FEEDBACK ANIMATIONS ===== */
/* Like bounce animation */
@keyframes likeBounce {
    0% { transform: scale(1); }
    15% { transform: scale(1.35); }
    30% { transform: scale(0.85); }
    45% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Counter number slide up animation */
@keyframes counterSlideUp {
    0% { transform: translateY(0); opacity: 1; }
    40% { transform: translateY(-100%); opacity: 0; }
    60% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Save checkmark confirmation */
@keyframes savePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Share ripple feedback */
@keyframes shareRipple {
    0% { box-shadow: 0 0 0 0 rgba(254, 44, 85, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(254, 44, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(254, 44, 85, 0); }
}

/* ===== PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Modale: fade simplu in loc de slide/scale */
    .tt-auth-modal,
    .sources-modal-content,
    .modal-overlay {
        transition: opacity var(--duration-fast, 200ms) ease !important;
    }

    /* Bottom sheets: no animation */
    .sources-modal.open .sources-modal-content,
    .modal-overlay.visible .modal-content,
    #commentsOverlay.visible .comments-modal {
        animation-duration: 0.01ms !important;
    }

    /* Skeleton: static, fara shimmer */
    .skeleton-card .skeleton-line {
        animation: none !important;
        background: var(--skeleton-base) !important;
    }
}