/* ============================================
   GLOBAL FX — геометричні фігури + анімації появи
   МійВчитель
   ============================================ */

/* ---------- Глобальний шар фігур ---------- */
#global_shapes_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.gs {
    position: absolute;
    will-change: transform;
    transition: transform 0.15s linear;
}

/* Кола */
.gs_circle {
    border-radius: 50%;
    border: 1.5px solid rgba(113, 255, 215, 0.18);
    background: rgba(113, 255, 215, 0.03);
}

/* Квадрати / прямокутники */
.gs_square {
    border: 1.5px solid rgba(168, 85, 247, 0.2);
    background: rgba(168, 85, 247, 0.03);
}

/* Ромби */
.gs_diamond {
    border: 1.5px solid rgba(251, 163, 41, 0.2);
    background: rgba(251, 163, 41, 0.03);
    transform: rotate(45deg);
}

/* Хрестики / плюси */
.gs_cross::before,
.gs_cross::after {
    content: '';
    position: absolute;
    background: rgba(113, 255, 215, 0.25);
    border-radius: 2px;
}

.gs_cross::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}

.gs_cross::after {
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    margin-left: -1px;
}

/* Трикутники через clip-path */
.gs_triangle {
    background: rgba(6, 182, 212, 0.1);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: none !important;
}

/* Точки */
.gs_dot {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

/* ---------- Індивідуальні фігури ---------- */

/* Hero секція */
.gs_1 {
    width: 140px;
    height: 140px;
    top: 8vh;
    left: 3%;
    animation: gs_float_1 9s ease-in-out infinite;
}

.gs_2 {
    width: 60px;
    height: 60px;
    top: 20vh;
    left: 12%;
    animation: gs_float_2 7s ease-in-out infinite;
}

.gs_3 {
    width: 90px;
    height: 90px;
    top: 15vh;
    right: 5%;
    animation: gs_float_3 11s ease-in-out infinite;
}

.gs_4 {
    width: 40px;
    height: 40px;
    top: 60vh;
    right: 8%;
    animation: gs_float_1 8s ease-in-out infinite 1s;
}

.gs_5 {
    width: 6px;
    height: 6px;
    top: 35vh;
    left: 6%;
    animation: gs_twinkle 4s ease-in-out infinite;
}

.gs_6 {
    width: 5px;
    height: 5px;
    top: 75vh;
    left: 20%;
    animation: gs_twinkle 3s ease-in-out infinite 0.8s;
}

/* Середина лендінгу */
.gs_7 {
    width: 110px;
    height: 110px;
    top: 130vh;
    left: 2%;
    animation: gs_float_2 10s ease-in-out infinite 0.5s;
}

.gs_8 {
    width: 70px;
    height: 70px;
    top: 160vh;
    right: 3%;
    animation: gs_float_3 8s ease-in-out infinite;
}

.gs_9 {
    width: 50px;
    height: 50px;
    top: 145vh;
    left: 15%;
    animation: gs_float_1 12s ease-in-out infinite 1.5s;
}

.gs_10 {
    width: 80px;
    height: 80px;
    top: 185vh;
    right: 10%;
    animation: gs_float_2 9s ease-in-out infinite 0.3s;
}

.gs_11 {
    width: 7px;
    height: 7px;
    top: 150vh;
    right: 25%;
    animation: gs_twinkle 5s ease-in-out infinite 1s;
}

.gs_12 {
    width: 4px;
    height: 4px;
    top: 175vh;
    left: 40%;
    animation: gs_twinkle 3.5s ease-in-out infinite 2s;
}

/* Секція цін */
.gs_13 {
    width: 120px;
    height: 120px;
    top: 230vh;
    right: 2%;
    animation: gs_float_3 11s ease-in-out infinite 0.7s;
}

.gs_14 {
    width: 55px;
    height: 55px;
    top: 260vh;
    left: 4%;
    animation: gs_float_1 7s ease-in-out infinite;
}

.gs_15 {
    width: 45px;
    height: 45px;
    top: 280vh;
    right: 15%;
    animation: gs_float_2 9s ease-in-out infinite 1.2s;
}

.gs_16 {
    width: 6px;
    height: 6px;
    top: 250vh;
    left: 30%;
    animation: gs_twinkle 4.5s ease-in-out infinite 0.5s;
}

/* Нижня частина */
.gs_17 {
    width: 100px;
    height: 100px;
    top: 330vh;
    left: 1%;
    animation: gs_float_2 8s ease-in-out infinite 0.9s;
}

.gs_18 {
    width: 65px;
    height: 65px;
    top: 360vh;
    right: 4%;
    animation: gs_float_1 10s ease-in-out infinite;
}

.gs_19 {
    width: 5px;
    height: 5px;
    top: 345vh;
    right: 22%;
    animation: gs_twinkle 3s ease-in-out infinite 1.5s;
}

.gs_20 {
    width: 35px;
    height: 35px;
    top: 390vh;
    left: 8%;
    animation: gs_float_3 7s ease-in-out infinite 0.4s;
}

/* ---------- Плаваючі анімації ---------- */
@keyframes gs_float_1 {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-18px) rotate(5deg);
    }

    66% {
        transform: translateY(8px) rotate(-3deg);
    }
}

@keyframes gs_float_2 {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(20px) rotate(-6deg);
    }
}

@keyframes gs_float_3 {

    0%,
    100% {
        transform: translateY(0px) rotate(45deg);
    }

    40% {
        transform: translateY(-14px) rotate(52deg);
    }

    80% {
        transform: translateY(10px) rotate(40deg);
    }
}

@keyframes gs_twinkle {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 0.1;
        transform: scale(0.3);
    }
}

/* ---------- Анімація появи блоків ---------- */

/* Базовий стан — до появи */
.reveal-block {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Варіанти напрямків */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Стан виходу (зменшення на 20%) */
.reveal-scale.exited,
.reveal-block.exited,
.reveal-left.exited,
.reveal-right.exited {
    opacity: 0;
    transform: scale(0.8);
}

/* Стан після появи */
.reveal-block.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Затримки для дочірніх елементів */
.reveal-delay-1 {
    transition-delay: 0.1s !important;
}

.reveal-delay-2 {
    transition-delay: 0.2s !important;
}

.reveal-delay-3 {
    transition-delay: 0.3s !important;
}

.reveal-delay-4 {
    transition-delay: 0.45s !important;
}

.reveal-delay-5 {
    transition-delay: 0.6s !important;
}

/* ---------- Mobile: вимикаємо fixed-layer фігури ---------- */
@media (max-width: 767px) {
    #global_shapes_layer {
        display: none;
    }
}