/* === ЛЕТАЮЩИЕ НОТЫ ПО ВСЕМУ САЙТУ === */
.site-notes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;                  /* можно увеличить, если перекрывается другими слоями */
    overflow: hidden;
}

.site-note {
    position: absolute;
    color: rgba(255,168,0,0.35); /* прозрачный золотой */
    font-size: 42px;
    animation: floatNoteSite 15s linear infinite;
    opacity: 0;
}

/* Раскидываем по разным стартовым позициям и задержкам */
.site-note:nth-child(1) { left: 5%;  top: 90%; animation-delay: 0s;  font-size: 36px; }
.site-note:nth-child(2) { left: 85%; top: 85%; animation-delay: 3s;  font-size: 48px; }
.site-note:nth-child(3) { left: 45%; top: 95%; animation-delay: 6s;  font-size: 40px; }
.site-note:nth-child(4) { left: 70%; top: 80%; animation-delay: 9s;  font-size: 52px; }
.site-note:nth-child(5) { left: 15%; top: 88%; animation-delay: 12s; font-size: 44px; }

@keyframes floatNoteSite {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.35;
    }
    90% {
        opacity: 0.18;
    }
    100% {
        transform: translateY(-110vh) rotate(40deg);
        opacity: 0;
    }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 768px) {
    .site-note {
        animation-duration: 22s;   /* дольше – реже появляются */
    }

    /* Оставляем только 3 ноты, остальные скрываем */
    .site-note:nth-child(4),
    .site-note:nth-child(5) {
        display: none;
    }

    /* Уменьшаем размеры для мобильных */
    .site-note:nth-child(1) { font-size: 28px; }
    .site-note:nth-child(2) { font-size: 34px; }
    .site-note:nth-child(3) { font-size: 30px; }

    /* Можно чуть развести их по горизонтали, чтобы не слипались */
    .site-note:nth-child(1) { left: 10%; top: 92%; }
    .site-note:nth-child(2) { left: 80%; top: 88%; }
    .site-note:nth-child(3) { left: 45%; top: 95%; }
}