/**
 * File: home-page.css
 * Deskripsi: Styling halaman depan (Home) Tritex Membrane (disesuaikan dengan standard desktop 1280px)
 *
 * Fokus Optimasi:
 * - Standar Lebar Desktop 1280px: Pengaturan kontainer dan tata letak homepage yang konsisten.
 * - LCP Fast-Pass: Menghapus ketergantungan Unsplash eksternal demi zero extra DNS lookup.
 * - GPU Compositor Layer: Penggunaan `will-change: transform` untuk animasi 60fps tanpa dropped frames.
 * - Accessibility (WCAG 2.1 & WHCM): Kompatibel dengan prefers-reduced-motion & Windows High Contrast Mode.
 * - Touch-Device Safe: Perlindungan dari efek hover lengket pada mobile touch events.
 */

/* =========================================================
   1. HERO SECTION & LAYOUT CONTAINER
   ========================================================= */

.hero-bg {
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #020617; /* Slate-950: Instant fallback warna gelap saat LCP image dimuat */

    /*
     * KETEPATAN LCP PERFORMANCE:
     * Menggunakan CSS Variable dengan fallback gradient lokal.
     * Tidak ada URL eksternal (Unsplash/DLL) di CSS untuk mencegah blocking DNS render.
     */
    background-image: 
        linear-gradient(135deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.80)),
        var(--hero-bg-image, none);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*
     * 'scroll' wajib pada mobile untuk menghindari heavy repaint jank 
     * akibat 'background-attachment: fixed'.
     */
    background-attachment: scroll;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .hero-bg {
        min-height: 72vh;
    }
}


/* =========================================================
   2. DESKTOP 1280px CONTAINER ALIGNMENT
   ========================================================= */

/*
 * Memastikan container utama halaman homepage terkunci secara optimal 
 * pada batas 1280px agar tata letak section tetap rapi dan proporsional.
 */
.max-w-7xl {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    box-sizing: border-box;
}


/* =========================================================
   3. INFINITE BRAND MARQUEE (GPU ISOLATED)
   ========================================================= */

.home-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    box-sizing: border-box;

    /*
     * CSS Containment: Mengisolasi subtree marquee dari layout pohon utama.
     * Mencegah kalkulasi reflow global saat marquee bergeser.
     */
    contain: layout paint;

    /* Masking gradien pudar di tepi kiri & kanan untuk transisi halus */
    -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent);
    mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent);
}

.home-marquee-content {
    display: flex;
    flex-shrink: 0;
    animation: homeMarquee 30s linear infinite;

    /* Hint GPU Compositor untuk alokasi memori layer terisolasi */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Pause animasi khusus untuk input pointer berpresisi tinggi (mouse) */
@media (hover: hover) and (pointer: fine) {
    .home-marquee-content:hover {
        animation-play-state: paused;
    }
}

@media (max-width: 768px) {
    .home-marquee-content {
        animation-duration: 22s; /* Sedikit dipercepat pada layar kecil agar rasio perpindahan seimbang */
    }
}

@keyframes homeMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}


/* =========================================================
   4. GALLERY IMAGE & HOVER ZOOM
   ========================================================= */

.home-img-zoom {
    width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #f1f5f9; /* Slate-100: Skeleton placeholder penyangga CLS */
    box-sizing: border-box;
}

.home-img-zoom img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .home-img-zoom:hover img {
        will-change: transform;
        transform: scale(1.03);
    }
}


/* =========================================================
   5. TESTIMONIAL CARD & SWIPER INTEGRATION
   ========================================================= */

.testimonial-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.testimonial-card p {
    flex-grow: 1;
}

.testimonialSwiper {
    width: 100%;
    overflow: hidden;
}

.testimonialSwiper .swiper-slide {
    height: auto;
}

.testimonialSwiper .swiper-wrapper {
    box-sizing: border-box;
}

.testimonialSwiper .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
}


/* =========================================================
   6. ACCESSIBILITY (REDUCED MOTION & FORCED COLORS)
   ========================================================= */

/* Menghormati preferensi pengguna yang mengurangi gerakan */
@media (prefers-reduced-motion: reduce) {
    .home-marquee-content {
        animation: none !important;
        transform: none !important;
    }

    .home-img-zoom img {
        transition: none !important;
        transform: none !important;
    }

    .testimonialSwiper {
        scroll-behavior: auto;
    }
}

/* Dukungan Windows High Contrast Mode (WHCM) */
@media (forced-colors: active) {
    .home-marquee-container {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .home-img-zoom {
        border: 1px solid CanvasText;
    }
}