/* ═══ Живой перламутр за контентом (components/aurora-field.js) ═══════════
   Пять мягких пятен приглушённого жемчуга (сирень, барвинок, вода, розовый и
   тёплый жемчуг) всё время перетекают, как свет в матовом стекле; поверх
   медленно проходит диагональный блик. Под курсором — небольшая мягкая
   линза, ближние пятна стекаются к указателю.
   Как рисуется (переделка 26.09 — лаги на Mac): пять пятен собраны в два
   «поля» (.af-field > i) — каждое поле одна текстура с радиальными
   градиентами, рисуется один раз, дальше видеокарта только двигает его
   (transform/opacity): <i> плывёт по кругу ключевыми кадрами, обёртку
   подтягивает к курсору JS. Два поля плывут навстречу — цвета расходятся и
   смешиваются. Линза — без backdrop-filter (размытие под ней пересчитывалось
   каждый кадр): светлый отлив градиентом. Капли — градиентные
   точки без filter: blur и без mix-blend-mode. Движущихся слоёв три (два
   поля и блик), линза с каплями — только пока курсор над областью. */

.af-host { isolation: isolate; }
.af {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
/* Поле больше области на четверть с каждой стороны: при дрейфе и подтягивании
   его край не заходит в окно. Координаты пятен — ANCHORS из aurora-field.js,
   пересчитанные в поле: (a + 0.25) / 1.5. Прозрачность «в разговоре тише»
   (chat.css: --af-dim) — на обёртке поля: у неё один рисующий слой, отдельный
   проход смешивания не нужен (прозрачность на всём .af его требовала). */
.af-field {
    position: absolute;
    inset: -25%;
    opacity: var(--af-dim, 1);
    will-change: transform;
    transition: opacity 600ms ease;
}
.af-field i {
    position: absolute;
    inset: 0;
    will-change: transform, opacity;
}
/* Поле 1: сирень (b1), барвинок (b3), тёплый жемчуг (b5). */
.af-field.f1 i {
    background:
        radial-gradient(circle min(31vmax, 450px) at 35.3% 38%, rgba(150, 140, 200, 0.21), rgba(150, 140, 200, 0.095) 45%, transparent),
        radial-gradient(circle min(29vmax, 420px) at 55.3% 64.7%, rgba(128, 146, 198, 0.175), rgba(128, 146, 198, 0.08) 45%, transparent),
        radial-gradient(circle min(21vmax, 300px) at 74% 58%, rgba(206, 178, 150, 0.06), rgba(206, 178, 150, 0.027) 45%, transparent);
    animation: af-f1 21s ease-in-out infinite alternate;
}
/* Поле 2: вода (b2), розовый жемчуг (b4). */
.af-field.f2 i {
    background:
        radial-gradient(circle min(27vmax, 390px) at 64.7% 34%, rgba(120, 172, 176, 0.145), rgba(120, 172, 176, 0.065) 45%, transparent),
        radial-gradient(circle min(22vmax, 320px) at 28.7% 68.7%, rgba(196, 150, 176, 0.08), rgba(196, 150, 176, 0.036) 45%, transparent);
    animation: af-f2 25s ease-in-out infinite alternate;
}
@keyframes af-f1 {
    0%   { transform: translate3d(-2%, -1.5%, 0) rotate(-3deg) scale(0.97); opacity: 0.84; }
    50%  { transform: translate3d(2.5%, 2%, 0) rotate(2deg) scale(1.04); opacity: 1; }
    100% { transform: translate3d(-1%, 3%, 0) rotate(4deg) scale(1); opacity: 0.9; }
}
@keyframes af-f2 {
    0%   { transform: translate3d(2%, 1%, 0) rotate(3deg) scale(1.03); opacity: 1; }
    50%  { transform: translate3d(-2.5%, 2.5%, 0) rotate(-2deg) scale(0.96); opacity: 0.78; }
    100% { transform: translate3d(1%, -2.5%, 0) rotate(-4deg) scale(1.05); opacity: 0.95; }
}

/* Диагональный блик по стеклу: широкая мягкая полоса перламутра медленно
   проходит туда-обратно (как у фона сайта, .aurora::before в base.css). */
.af::after {
    content: '';
    position: absolute;
    inset: -20% -40%;
    background: linear-gradient(118deg, transparent 38%, rgba(214, 208, 240, 0.03) 44%, rgba(255, 255, 255, 0.05) 48%, rgba(204, 230, 228, 0.035) 51%, rgba(240, 226, 208, 0.025) 54%, transparent 60%);
    opacity: var(--af-dim, 1);
    will-change: transform;
    animation: af-sheen 38s ease-in-out infinite alternate;
}
@keyframes af-sheen { 0% { transform: translate3d(-14%, -3%, 0); } 100% { transform: translate3d(14%, 3%, 0); } }

/* Под курсором: небольшая линза (.af-lens) — светлый жемчужный отлив к
   верхнему краю, как у выпуклого стекла, — и мягкое
   перламутровое пятно со шлейфом (.af-drop — три капли с разной задержкой:
   свет «стекает» за указателем). Капли крупнее прежних: прежнее размытие
   16 px расширяло их, теперь мягкость — в самом градиенте.
   Всё двигается transform'ом. */
.af-lens, .af-drop {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.af-lens {
    width: 132px;
    height: 132px;
    background: radial-gradient(circle closest-side at 40% 36%, rgba(255, 255, 255, 0.07), rgba(214, 208, 240, 0.035) 50%, rgba(204, 228, 228, 0.012) 78%, transparent);
}
.af-drop {
    width: 204px;
    height: 204px;
    /* Спад — как у гауссова пятна (σ ≈ 35 px), каким его делало прежнее размытие. */
    background: radial-gradient(circle closest-side at 45% 43%, rgba(206, 198, 236, 0.27) 0%, rgba(200, 198, 236, 0.24) 20%, rgba(176, 192, 228, 0.16) 40%, rgba(190, 222, 222, 0.08) 60%, rgba(190, 222, 222, 0.03) 80%, transparent);
}
.af-drop.d2 { width: 152px; height: 152px; background: radial-gradient(circle closest-side, rgba(190, 222, 222, 0.17) 0%, rgba(186, 214, 224, 0.15) 20%, rgba(176, 192, 228, 0.1) 40%, rgba(176, 192, 228, 0.05) 60%, rgba(176, 192, 228, 0.018) 80%, transparent); }
.af-drop.d3 { width: 128px; height: 128px; background: radial-gradient(circle closest-side, rgba(232, 214, 200, 0.15) 0%, rgba(224, 210, 212, 0.13) 20%, rgba(206, 198, 236, 0.09) 40%, rgba(206, 198, 236, 0.045) 60%, rgba(206, 198, 236, 0.016) 80%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .af-field i, .af::after { animation: none; }
    .af-lens, .af-drop { display: none; }
}