/* ================================================================
   ДЕКОРАТИВНЫЕ ФОНОВЫЕ ЭЛЕМЕНТЫ СЕКЦИЙ
   Точки, круги, линии, кольца, полоски — через pseudo-elements и
   вложенные .decor-* элементы для богатого визуального оформления
================================================================ */

/* Общий стиль для всех декоративных элементов внутри секций */
.decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.decor--dots {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 20px 20px;
    border-radius: 50%;
}

.decor--ring {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.decor--ring-dashed {
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.09);
}

.decor--line {
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
}

.decor--cross {
    width: 20px;
    height: 20px;
}

.decor--cross::before,
.decor--cross::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1px;
}

.decor--cross::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.decor--cross::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.decor--diamond {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
}

/* --- О НАПРАВЛЕНИИ --- */
.about {
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 8%;
    right: -30px;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 2px, transparent 2px);
    background-size: 20px 20px;
    border-radius: 50%;
    opacity: 0.6;
    animation: floatSlow 9s ease-in-out infinite;
    pointer-events: none;
}

.about::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 280px;
    height: 280px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: rotateSlow 28s linear infinite;
    pointer-events: none;
}

/* --- ТРЕК ОБУЧЕНИЯ --- */
.education-track {
    position: relative;
    overflow: hidden;
}

.education-track::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 5%;
    width: 160px;
    height: 160px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 18px 18px;
    border-radius: 50%;
    opacity: 0.5;
    animation: floatSlow 11s ease-in-out infinite reverse;
    pointer-events: none;
}

.education-track::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 220px;
    height: 220px;
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: rotateSlow 35s linear infinite;
    pointer-events: none;
}

/* --- ПРЕИМУЩЕСТВА --- */
.advantages {
    position: relative;
    overflow: hidden;
}

.advantages::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 3%;
    width: 240px;
    height: 240px;
    border: 2px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    animation: rotateSlow 22s linear infinite reverse;
    pointer-events: none;
}

.advantages::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 4%;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(circle, rgba(45, 212, 191, 0.2) 2px, transparent 2px);
    background-size: 18px 18px;
    border-radius: 50%;
    opacity: 0.5;
    animation: floatSlow 10s ease-in-out infinite;
    pointer-events: none;
}

/* --- УЧЕБНЫЙ ПЛАН --- */
.curriculum {
    position: relative;
    overflow: hidden;
}

.curriculum::before {
    content: '';
    position: absolute;
    top: 3%;
    left: -40px;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 22px 22px;
    border-radius: 50%;
    opacity: 0.5;
    animation: floatSlow 12s ease-in-out infinite;
    pointer-events: none;
}

.curriculum::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(56, 189, 248, 0.1);
    border-radius: 50%;
    animation: rotateSlow 30s linear infinite reverse;
    pointer-events: none;
}

/* --- КАРЬЕРА --- */
.career {
    position: relative;
    overflow: hidden;
}

.career::before {
    content: '';
    position: absolute;
    top: -20px;
    right: 8%;
    width: 160px;
    height: 160px;
    background-image: radial-gradient(circle, rgba(45, 212, 191, 0.2) 2px, transparent 2px);
    background-size: 20px 20px;
    border-radius: 50%;
    opacity: 0.5;
    animation: floatSlow 8s ease-in-out infinite reverse;
    pointer-events: none;
}

.career::after {
    content: '';
    position: absolute;
    bottom: 8%;
    left: -50px;
    width: 240px;
    height: 240px;
    border: 2px dashed rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    animation: rotateSlow 26s linear infinite;
    pointer-events: none;
}

/* --- ГАЛЕРЕЯ --- */
.gallery {
    position: relative;
    overflow: hidden;
}

.gallery::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 2%;
    width: 140px;
    height: 140px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 16px 16px;
    border-radius: 50%;
    opacity: 0.5;
    animation: floatSlow 9s ease-in-out infinite;
    pointer-events: none;
}

.gallery::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(56, 189, 248, 0.1);
    border-radius: 50%;
    animation: rotateSlow 20s linear infinite reverse;
    pointer-events: none;
}

/* --- CTA --- */
.cta::before {
    content: '';
    position: absolute;
    top: 8%;
    right: 2%;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 22px 22px;
    border-radius: 50%;
    opacity: 0.6;
    animation: floatSlow 8s ease-in-out infinite;
    pointer-events: none;
}

.cta::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 280px;
    height: 280px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: rotateSlow 25s linear infinite reverse;
    pointer-events: none;
}

/* --- FOOTER --- */
.footer {
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: -20px;
    right: 6%;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 2px, transparent 2px);
    background-size: 18px 18px;
    border-radius: 50%;
    opacity: 0.4;
    animation: floatSlow 10s ease-in-out infinite reverse;
    pointer-events: none;
}

.footer::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 220px;
    height: 220px;
    border: 2px dashed rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    animation: rotateSlow 32s linear infinite;
    pointer-events: none;
}

/* Дополнительная анимация для пульсации */
@keyframes pulseSlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

@keyframes driftX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

/* Accessible тема — скрываем весь декор */
[data-theme="accessible"] .decor,
[data-theme="accessible"] .about::before,
[data-theme="accessible"] .about::after,
[data-theme="accessible"] .education-track::before,
[data-theme="accessible"] .education-track::after,
[data-theme="accessible"] .advantages::before,
[data-theme="accessible"] .advantages::after,
[data-theme="accessible"] .curriculum::before,
[data-theme="accessible"] .curriculum::after,
[data-theme="accessible"] .career::before,
[data-theme="accessible"] .career::after,
[data-theme="accessible"] .gallery::before,
[data-theme="accessible"] .gallery::after,
[data-theme="accessible"] .cta::before,
[data-theme="accessible"] .cta::after,
[data-theme="accessible"] .footer::before,
[data-theme="accessible"] .footer::after {
    display: none;
}