/**
 * PT Heraya Mitra Abadi - Custom Stylesheet
 * High-tech safety aesthetics, hero mesh gradients, and interactive utilities
 */

/* Prevent Alpine.js flickering before load */
[x-cloak] {
    display: none !important;
}

/* Hero Section Mesh Gradient & Cyber Safety Lighting */
.hero-pattern {
    background-color: #050a18;
    background-image:
        radial-gradient(at 80% 12%, rgba(225, 29, 72, 0.22) 0px, transparent 50%),
        radial-gradient(at 15% 80%, rgba(6, 182, 212, 0.18) 0px, transparent 55%),
        radial-gradient(at 50% 30%, rgba(245, 158, 11, 0.10) 0px, transparent 45%),
        radial-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px;
}

/* Custom Image Container Utility */
.product-img-box {
    background: linear-gradient(145deg, #1e293b, #0f172a);
}

/* Client Partner Logos Cards */
.client-logo-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

.client-logo-card img {
    filter: grayscale(100%);
    opacity: 0.75;
    transition: all 0.3s ease;
}

.client-logo-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Infinite Marquee Ticker */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee-scroll 35s linear infinite;
    will-change: transform;
}

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

.animate-marquee-reverse {
    display: flex;
    width: max-content;
    animation: marquee-scroll 38s linear infinite reverse;
    will-change: transform;
}

.animate-marquee-reverse:hover {
    animation-play-state: paused;
}