/* ============================================
   STYLE.CSS - VANTAGE SOLUTIONS
   Berisi semua custom styles:
   - Base styles
   - Animations (jam, titik jatuh, siklus merah)
   - Hero section (typing, particles, blobs)
   ============================================ */


/* ============================================
   1. ANIMASI SECTION MASALAH
   ============================================ */

/* ===== Animasi Titik Jatuh Berantakan (Card 2) ===== */
.scattered-dots {
    color: #0d9488; /* teal */
}

.falling-dot {
    opacity: 0.9;
}

.dot-1 { animation: fall-chaos 3s ease-in infinite; animation-delay: 0s; }
.dot-2 { animation: fall-chaos 2.5s ease-in infinite; animation-delay: 0.3s; }
.dot-3 { animation: fall-chaos 3.2s ease-in infinite; animation-delay: 0.6s; }
.dot-4 { animation: fall-chaos 2.8s ease-in infinite; animation-delay: 0.15s; }
.dot-5 { animation: fall-chaos 3.5s ease-in infinite; animation-delay: 0.45s; }
.dot-6 { animation: fall-chaos 2.6s ease-in infinite; animation-delay: 0.75s; }
.dot-7 { animation: fall-chaos 3.1s ease-in infinite; animation-delay: 0.2s; }
.dot-8 { animation: fall-chaos 2.9s ease-in infinite; animation-delay: 0.5s; }

@keyframes fall-chaos {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: translateY(10px) translateX(-8px) rotate(45deg);
        opacity: 0.9;
    }
    40% {
        transform: translateY(25px) translateX(12px) rotate(-30deg);
        opacity: 0.8;
    }
    60% {
        transform: translateY(40px) translateX(-5px) rotate(60deg);
        opacity: 0.6;
    }
    80% {
        transform: translateY(55px) translateX(8px) rotate(-45deg);
        opacity: 0.3;
    }
    100% {
        transform: translateY(75px) translateX(-3px) rotate(90deg);
        opacity: 0;
    }
}

/* ===== Animasi Siklus Berputar → Merah (Card 3) ===== */
.cycle-spin {
    color: #0d9488;
    animation: 
        spin-cycle 2s linear infinite,
        color-shift 6s ease-in-out infinite;
}

.cycle-path {
    stroke: currentColor;
}

@keyframes spin-cycle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes color-shift {
    0%   { color: #0d9488; } /* teal */
    30%  { color: #0d9488; } /* tetap teal */
    50%  { color: #f59e0b; } /* kuning/amber */
    70%  { color: #ef4444; } /* merah - warning */
    85%  { color: #ef4444; } /* tetap merah */
    100% { color: #0d9488; } /* kembali ke teal */
}

/* ===== Jam Analog (Card 1) ===== */
.clock-hour,
.clock-minute,
.clock-second {
    transition: transform 0.1s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}

.clock-second {
    transition: none;
}


/* ============================================
   2. HERO SECTION
   ============================================ */

/* ===== Background Floating Blobs ===== */
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes float-delayed {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(1.08); }
    66% { transform: translate(25px, -35px) scale(0.92); }
}

.animate-float {
    animation: float 12s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 15s ease-in-out infinite;
    animation-delay: -5s;
}

/* ===== Entry Animations ===== */
@keyframes slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes glow-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4));
        background-size: 200% 100%;
        background-position: 0% 50%;
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(45, 212, 191, 0.8));
        background-size: 200% 100%;
        background-position: 100% 50%;
    }
}

.animate-slide-down {
    animation: slide-down 0.8s ease-out both;
}

.animate-fade-in-up {
    animation: fade-in-up 0.9s ease-out 0.6s both;
}

.animate-fade-in-up-delayed {
    animation: fade-in-up 0.9s ease-out 0.9s both;
}

.animate-fade-in {
    animation: fade-in 1s ease-out 1.2s both;
}

.animate-glow {
    background-size: 200% 100%;
    animation: glow-pulse 3s ease-in-out infinite;
}

/* ===== Typing Effect ===== */
.typing-text {
    position: relative;
    display: inline-block;
    color: #ffffff;
}

.typing-text::after {
    content: '|';
    position: absolute;
    right: -8px;
    top: 0;
    color: #5eead4;
    font-weight: 300;
    animation: blink-caret 0.8s step-end infinite;
}

.typing-text.done::after {
    animation: blink-caret 1s step-end infinite;
}

@keyframes blink-caret {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ===== Floating Data Particles ===== */
.data-particle {
    position: absolute;
    color: rgba(94, 234, 212, 0.15);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
    animation: particle-float 20s linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100px) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

/* ===== Scroll Indicator ===== */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    animation: scroll-bounce 2s ease-in-out infinite;
    cursor: pointer;
    transition: color 0.3s ease;
}

.scroll-indicator:hover {
    color: #5eead4;
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ===== CTA Button Shine Effect ===== */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.6s ease;
}

.btn-shine:hover::before {
    left: 100%;
}

/* ===== Grid Pattern Overlay ===== */
.grid-pattern {
    background-image: 
        linear-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 234, 212, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ===== Responsive Tweaks ===== */
@media (max-width: 640px) {
    .hero-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    .hero-section h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero-section p.lead {
        font-size: 1rem;
    }
    
    .data-particle {
        display: none;
    }
}