/* =========================================================
 * ФАЙЛ: style_decor.css
 * НАЗНАЧЕНИЕ: Декоративный слой главной страницы (только index.php).
 *             Золотые углы вокруг фото, розы по бокам, фон-искры,
 *             пульс золотого сердца. Использует ТОЛЬКО существующие
 *             PNG из assets/decor/. Работает в обоих скинах.
 * КУДА: /var/www/html/style_decor.css
 * ВЕРСИЯ: 2026-08-26 v2 (Fix: sparkles cover instead of repeat)
 * ========================================================= */

/* ---------- 1. Фон-искры (мягкое мерцание, не мешает чтению) ---------- */
@keyframes apSparkle {
    0%, 100% { opacity: 0.05; }
    50%      { opacity: 0.14; }
}
body.page-index .container::before {
    content: '';
    position: fixed;
    inset: 0;
    /* FIX: cover no-repeat устраняет швы, растягивая искры на весь экран */
    background: url('assets/decor/sparkles.png') center / cover no-repeat;
    animation: apSparkle 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
/* контент поверх искр */
body.page-index .container > * { position: relative; z-index: 1; }

/* ---------- 2. Золотая рамка-углы вокруг фото ---------- */
body.page-index .photo-wrapper {
    padding: 20px;
    background:
        url('assets/decor/corner_tl.png') left  top    / 92px no-repeat,
        url('assets/decor/corner_tr.png') right top    / 92px no-repeat,
        url('assets/decor/corner_bl.png') left  bottom / 92px no-repeat,
        url('assets/decor/corner_br.png') right bottom / 92px no-repeat;
    filter: drop-shadow(0 0 18px rgba(214,175,55,0.25));
}

/* ---------- 3. Розы по бокам фото ---------- */
/* УБРАНО 2026-08-25: большие бордовые розы уже рисует
   style_overhaul_v2_3.5.css (assets/roses/ap_rose_burgundy.png, 164px).
   Вторая пара поверх выглядела как «маленькие розы выглядывают из-под
   больших» — дубль удалён. */

/* ---------- 4. Золотые сердца кольца фото ---------- */
/* УБРАНО 2026-08-27 (пакет 15): пульсирующее PNG-сердце у нижнего края фото
   (::after с heart_gold.png) КОНФЛИКТОВАЛО с сердцами кольца из index_view.php —
   два правила рисовали сердца в разных местах, итог зависел от специфичности.
   Теперь сердца живут внутри квадратного .hero-ring-box (index_view.php):
   то же PNG-сердце и та же пульсация, но точно на линии кольца сверху и снизу. */

/* ---------- 4b. Живые сердца в заголовке вместо эмодзи ---------- */
body.page-index .title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.page-index .title-wrapper .title-wave { flex: 0 0 100%; }
body.page-index .title-heart {
    flex: 0 0 auto;
    width: 30px;
    height: 26px;
    font-size: 0;
    background: url('assets/decor/heart_gem.png') center / contain no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,64,129,.35));
    vertical-align: middle;
}
/* Плавающее сердце над заголовком */
body.page-index .home-col-center::after {
    content: '' !important;
    width: 34px;
    height: 28px;
    top: 0;
    background: url('assets/decor/heart_gem.png') center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(255,80,135,.55));
}
/* Заголовок: только золотое свечение */
body.page-index .title-wrapper h1 {
    filter: drop-shadow(0 0 14px rgba(212,175,55,.75)) drop-shadow(0 0 34px rgba(241,74,130,.30));
}

/* Пульс сердечек в заголовке */
@keyframes apTitleHeart {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.22); }
}
body.page-index .title-heart {
    display: inline-block;
    animation: apTitleHeart 2.4s ease-in-out infinite;
}
body.page-index .title-heart:last-child { animation-delay: 1.2s; }

/* ---------- 5. Дневной скин: приглушаем свечения ---------- */
html.theme-day body.page-index .container::before { animation-name: apSparkleDay; }
@keyframes apSparkleDay {
    0%, 100% { opacity: 0.04; }
    50%      { opacity: 0.09; }
}
html.theme-day body.page-index .photo-wrapper {
    filter: drop-shadow(0 2px 10px rgba(167,123,22,0.25));
}

/* ---------- 7. Живое сияние фото ---------- */
@keyframes apPhotoGlowPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(241,74,130,.18), 0 0 0 9px rgba(212,175,55,.08), 0 0 36px rgba(241,74,130,.34), 0 0 70px rgba(212,175,55,.16); }
    50%      { box-shadow: 0 0 0 5px rgba(241,74,130,.28), 0 0 0 11px rgba(212,175,55,.16), 0 0 52px rgba(241,74,130,.52), 0 0 96px rgba(212,175,55,.30); }
}
body.page-index .photo-wrapper {
    animation: apPhotoGlowPulse 3.6s ease-in-out infinite;
}
/* День: ореол приглушён */
@keyframes apPhotoGlowPulseDay {
    0%, 100% { box-shadow: 0 0 0 4px rgba(214,140,170,.20), 0 0 0 9px rgba(190,150,60,.10), 0 0 26px rgba(214,140,170,.30), 0 0 54px rgba(190,150,60,.18); }
    50%      { box-shadow: 0 0 0 5px rgba(214,140,170,.30), 0 0 0 11px rgba(190,150,60,.16), 0 0 38px rgba(214,140,170,.42), 0 0 74px rgba(190,150,60,.26); }
}
html.theme-day body.page-index .photo-wrapper {
    animation: apPhotoGlowPulseDay 3.6s ease-in-out infinite;
}

/* ---------- 6. Мобильные: углы меньше ---------- */
@media (max-width: 700px) {
    body.page-index .photo-wrapper {
        background-size: 60px, 60px, 60px, 60px;
        padding: 12px;
    }
}