/* ===== NTH ISLE — Ambient animated background =====
   Подключается в layout.php после main.css. Не трогает body{} — добавляет
   слой через fixed pseudo-элементы под весь контент. */

/* Слой 1: 4 плавающих орба разных цветов + размеров */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(94,210,109,.12) 0%, transparent 35%),
        radial-gradient(circle at 82% 18%, rgba(80,180,255,.08) 0%, transparent 32%),
        radial-gradient(circle at 75% 78%, rgba(165,100,255,.07) 0%, transparent 30%),
        radial-gradient(circle at 22% 82%, rgba(255,170,80,.06) 0%, transparent 30%);
    animation: nthAuroraDrift 28s ease-in-out infinite alternate;
    will-change: background-position, transform;
}

/* Слой 2: тонкий сеточный noise + slow shift (ощущение текстуры) */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 1400px 900px at 50% 110%, rgba(94,210,109,.06), transparent 65%),
        radial-gradient(ellipse 1100px 700px at 100% 0%, rgba(80,180,255,.04), transparent 60%);
    opacity: .85;
    animation: nthBreath 18s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes nthAuroraDrift {
    0%   { transform: translate(0, 0) scale(1);     filter: hue-rotate(0deg); }
    50%  { transform: translate(-30px, 20px) scale(1.05); filter: hue-rotate(15deg); }
    100% { transform: translate(20px, -30px) scale(1.02); filter: hue-rotate(-10deg); }
}

@keyframes nthBreath {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .85; }
    50%      { transform: translate(2%, -1%) rotate(0.5deg); opacity: 1; }
}

/* Слой 3: floating motes (мелкие частицы), генерируются через box-shadow тeneи */
.nth-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.nth-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--accent, #5ed26d);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px 1px currentColor;
    animation: nthFloat var(--dur, 20s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}

@keyframes nthFloat {
    0%   { transform: translate(var(--x-start, 0), 110vh) scale(.6); opacity: 0; }
    10%  { opacity: var(--max-op, .55); }
    50%  { transform: translate(calc(var(--x-start, 0) + var(--x-drift, 30px)), 50vh) scale(1); }
    90%  { opacity: var(--max-op, .55); }
    100% { transform: translate(calc(var(--x-start, 0) + var(--x-drift, 30px) * 2), -10vh) scale(.7); opacity: 0; }
}

/* На мобильных отключаем дорогие эффекты */
@media (max-width: 720px) {
    body::before, body::after { animation: none; }
    .nth-particles { display: none; }
}

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
    .nth-particle { animation: none; opacity: 0; }
}

/* Чуть приподнимаем content над слоями */
body > * { position: relative; z-index: 1; }