/**
 * Home Page Styles
 *
 * Berisi styling untuk halaman home termasuk:
 * - Hero slider dengan navigasi dan pagination
 * - Program cards dengan hover effects
 * - Infinite scroll animations untuk pilar dan mitra
 * - Responsive design dengan dark mode support
 * - Primary color: #f68f28 dengan variations
 *
 * @author LazisMU Team
 * @version 1.0
 * @since 2025
 */

/* ===============================================
   COLOR VARIABLES
   =============================================== */

:root {
    /* Primary color (#f68f28) variations */
    --primary-color: #f68f28;
    --primary-hover: #e5731c;
    --primary-light: #f89d4a;
    --primary-lighter: #fbb570;
    --primary-lightest: #fdcd96;

    /* Dark mode primary variations */
    --primary-dark: #d16815;
    --primary-dark-hover: #b85a12;
}

/* ===============================================
   HERO SLIDER STYLES
   =============================================== */

/**
 * Slider container dengan pointer events disabled
 * untuk memungkinkan click-through ke navigation areas
 */
#hero-slider,
#hero-slider .hero-slide img,
#hero-slider .hero-slide .bg-gradient-to-t {
    pointer-events: none;
}

/**
 * Navigation areas - kiri dan kanan untuk slider control
 * Menggunakan z-index tinggi untuk memastikan clickable
 */
#hero-prev-btn,
#hero-next-btn {
    pointer-events: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 33%;
    cursor: pointer;
    z-index: 50;
}

/**
 * Pagination dots styling dengan primary color
 * Active state menggunakan primary color
 */
#hero-pagination div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

#hero-pagination div.active {
    width: 24px;
    border-radius: 9999px;
    background: var(--primary-color);
}

/* ===============================================
   INFINITE SCROLL ANIMATIONS
   =============================================== */

/**
 * Pilar section infinite scroll animation
 * 30 detik untuk satu cycle lengkap
 */
@keyframes scroll-pilar {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 12px));
    }
}

.animate-scroll-pilar {
    animation: scroll-pilar 30s linear infinite;
    will-change: transform;
}

.animate-scroll-pilar:hover {
    animation-play-state: paused;
}

/**
 * Mitra section infinite scroll animation
 * Seamless loop dengan duplicated content
 */
@keyframes scroll-mitra {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll-mitra {
    animation: scroll-mitra 30s linear infinite;
    display: flex;
    width: max-content;
}

.animate-scroll-mitra:hover {
    animation-play-state: paused;
}

/* ===============================================
   PROGRAM CARDS EFFECTS
   =============================================== */

/**
 * Program card hover effects dengan primary color
 * Shimmer effect menggunakan gradient primary colors
 */
.program-card-shimmer {
    position: absolute;
    inset: 0;
}

.program-card-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(246, 143, 40, 0.2),
        rgba(246, 143, 40, 0.1),
        transparent
    );
    transform: translateX(-100%);
    transition: transform 1000ms ease-out;
}

.program-card:hover .program-card-shimmer::before {
    transform: translateX(100%);
}

/**
 * Program card glow effect dengan primary color
 */
.program-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    background: linear-gradient(
        135deg,
        rgba(246, 143, 40, 0.25),
        rgba(248, 157, 74, 0.2),
        rgba(251, 181, 112, 0.15)
    );
    filter: blur(20px);
    transition: opacity 700ms ease-out;
}

.program-card:hover .program-card-glow {
    opacity: 1;
}

/* Dark mode glow adjustment */
.dark .program-card-glow {
    background: linear-gradient(
        135deg,
        rgba(246, 143, 40, 0.2),
        rgba(248, 157, 74, 0.15),
        rgba(251, 181, 112, 0.1)
    );
}

/* ===============================================
   RESPONSIVE DESIGN
   =============================================== */

/**
 * Mobile optimizations untuk scroll containers
 */
@media (max-width: 768px) {
    .animate-scroll-pilar,
    .animate-scroll-mitra {
        animation-duration: 20s;
    }

    #hero-prev-btn,
    #hero-next-btn {
        width: 40%;
    }
}

/**
 * Large screen optimizations
 */
@media (min-width: 1024px) {
    .animate-scroll-pilar,
    .animate-scroll-mitra {
        animation-duration: 40s;
    }
}

/* ===============================================
   SECTION BACKGROUNDS & GRADIENTS
   =============================================== */

/**
 * Section background dengan primary color gradients
 */
.home-section-gradient {
    background: linear-gradient(
        135deg,
        rgba(246, 143, 40, 0.05) 0%,
        rgba(248, 157, 74, 0.03) 50%,
        rgba(251, 181, 112, 0.02) 100%
    );
}

.dark .home-section-gradient {
    background: linear-gradient(
        135deg,
        rgba(246, 143, 40, 0.1) 0%,
        rgba(248, 157, 74, 0.05) 50%,
        rgba(251, 181, 112, 0.03) 100%
    );
}