/* ============================================================
   STRELA — PAGE LOAD SMOOTH PATCH
   Быстрая, шустрая, но плавная загрузка всех страниц.
   Подключать через header.php
   ============================================================ */

/* --- 1. Прячем body до готовности, без задержки рендера --- */
body {
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.page-ready {
    opacity: 1;
}

/* --- 2. Базовая анимация --- */
@keyframes strela-in {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Быстрая — для хедера и футера */
@keyframes strela-in-fast {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 3. Хедер и мобильный футер --- */
.custom-header {
    animation: strela-in-fast 0.18s ease both;
}
.mobile-footer {
    animation: strela-fade 0.2s ease 0.05s both;
}
@keyframes strela-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- 4. trust.php — главная страница --- */
/* Поисковая строка */
.uni-nav-search-container {
    animation: strela-in 0.22s ease 0.05s both;
}
/* Фильтр-чипы */
.primary-filter-container {
    animation: strela-in 0.22s ease 0.08s both;
}
/* Список пользователей */
.trust-list {
    animation: strela-in 0.25s ease 0.1s both;
}
/* Карточки юзеров — каскад */
.trust-list .card:nth-child(1)  { animation: strela-in 0.25s ease 0.10s both; }
.trust-list .card:nth-child(2)  { animation: strela-in 0.25s ease 0.13s both; }
.trust-list .card:nth-child(3)  { animation: strela-in 0.25s ease 0.16s both; }
.trust-list .card:nth-child(4)  { animation: strela-in 0.25s ease 0.19s both; }
.trust-list .card:nth-child(5)  { animation: strela-in 0.25s ease 0.22s both; }
.trust-list .card:nth-child(6)  { animation: strela-in 0.25s ease 0.25s both; }
.trust-list .card:nth-child(n+7){ animation: strela-in 0.25s ease 0.27s both; }

/* --- 5. shop.php --- */
.shop-search-bar {
    animation: strela-in 0.22s ease 0.05s both;
}
.list-header {
    animation: strela-in 0.22s ease 0.08s both;
}
.listings-grid {
    animation: strela-in 0.25s ease 0.1s both;
}
.listings-grid .listing-card:nth-child(1) { animation: strela-in 0.25s ease 0.10s both; }
.listings-grid .listing-card:nth-child(2) { animation: strela-in 0.25s ease 0.13s both; }
.listings-grid .listing-card:nth-child(3) { animation: strela-in 0.25s ease 0.16s both; }
.listings-grid .listing-card:nth-child(4) { animation: strela-in 0.25s ease 0.19s both; }
.listings-grid .listing-card:nth-child(n+5){ animation: strela-in 0.25s ease 0.21s both; }

/* --- 6. arenda.php --- */
.container > .search-wrap {
    animation: strela-in 0.22s ease 0.05s both;
}
.equipment-grid {
    animation: strela-in 0.25s ease 0.1s both;
}
.equipment-grid .equipment-card:nth-child(1) { animation: strela-in 0.25s ease 0.10s both; }
.equipment-grid .equipment-card:nth-child(2) { animation: strela-in 0.25s ease 0.13s both; }
.equipment-grid .equipment-card:nth-child(3) { animation: strela-in 0.25s ease 0.16s both; }
.equipment-grid .equipment-card:nth-child(4) { animation: strela-in 0.25s ease 0.19s both; }
.equipment-grid .equipment-card:nth-child(n+5){ animation: strela-in 0.25s ease 0.21s both; }

/* --- 7. job.php (те же классы что arenda) --- */
/* equipment-grid уже покрыт выше */

/* --- 8. map.php --- */
.map-wrap {
    animation: strela-in-fast 0.2s ease 0.05s both;
}

/* --- 9. my_equipment.php --- */
.equipment-container {
    animation: strela-in 0.22s ease 0.08s both;
}
.equipment-container .equipment-card:nth-child(1) { animation: strela-in 0.25s ease 0.10s both; }
.equipment-container .equipment-card:nth-child(2) { animation: strela-in 0.25s ease 0.13s both; }
.equipment-container .equipment-card:nth-child(3) { animation: strela-in 0.25s ease 0.16s both; }
.equipment-container .equipment-card:nth-child(n+4){ animation: strela-in 0.25s ease 0.18s both; }

/* --- 10. my_work.php --- */

.stats-grid {
    animation: strela-in 0.25s ease 0.1s both;
}
.stats-grid .stat-card:nth-child(1) { animation: strela-in 0.22s ease 0.10s both; }
.stats-grid .stat-card:nth-child(2) { animation: strela-in 0.22s ease 0.13s both; }
.stats-grid .stat-card:nth-child(3) { animation: strela-in 0.22s ease 0.16s both; }
.stats-grid .stat-card:nth-child(4) { animation: strela-in 0.22s ease 0.19s both; }
.work-section {
    animation: strela-in 0.25s ease 0.2s both;
}

/* --- 11. dashboard.php --- */
.profile-card-compact {
    animation: strela-in 0.22s ease 0.08s both;
}
.dsh-card {
    animation: strela-in 0.25s ease 0.12s both;
}
.dsh-skills-grid {
    animation: strela-in 0.25s ease 0.16s both;
}

/* --- 12. user_profile.php --- */
.pcc-avatar-block {
    animation: strela-in 0.22s ease 0.05s both;
}
.skills-grid {
    animation: strela-in 0.25s ease 0.12s both;
}
.skills-grid .skill-card:nth-child(1) { animation: strela-in 0.22s ease 0.12s both; }
.skills-grid .skill-card:nth-child(2) { animation: strela-in 0.22s ease 0.15s both; }
.skills-grid .skill-card:nth-child(3) { animation: strela-in 0.22s ease 0.18s both; }
.skills-grid .skill-card:nth-child(n+4){ animation: strela-in 0.22s ease 0.20s both; }

/* --- 13. Общий .card и .container — фолбэк для остальных страниц --- */
.container {
    animation: strela-in 0.22s ease 0.06s both;
}

/* --- 14. Accessibility: без анимаций если пользователь так выбрал --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    body { opacity: 1 !important; }
}

/* --- 14. Плавная загрузка фотографий --- */

/* Все img по умолчанию прозрачны и слегка размыты */
img {
    opacity: 0;
    /* filter убираем — он ломает position:fixed у футера */
    transition: opacity 0.35s ease;
    /* will-change тоже убираем по той же причине */
}

img.strela-img-loaded {
    opacity: 1;
}

/* Аватары — чуть быстрее, они маленькие */
.avatar-wrapper img,
.pcc-avatar-wrapper img,
.card img {
    transition:
        opacity 0.22s ease,
        filter  0.22s ease;
}

/* Фото в листингах shop/arenda */
.card-img-wrap img,
.listing-card img,
.equipment-card img {
    transition:
        opacity 0.3s ease,
        filter  0.3s ease;
}

/* SVG-иконки, логотипы — не трогаем */
img[src$=".svg"],
.hdr-logo-icon img,
.menu-logo-svg {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}

/* --- 15. Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    img {
        opacity: 1 !important;
        filter: none !important;
        transition: none !important;
    }
}