/**
 * Upload Proposal Page Styles
 *
 * Berisi styling untuk halaman upload proposal termasuk:
 * - Animasi floating circles untuk background
 * - Fade in animation untuk elemen
 * - Responsive design untuk berbagai ukuran layar
 * - Dark mode support
 *
 * @author LazisMU Team
 * @version 1.0
 * @since 2025
 */

/* ===============================================
   ANIMATIONS
   =============================================== */

/**
 * Animasi float untuk elemen background circles
 * Membuat efek melayang naik turun secara smooth
 */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }

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

/**
 * Animasi fade in untuk entrance effect
 * Digunakan untuk animasi masuk elemen saat page load
 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================================
   FLOATING BACKGROUND ELEMENTS
   =============================================== */

/**
 * Base class untuk floating circles
 * Membuat elemen background berbentuk lingkaran dengan animasi float
 */
.float-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.1),
        rgba(245, 158, 11, 0.1)
    );
    animation: float 6s ease-in-out infinite;
}

/**
 * Dark mode variant untuk floating circles
 * Menggunakan opacity lebih rendah untuk tampilan gelap
 */
.dark .float-circle {
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.05),
        rgba(245, 158, 11, 0.05)
    );
}

/**
 * Circle 1 - Kecil, posisi kiri atas
 * Ukuran: 50x50px, Delay: 0s
 */
.circle-1 {
    width: 50px;
    height: 50px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

/**
 * Circle 2 - Sedang, posisi kanan tengah
 * Ukuran: 70x70px, Delay: 2s
 */
.circle-2 {
    width: 70px;
    height: 70px;
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

/**
 * Circle 3 - Besar, posisi kiri bawah
 * Ukuran: 80x80px, Delay: 4s
 */
.circle-3 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 15%;
    animation-delay: 4s;
}

/* ===============================================
   UTILITY CLASSES
   =============================================== */

/**
 * Fade in animation utility class
 * Dapat diterapkan pada elemen yang membutuhkan entrance animation
 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}