/* Секция футера: соцсети (Discord, Instagram, Twitter), кнопка Donate, белая полоса, копирайт.
   Структура слоёв вокруг кнопки Donate (.donate-cta-area):
     • back-layer  z-index 1  — правая лента (.reverse), выезжает справа налево
     • кнопка      z-index 2  — посередине
     • front-layer z-index 3  — левая лента, выезжает слева направо
   Ленты пересекаются ровно через центр кнопки.

   ============================================================================
   ПУЛЬТ УПРАВЛЕНИЯ (CSS-переменные ниже).
   Все размеры и сдвиги ключевых элементов задаются ОДИН РАЗ в .donate-section.
   Меняй цифры здесь — остальное пересчитывается автоматически.

   РАЗМЕРЫ:
     --cta-height            высота синей полосы DONATE
     --tape-thickness        толщина одной ленты (monokimonoki)
     --white-strip-padding-y верт. внутренний отступ белой полосы (= её высота)

   СДВИГИ (у каждого ключевого элемента — пара -x, -y):
     +y = сдвиг вниз,  -y = сдвиг вверх
     +x = сдвиг вправо, -x = сдвиг влево
     Значения: любые CSS-единицы (px, %, vh, vw):
       15px   — 15 пикселей
       -10vh  — на 10% высоты экрана вверх
       5vw    — на 5% ширины экрана вправо
       0      — без сдвига
     Затрагиваемые элементы:
       --icons-offset-*       блок соцсетей
       --cta-offset-*         синяя полоса DONATE (вместе с прозрачной hit-кнопкой)
       --tapes-offset-*       обе ленты вместе (точка их пересечения)
       --white-strip-offset-* белая полоса с копирайтом
   ============================================================================ */
.donate-section {
    /* === РАЗМЕРЫ === */
    --cta-height: 60px;
    --tape-thickness: 13px;
    --white-strip-padding-y: 5vh;

    /* === СДВИГИ === */
    --icons-offset-x: 0px;
    --icons-offset-y: -40vh;
    --cta-offset-x: 0px;
    --cta-offset-y: 0px;
    --tapes-offset-x: 0px;
    --tapes-offset-y: -80px;
    --white-strip-offset-x: 0px;
    --white-strip-offset-y: 0px;

    position: relative; z-index: 0; padding: 40px 20px 0; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    min-height: 100vh;
    overflow-x: clip;
}

/* Зона вокруг кнопки Donate — служит system координат для лент,
   чтобы они пересекались точно через центр кнопки независимо от высоты секции.
   Высота фиксирована (равна высоте старой кнопки), все потомки внутри — absolute. */
.donate-bottom-block {
    width: 100%;
    margin-top: auto; /* прижимает весь нижний блок к низу donate-section */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Зона вокруг кнопки Donate — служит system координат для лент. */
.donate-cta-area {
    position: relative;
    width: 100%;
    height: var(--cta-height);
    transform: translate(var(--cta-offset-x), var(--cta-offset-y));
}

/* Слой ленты — позиционируется относительно центра .donate-cta-area, плюс сдвиги
   из переменных --tapes-offset-*. Ширина 100vw — лента простирается на всё окно. */
.donate-tape-layer {
    position: absolute;
    top: calc(50% + var(--tapes-offset-y));
    left: calc(50% + var(--tapes-offset-x));
    width: 100vw;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Стек слоёв (снизу вверх к зрителю):
   z 1 — нормальная лента (нижний-левый → верхний-правый) — дальний
   z 2 — синяя + белая полосы
   z 3 — reverse лента (нижний-правый → верхний-левый) — ближний к зрителю
   z 4 — прозрачная hit-кнопка (клики) */
.donate-tape-layer.back-layer { z-index: 3; }
.donate-tape-layer.front-layer { z-index: 1; }

.angled-tape-container {
    width: 100%; overflow: hidden; height: var(--tape-thickness); position: relative;
    transform: rotate(15deg) scale(1.05) translateX(-120%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.angled-tape-container.reverse { transform: rotate(-15deg) scale(1.05) translateX(120%); }

/* Когда .donate-section получает класс .tapes-revealed (через IntersectionObserver
   в intro.js — срабатывает при докрутке до футера), ленты выезжают на свои места.
   Левая (нормальная) выезжает первой, правая (.reverse) — с задержкой 0.5с,
   общее время эффекта ≈ 1с (как описано в ТЗ). */
.donate-section.tapes-revealed .angled-tape-container { transform: rotate(15deg) scale(1.05) translateX(0); }
.donate-section.tapes-revealed .angled-tape-container.reverse {
    transform: rotate(-15deg) scale(1.05) translateX(0);
    transition-delay: 0.5s;
}

.social-icons-main {
    display: flex; gap: 20px; justify-content: center; margin-bottom: 60px;
    position: relative; z-index: 2;
    transform: translate(var(--icons-offset-x), var(--icons-offset-y));
}
.social-icons-main a {
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0.6; transition: opacity 0.3s; cursor: pointer;
    text-decoration: none;
}
.social-icons-main a:hover { opacity: 1; }
.social-icons-main svg { width: 24px; height: 24px; fill: #fff; display: block; }

/* Синяя полоса с надписью DONATE — визуальный элемент, на всю ширину окна.
   pointer-events: none — клики проходят насквозь до .btn-donate-hit поверх неё. */
.btn-donate-visual {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #0033ff;
    color: #ffffff;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* Прозрачная кнопка-перехватчик кликов. z-index 4 — ВЫШЕ передней ленты (z 3),
   поэтому клик ловится даже там, где лента визуально перекрывает DONATE. */
.btn-donate-hit {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 4;
}
.btn-donate-hit:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Белая полоса в самом низу — на всю ширину окна (выходит за padding секции).
   Копирайт внутри неё чёрным цветом. После полосы страница заканчивается —
   никакого чёрного хвоста. Высота определяется --white-strip-padding-y. */
.bottom-white-strip {
    position: relative; z-index: 2;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #ffffff;
    padding: var(--white-strip-padding-y) 20px;
    box-sizing: border-box;
    text-align: center;
    transform: translate(var(--white-strip-offset-x), var(--white-strip-offset-y));
}
.bottom-white-strip .footer-text {
    color: #000000; font-size: 9px; font-family: sans-serif; margin: 0;
}

/* Модалка "Donations coming soon" — стандартная: затемнение + центрированное окно. */
.donate-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.donate-modal-overlay[hidden] { display: none; }

.donate-modal {
    position: relative;
    background: #000000;
    border: 1px solid #333;
    color: #ffffff;
    padding: 50px 40px 40px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    box-sizing: border-box;
}

.donate-modal-close {
    position: absolute;
    top: 8px;
    right: 14px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.donate-modal-text {
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
}