/* =========================================
   ANIMATION.CSS
   TELERAD PACS (THEME SYNC - OPTIMIZED)
========================================= */

/* =========================================
   HERO ANIMATION
========================================= */
.hero-content {
    animation: fadeInUp 1s ease forwards;
}

.hero h1 {
    animation: heroTitle 1.2s ease;
}

.hero h2 {
    animation: fadeInUp 1.5s ease;
}

.hero p {
    animation: fadeInUp 1.8s ease;
}

.hero-buttons {
    animation: fadeInUp 2s ease;
}

.hero-badge {
    animation: floating 4s ease-in-out infinite;
}

/* =========================================
   SCROLL REVEAL (JS Triggered)
========================================= */
.card, .product-card, .feature-item, .stat-card, .workflow-item {
    opacity: 0;
    transform: translateY(40px);
    /* Transisi transform sudah dihandle di style.css, kita hanya butuh ini saat load awal */
    transition: opacity 0.8s ease, transform 0.8s ease; 
}

.card.active, .product-card.active, .feature-item.active, .stat-card.active, .workflow-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   PRODUCT CARD "SHINE" EFFECT (Premium UI)
========================================= */
.product-card {
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(8, 75, 110, 0.06), transparent);
}

.product-card:hover::before {
    animation: shine 0.8s linear;
}

/* =========================================
   WORKFLOW PULSE
========================================= */
.workflow-item {
    animation: workflowPulse 3s infinite;
}

/* =========================================
   STATS GLOW
========================================= */
.stat-card h2 {
    animation: statGlow 3s infinite;
}

/* =========================================
   BUTTON SHINE
========================================= */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}

.btn:hover::before {
    animation: shine 0.8s linear;
}

/* =========================================
   WHATSAPP PULSE
========================================= */
.floating-wa {
    animation: pulse 2s infinite;
}

/* =========================================
   LIGHTBOX
========================================= */
#lightbox img {
    animation: zoomIn 0.3s ease;
}

/* =========================================
   KEYFRAMES
========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floating {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes heroTitle {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shine {
    from { left: -100%; }
    to   { left: 120%; }
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
    70%  { box-shadow: 0 0 0 20px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

@keyframes workflowPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes statGlow {
    0%   { text-shadow: none; }
    50%  { text-shadow: 0 0 20px rgba(242, 183, 5, 0.6); }
    100% { text-shadow: none; }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}