/**
 * Raditone SPA Transitions
 * انیمیشن‌های ناوبری بین صفحات
 */

/* ============================================================
   نوار پیشرفت بالای صفحه
   ============================================================ */
#raditone-ajax-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #1DB954, #00d4ff, #1DB954);
    background-size: 200% 100%;
    z-index: 2147483647;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    opacity: 0;
    animation: rda-progress-shimmer 1.5s linear infinite;
    transition: width 0.3s ease, opacity 0.4s ease;
}

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

/* ============================================================
   انیمیشن fade محتوای اصلی
   ============================================================ */
#main-content {
    transition: opacity 0.15s ease;
	padding-bottom: 50px;
}

/* وقتی ناوبری شروع می‌شه */
#main-content.rda-loading {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   حالت "در حال پخش" روی کارت‌های آرشیو
   ============================================================ */
.rda-is-playing {
    position: relative;
}

.rda-is-playing::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px #1DB954;
    pointer-events: none;
    animation: rda-pulse-ring 2s ease-in-out infinite;
}

@keyframes rda-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.8); }
    50%       { box-shadow: 0 0 0 5px rgba(29, 185, 84, 0.2); }
}

/* ============================================================
   دکمه پخش در حالت active (در حال پخش همین ترک)
   ============================================================ */
.action-primary[data-play-btn].rda-now-playing {
    background: linear-gradient(135deg, #1DB954, #17a846);
    box-shadow: 0 4px 20px rgba(29, 185, 84, 0.4);
}

/* ============================================================
   کارت ترک در حال پخش (آلبوم)
   ============================================================ */
.raditone-track-card.raditone-playing {
    background: rgba(29, 185, 84, 0.08);
    border-color: rgba(29, 185, 84, 0.4);
}

.raditone-track-card.raditone-playing .track-play {
    color: #1DB954;
}

/* ============================================================
   skeleton loader برای کارت‌های در حال لود
   ============================================================ */
@keyframes rda-skeleton-wave {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.rda-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #1e2536) 25%,
        var(--bg-tertiary, #252d3d) 37%,
        var(--bg-secondary, #1e2536) 63%
    );
    background-size: 800px 100%;
    animation: rda-skeleton-wave 1.4s ease infinite;
    border-radius: 8px;
}

/* ============================================================
   Toast notification
   ============================================================ */
.rda-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1DB954;
    color: #fff;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 0.85rem;
    z-index: 2147483640;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
    font-family: inherit;
    direction: rtl;
}

.rda-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   لینک‌های active در منو (هایلایت صفحه جاری)
   ============================================================ */
.rt-sidebar-menu .current-menu-item > a,
.rt-primary-menu .current-menu-item > a,
.rt-mobile-cat-list li.current-menu-item > a,
.rt-mobile-menu li.current-menu-item > a {
    color: #1DB954;
}

.rt-sidebar-menu .current-menu-item > a svg,
.rt-primary-menu .current-menu-item > a svg {
    stroke: #1DB954;
}

/* ============================================================
   پشتیبانی از reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #raditone-ajax-progress {
        animation: none;
        background: #1DB954;
    }

    #main-content {
        transition: none;
    }

    .rda-is-playing::after {
        animation: none;
    }
}

/* ============================================================
   موبایل - تنظیمات پلیر ثابت
   ============================================================ */
@media (max-width: 768px) {
    .rda-toast {
        bottom: 75px; /* بالای bottom nav */
        font-size: 0.8rem;
        padding: 8px 18px;
    }
}