/* ------------------- БАЗА ------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ------------------- WRAPPER & SCENE ------------------- */

.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ------------------- ФОН ------------------- */

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

/* ------------------- ДЕКОР ------------------- */

.logo {
    position: absolute;
    width: 90%;
    left: 0%;
    top: 0%;
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

.star {
    position: absolute;
    width: 39%;
    left: 6%;
    top: 5%;
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

.star_2 {
    position: absolute;
    width: 50%;
    left: 48%;
    top: 5%;
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

.star_3 {
    position: absolute;
    width: 50%;
    left: 20%;
    top: 70%;
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

/* ------------------- АВАТАР ------------------- */

.avatar {
    position: absolute;
    width: 90%;
    left: 0%;
    bottom: -6%;
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

/* ------------------- FEDECHKOVA ------------------- */

.fed {
    position: absolute;
    width: 99%;
    left: 50%;
    top: 1%;
    transform: translateX(-50%);
    opacity: 0;
    animation: fadeIn 2s forwards ease-out;
}

/* ------------------- КНОПКИ / СОЦМЕРЕЖІ (ДЕСКТОП) ------------------- */

.btn {
    position: absolute;
    width: 11%;
    opacity: 0;                         /* для анімації появи */
    animation: riseUp 1.4s ease-out forwards;
    transition: transform 0.25s ease;   /* hover-підняття */
    cursor: pointer;
    z-index: 10;
}

.btn img {
    width: 100%;
    height: auto;
    display: block;
}

/* Позиції кнопок + затримка появи */
.btn-tg { left: 46%; top: 50%; animation-delay: 0.5s; }
.btn-ig { left: 59%; top: 50%; animation-delay: 0.7s; }
.btn-tw { left: 72%; top: 50%; animation-delay: 0.9s; }
.btn-tt { left: 85%; top: 50%; animation-delay: 1.1s; }

/* Hover-ефект (десктоп/тачпад) */
.btn:hover {
    transform: translateY(-10px) scale(1.05);
}

/* ------------------- ДОНАТ ------------------- */

.donate {
    position: absolute;
    width: 38%;
    left: 52%;
    top: 73%;
    opacity: 0;
    animation: riseUp 1.6s ease-out forwards;
    animation-delay: 1.3s;
    transition: transform 0.25s ease;
    cursor: pointer;
    z-index: 10;
}

.donate img {
    width: 100%;
    height: auto;
    display: block;
}

.donate:hover {
    transform: translateY(-10px) scale(1.05);
}

/* ------------------- ЧАСТИНКИ ------------------- */

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;  /* над фоном, під кнопками & текстами */
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0.6;
    filter: blur(2px);
    animation: floatUp linear infinite;
}

/* Анімація руху частинок */
@keyframes floatUp {
    0%   { transform: translateY(0) scale(1); opacity: 0.2; }
    50%  { opacity: 0.8; }
    100% { transform: translateY(-1200px) scale(0.8); opacity: 0; }
}

/* ------------------- АНІМАЦІЇ ------------------- */

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes riseUp {
    0% {
        transform: translateY(120px) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: translateY(-10px) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Пульсація (якщо використовуєш клас .pulse далі в JS) */
@keyframes pulseSoft {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulseSoft 2.5s ease-in-out infinite;
}

/* =========================================================
   АДАПТИВ: ПЛАНШЕТИ (ширина до 1024px)
   ========================================================= */

@media (max-width: 1024px) and (min-width: 768px) {

    .logo {
        width: 100%;
        top: 1%;
    }

    .star {
        width: 32%;
        top: 6%;
        left: 5%;
    }

    .star_2 {
        width: 42%;
        top: 6%;
        left: 50%;
    }

    .star_3 {
        width: 45%;
        top: 72%;
        left: 18%;
    }

    .avatar {
        width: 100%;
        left: -3%;
        bottom: -8%;
    }

    .fed {
        width: 120%;
        left: 35%;
        top: 6%;
    }

    .btn {
        width: 18%;
    }

    .btn-tg { left: 42%; top: 40%; }
    .btn-ig { left: 67%; top: 40%; }
    .btn-tw { left: 42%; top: 62%; }
    .btn-tt { left: 67%; top: 62%; }

    .donate {
        width: 42%;
        left: 42%;
        top: 78%;
    }
}

@media (max-width: 799px) and (min-width: 768px) {

    .logo {
        width: 100%;
        top: 1%;
    }

    .star {
        width: 50%;
        top: 6%;
        left: 5%;
    }

    .star_2 {
        width: 42%;
        top: 6%;
        left: 50%;
    }

    .star_3 {
        width: 45%;
        top: 72%;
        left: 18%;
    }

    .avatar {
        width: 110%;
        left: -3%;
        bottom: -8%;
    }

    .fed {
        width: 120%;
        left: 35%;
        top: 6%;
    }

    .btn {
        width: 18%;
    }

    .btn-tg { left: 32%; top: 34%; }
    .btn-ig { left: 57%; top: 34%; }
    .btn-tw { left: 32%; top: 52%; }
    .btn-tt { left: 57%; top: 52%; }

    .donate {
        width: 42%;
        left: 34%;
        top: 67%;
    }
}
/* =========================================================
   АДАПТИВ: МОБІЛЬНІ (ширина до 767px)
   ========================================================= */
   

@media (max-width: 767px) {

    .scene {
        width: 100vw;
        height: 100vh;
    }

    /* Фон — як був */
    .bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Логотип трохи менше */
    .logo {
        width: 150%;
        left: 1%;
        top: 0%;
    }

    .star {
        width: 55%;
        left: -5%;
        top: 10%;
    }

    .star_2 {
        width: 60%;
        left: 40%;
        top: 12%;
    }

    .star_3 {
        width: 70%;
        left: 15%;
        top: 78%;
    }

    /* FEDECHKOVA — зверху по центру */
    .fed {
        width: 130%;
        top: 6%;
        left: 31%;
        transform: translateX(-50%);
    }

    /* Кнопки 2x2 по центру */
    .btn {
        width: 28%;
        animation: riseUp 1.2s ease-out forwards;
    }

    .btn-tg { 
        left: 14%; 
        top: 27%; 
        animation-delay: 0.3s; 
    }

    .btn-ig { 
        left: 57%;
        top: 27%;
        animation-delay: 0.5s; 
    }

    .btn-tw { 
        left: 14%; 
        top: 43%; 
        animation-delay: 0.7s; 
    }

    .btn-tt { 
        left: 57%; 
        top: 43%; 
        animation-delay: 0.9s; 
    }

     /*Аватар — нижче кнопок, по центру */
    .avatar {
        width: 100%;
        left: 48%;
        bottom: 0%;
        transform: translateX(-50%);
        position: fixed;
    }

    /* Донат — під кнопками, перед аватаром */
    .donate {
        width: 90%;
        left: 5%;
        top: 55%;
        transform: translateX(-50%);
        animation: riseUp 1.4s ease-out forwards;
        animation-delay: 1.1s;
    }
}