/**
 * Аркелия — амбиентный фон с золотыми эффектами.
 * Работает в светлой и тёмной теме (html[data-theme]).
 * Мягкое золотое свечение + парящие искры. Учитывает prefers-reduced-motion.
 */

/* Слой эффектов лежит ПОВЕРХ контента (z-index:3), но ниже шапки/меню
   (1030–2001) и лоадера (10050). pointer-events:none — клики проходят
   насквозь. Так искры и свечение видны на любой странице, даже если у
   секций непрозрачный фон. */
.arq-ambient {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

/* --- Свечение (радиальные пятна) --- */
.arq-ambient__glow {
    position: absolute;
    inset: 0;
}

/* Светлая тема: тёплое кремово-золотое свечение */
html[data-theme="light"] .arq-ambient__glow {
    background:
        radial-gradient(48% 42% at 50% 8%, rgba(201, 168, 106, 0.16) 0%, rgba(201, 168, 106, 0) 70%),
        radial-gradient(40% 50% at 8% 88%, rgba(201, 168, 106, 0.12) 0%, rgba(201, 168, 106, 0) 70%),
        radial-gradient(42% 52% at 92% 90%, rgba(201, 168, 106, 0.1) 0%, rgba(201, 168, 106, 0) 70%);
}

/* Тёмная тема: насыщенное золото на глубоком фоне */
html[data-theme="dark"] .arq-ambient__glow {
    background:
        radial-gradient(50% 45% at 50% 6%, rgba(201, 168, 106, 0.22) 0%, rgba(201, 168, 106, 0) 70%),
        radial-gradient(40% 50% at 10% 90%, rgba(201, 168, 106, 0.16) 0%, rgba(201, 168, 106, 0) 70%),
        radial-gradient(42% 52% at 90% 92%, rgba(201, 168, 106, 0.14) 0%, rgba(201, 168, 106, 0) 70%);
}

.arq-ambient__glow {
    animation: arqGlowBreathe 9s ease-in-out infinite;
}

@keyframes arqGlowBreathe {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* --- Искры --- */
.arq-ambient span {
    position: absolute;
    bottom: -12px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #e6cf9b;
    box-shadow: 0 0 8px 1px rgba(201, 168, 106, 0.6);
    opacity: 0;
    animation: arqFloatUp linear infinite;
}

/* В светлой теме искры чуть теплее и плотнее, чтобы читались на кремовом */
html[data-theme="light"] .arq-ambient span {
    background: #c9a86a;
    box-shadow: 0 0 7px 1px rgba(180, 145, 80, 0.55);
}

.arq-ambient span:nth-child(1) { left: 7%;  animation-duration: 19s; animation-delay: 0s;  }
.arq-ambient span:nth-child(2) { left: 19%; animation-duration: 24s; animation-delay: 5s;  width: 2px; height: 2px; }
.arq-ambient span:nth-child(3) { left: 32%; animation-duration: 21s; animation-delay: 11s; }
.arq-ambient span:nth-child(4) { left: 45%; animation-duration: 27s; animation-delay: 3s;  width: 2px; height: 2px; }
.arq-ambient span:nth-child(5) { left: 57%; animation-duration: 20s; animation-delay: 8s;  }
.arq-ambient span:nth-child(6) { left: 69%; animation-duration: 23s; animation-delay: 14s; width: 4px; height: 4px; }
.arq-ambient span:nth-child(7) { left: 81%; animation-duration: 22s; animation-delay: 6s;  width: 2px; height: 2px; }
.arq-ambient span:nth-child(8) { left: 92%; animation-duration: 26s; animation-delay: 16s; }
.arq-ambient span:nth-child(9) { left: 38%; animation-duration: 25s; animation-delay: 19s; width: 2px; height: 2px; }
.arq-ambient span:nth-child(10){ left: 63%; animation-duration: 18s; animation-delay: 10s; }

@keyframes arqFloatUp {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    10%  { opacity: 0.85; }
    90%  { opacity: 0.55; }
    100% { transform: translateY(-106vh) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .arq-ambient span { display: none; }
    .arq-ambient__glow { animation: none; }
}