/* =========================================
   Media69 — Custom Styles
   ========================================= */

/* Base Font */
body {
    font-family: 'Sarabun', 'Space Grotesk', sans-serif;
}

/* ── Scrollbar ─────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: #f1f5f9; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.scrollbar-none                        { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar     { display: none; }

/* ── Toast Animations ──────────────────── */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(110%); }
}
.toast-enter { animation: slideInRight 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.toast-exit  { animation: slideOutRight 0.3s ease-in forwards; }

/* ── Card Hover Lift ───────────────────── */
.media-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.media-card:hover {
    transform: translateY(-4px);
}

/* ── Skeleton Shimmer ──────────────────── */
@keyframes shimmer {
    0%   { background-position: -700px 0; }
    100% { background-position:  700px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 700px 100%;
    animation: shimmer 1.4s infinite;
}

/* ── Modal Open Animation ──────────────── */
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.modal-panel {
    animation: modalIn 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* ── Like Button Pop ───────────────────── */
@keyframes likePopIn {
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1);   }
}
.like-pop {
    animation: likePopIn 0.35s ease;
}

/* ── Admin Badge Ping ──────────────────── */
@keyframes adminPing {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}
.admin-ping {
    animation: adminPing 1.5s ease-in-out infinite;
}