/* ============================================================
   MediaLoader · Interactive Layer
   Микро-анимации поверх классического дизайна.
   Уважает prefers-reduced-motion.
   ============================================================ */

/* -- 0. respect motion preferences ------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* -- 1. курсор-follow подсветка на всю страницу ----------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mx, 50%) var(--my, 30%),
        rgba(167, 139, 250, 0.16),
        rgba(236, 72, 153, 0.06) 35%,
        transparent 60%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 0;
    mix-blend-mode: screen;
}
body.spotlight-on::before { opacity: 1; }

/* в светлой теме делаем мягче и без screen */
body[data-theme="light"]::before {
    background: radial-gradient(
        600px circle at var(--mx, 50%) var(--my, 30%),
        rgba(124, 58, 237, 0.10),
        rgba(236, 72, 153, 0.05) 35%,
        transparent 60%
    );
    mix-blend-mode: multiply;
}

/* убедимся что основной контент над подсветкой */
.app-container { position: relative; z-index: 1; }

/* -- 2. ripple на основных кнопках ------------------------- */
.analyze-btn,
.download-start-btn,
.auth-btn-primary,
.quality-btn,
.insta-select-all-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ml-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    animation: mlRipple 0.6s ease-out forwards;
    z-index: 0;
}
@keyframes mlRipple {
    to { transform: scale(4); opacity: 0; }
}

/* -- 3. magnetic supported-chips --------------------------- */
.supported-chip {
    transition:
        transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4),
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
    will-change: transform;
}
.supported-chip:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 18px -8px rgba(167, 139, 250, 0.55);
    border-color: rgba(167, 139, 250, 0.55);
}
.supported-chip:hover .platform-icon {
    transform: scale(1.15) rotate(-4deg);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.supported-chip:active { transform: translateY(-1px) scale(1.01); }

/* -- 4. nav-item glow ------------------------------------- */
.nav-item {
    position: relative;
    overflow: hidden;
}
.nav-item::after {
    content: "";
    position: absolute;
    left: -120%; top: 0; bottom: 0; width: 60%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.07),
        transparent
    );
    transition: left 0.55s ease;
    pointer-events: none;
}
.nav-item:hover::after { left: 130%; }

.nav-item.active {
    box-shadow:
        inset 0 0 0 1px rgba(167, 139, 250, 0.25),
        0 4px 14px -6px rgba(167, 139, 250, 0.4);
}

/* активная иконка пульсирует */
.nav-item.active .material-icons-round {
    animation: navIconPulse 2.4s ease-in-out infinite;
}
@keyframes navIconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(167,139,250,0)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(167,139,250,0.55)); }
}

/* -- 5. tilt + lift для основных карточек ------------------ */
.video-info-card,
.insta-photo-card,
.telegram-info-card,
.download-options,
.history-item,
.stats-card,
.settings-card {
    transition:
        transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
}
.video-info-card:hover,
.insta-photo-card:hover,
.telegram-info-card:hover,
.download-options:hover,
.stats-card:hover,
.settings-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 40px -20px rgba(0,0,0,0.55),
        0 4px 12px -8px rgba(167,139,250,0.35);
    border-color: rgba(167, 139, 250, 0.35);
}

/* tilt: задаётся через JS-переменные --tx/--ty */
.tilt {
    transform: perspective(900px)
               rotateX(var(--ty, 0deg))
               rotateY(var(--tx, 0deg))
               translateY(-3px);
    transition: transform 0.08s linear;
}

/* -- 6. URL input — анимированный фокус -------------------- */
.url-input-container {
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.url-input-container:focus-within {
    transform: translateY(-2px);
    box-shadow:
        0 18px 50px -22px rgba(167, 139, 250, 0.55),
        0 0 0 3px rgba(167, 139, 250, 0.18);
}
.url-input-container:focus-within .input-icon {
    color: #a78bfa;
    transform: scale(1.15);
    transition: transform 0.25s, color 0.25s;
}

/* анимированный caret-маркер у placeholder */
.url-input::placeholder { transition: opacity 0.25s; }
.url-input:focus::placeholder { opacity: 0.45; }

/* -- 7. появление контента (reveal) ------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
        transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
        transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal-stagger.in-view > * {
    opacity: 1;
    transform: translateY(0);
}

/* -- 8. active-downloads — мягкая пульсация --------------- */
.active-downloads {
    position: relative;
    transition: transform 0.2s ease;
}
.active-downloads::before {
    content: "";
    position: absolute;
    left: 8px; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    transform: translateY(-50%);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: activeDot 1.6s ease-out infinite;
    opacity: 0;
}
.active-downloads:not([style*="display: none"])::before { opacity: 1; }
@keyframes activeDot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* плавная смена числа активных */
.active-downloads .count {
    display: inline-block;
    transition: transform 0.25s ease, color 0.25s ease;
}
.active-downloads .count.bump {
    transform: translateY(-2px) scale(1.25);
    color: #4ade80;
}

/* -- 9. theme-toggle — переворот иконки -------------------- */
.theme-toggle {
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4), background 0.2s;
}
.theme-toggle:hover { transform: rotate(-15deg); }
.theme-toggle:active { transform: rotate(15deg) scale(0.9); }
.theme-toggle .material-icons-round {
    transition: transform 0.45s ease;
    display: inline-block;
}
.theme-toggle.flip .material-icons-round {
    transform: rotate(360deg);
}

/* -- 10. quality buttons — pop-in ------------------------- */
.quality-btn {
    transition:
        transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4),
        background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.quality-btn:not(.active):hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -12px rgba(167, 139, 250, 0.45);
}
.quality-btn.active {
    animation: qualityPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes qualityPop {
    0%   { transform: scale(0.94); }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* -- 11. logo wiggle on hover ----------------------------- */
.logo:hover .logo-icon {
    animation: logoWiggle 0.6s ease;
}
@keyframes logoWiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-12deg) scale(1.05); }
    55%      { transform: rotate(10deg) scale(1.05); }
    80%      { transform: rotate(-4deg); }
}

/* -- 12. history-item — slide-in ------------------------- */
.history-item {
    animation: historyIn 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes historyIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* -- 13. progress-bar — gradient sweep -------------------- */
.progress-bar,
[class*="progress-bar"] {
    position: relative;
    overflow: hidden;
}
.progress-bar::after,
[class*="progress-bar"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.18),
        transparent
    );
    transform: translateX(-100%);
    animation: progressSweep 1.6s linear infinite;
    pointer-events: none;
}
@keyframes progressSweep {
    to { transform: translateX(100%); }
}

/* -- 14. toast — bounce-in -------------------------------- */
.notification,
.toast {
    animation: toastIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) !important;
}
@keyframes toastIn {
    0%   { opacity: 0; transform: translate(-50%, 30px) scale(0.95); }
    60%  { transform: translate(-50%, -4px) scale(1.02); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* -- 15. footer-link in sidebar — slide arrow ------------- */
.sidebar-footer a:hover {
    transform: translateX(3px);
    transition: transform 0.2s;
}

/* -- 16. modal — fade+scale ------------------------------ */
.auth-modal {
    animation: modalFade 0.25s ease both;
}
.auth-modal-content {
    animation: modalIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- 17. selection -------------------------------------- */
::selection {
    background: rgba(167, 139, 250, 0.35);
    color: #fff;
}