/* cyberabuse — заглушка.
   Тон взят с натуры: пылевая буря над Лас-Вегасом, почти монохром,
   натриевый свет сквозь взвесь. Никакого неона. */

:root {
    --umber:  #150B05;
    --rust:   #5C2A0E;
    --sodium: #A8501A;
    --flare:  #D9822B;
    --bone:   #F0DCC4;
    --sand:   #D9C3A6;
    --ember:  #E8A85C;

    --drift: 120s;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100svh;
    display: grid;
    place-content: end center;
    padding: 2rem 1.5rem clamp(3.5rem, 16vh, 11rem);
    background: var(--umber);
    color: var(--bone);
    font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ─── Дымка ─────────────────────────────────────────────── */

.field {
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
}

.glow {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(130px);
    will-change: transform;
}

/* Далёкий источник — солнце, которого не видно сквозь взвесь. */
.glow--far {
    top: 6%;
    left: 46%;
    width: 86vmax;
    height: 64vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(217, 130, 43, .52) 0%,
        rgba(190, 100, 32, .30) 26%,
        rgba(140, 64, 20, .13) 48%,
        rgba(92, 42, 14, .04) 68%,
        rgba(92, 42, 14, 0) 86%);
    animation: drift-far var(--drift) ease-in-out infinite alternate;
}

/* Ближняя стена пыли, наплывает сбоку. */
.glow--near {
    bottom: 2%;
    left: -6%;
    width: 96vmax;
    height: 54vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(168, 80, 26, .30) 0%,
        rgba(120, 55, 18, .17) 34%,
        rgba(92, 42, 14, .06) 58%,
        rgba(21, 11, 5, 0) 82%);
    animation: drift-near calc(var(--drift) * 1.45) ease-in-out infinite alternate;
}

/* Горизонт: там, где пыль ложится на землю. */
.horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: 54%;
    height: 34vh;
    display: block;
    background: linear-gradient(to bottom,
        rgba(168, 80, 26, 0) 0%,
        rgba(140, 64, 20, .20) 42%,
        rgba(21, 11, 5, .85) 100%);
    filter: blur(46px);
}

@keyframes drift-far {
    from { transform: translate3d(-3%, 1%, 0) scale(1); }
    to   { transform: translate3d(3%, -2%, 0) scale(1.09); }
}

@keyframes drift-near {
    from { transform: translate3d(2%, 0, 0) scale(1.04); }
    to   { transform: translate3d(-4%, -1%, 0) scale(1); }
}

/* Виньетка — держит кадр вместе, как затемнение к краям объектива. */
.field::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 78% 68% at 50% 46%,
        rgba(21, 11, 5, 0) 40%,
        rgba(21, 11, 5, .42) 78%,
        rgba(21, 11, 5, .78) 100%);
}

/* Зерно — как на плёнке, поверх всего и неподвижно. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Содержание ────────────────────────────────────────── */

.plate {
    position: relative;
    z-index: 2;
    max-width: 46rem;
    text-align: center;
}

/* Мягкая тень под текстом: гарантирует читаемость, где дымка светлеет. */
.plate::before {
    content: '';
    position: absolute;
    inset: -60% -30%;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(21, 11, 5, .82) 0%,
        rgba(21, 11, 5, .45) 46%,
        rgba(21, 11, 5, 0) 76%);
}

.wordmark {
    display: flex;
    justify-content: center;
    margin: 0 0 clamp(1.6rem, 4vh, 2.8rem);
    font-family: 'Unbounded', 'Golos Text', sans-serif;
    font-weight: 200;
    font-size: clamp(1.9rem, 8.5vw, 6.2rem);
    line-height: 1;
    color: var(--bone);
    text-shadow: 0 0 42px rgba(217, 130, 43, .30);
}

/* Разрядка добавляет пустоту после последней буквы — снимаем её,
   иначе строка встаёт левее оптического центра. */
.wordmark span {
    letter-spacing: .26em;
    margin-right: -.26em;
}

.note {
    margin: 0;
    font-size: clamp(.95rem, 1.9vw, 1.15rem);
    line-height: 1.7;
    color: var(--sand);
    text-wrap: balance;
}

.note a {
    color: var(--ember);
    text-decoration: underline;
    text-underline-offset: .28em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(232, 168, 92, .45);
    transition: color .25s ease, text-decoration-color .25s ease;
}

.note a:hover {
    color: #F6C88A;
    text-decoration-color: rgba(246, 200, 138, .9);
}

.note a:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: .35em;
    border-radius: 2px;
}

/* ─── Уступки ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .glow--far,
    .glow--near { animation: none; }
}

/* На узких экранах большие размытия дороги — смягчаем. */
@media (max-width: 600px) {
    .glow { filter: blur(80px); }
    .horizon { top: 50%; }
}