/* =========================================================
   GLOBAL ANIMATION SETTINGS
   ========================================================= */

:root {
    --anim-duration: 0.6s;
    --anim-delay: 0.15s;
}


/* =========================================================
   FADE ANIMATIONS
   ========================================================= */

.fade-in {
    opacity: 0;
    animation: fadeIn var(--anim-duration) ease forwards;
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp var(--anim-duration) ease forwards;
}

.fade-down {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeDown var(--anim-duration) ease forwards;
}

.fade-left {
    opacity: 0;
    transform: translateX(-25px);
    animation: fadeLeft var(--anim-duration) ease forwards;
}

.fade-right {
    opacity: 0;
    transform: translateX(25px);
    animation: fadeRight var(--anim-duration) ease forwards;
}


/* === KEYFRAMES === */

@keyframes fadeIn {
    to { opacity: 1; }
}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
    to { opacity: 1; transform: translateX(0); }
}


/* =========================================================
   DELAY HELPERS (fade-up-delay-1,2,3...)
   ========================================================= */

.fade-delay-1 { animation-delay: calc(var(--anim-delay) * 1); }
.fade-delay-2 { animation-delay: calc(var(--anim-delay) * 2); }
.fade-delay-3 { animation-delay: calc(var(--anim-delay) * 3); }
.fade-delay-4 { animation-delay: calc(var(--anim-delay) * 4); }



/* =========================================================
   PARALLAX SCROLL
   ========================================================= */

.parallax {
    transform: translateY(0);
    transition: transform 0.2s linear;
    will-change: transform;
}



/* =========================================================
   BUTTON ANIMATIONS
   ========================================================= */

.btn-pulse:hover {
    animation: pulse 0.4s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}



/* =========================================================
   AI CHAT TYPING EFFECT
   ========================================================= */

.typing-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    animation: typingBlink 1s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBlink {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}



/* =========================================================
   SHIMMER LOADING (Skeleton Loader)
   ========================================================= */

.shimmer {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}

.shimmer::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    height: 100%; width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.18),
        transparent
    );
    animation: shimmerMove 1.5s infinite;
}

@keyframes shimmerMove {
    0% { left: -100%; }
    100% { left: 100%; }
}



/* =========================================================
   GLOW EFFECTS
   ========================================================= */

.glow {
    box-shadow: 0 0 20px var(--primary-glow);
    animation: glowAnim 2.5s ease-in-out infinite alternate;
}

@keyframes glowAnim {
    0% { box-shadow: 0 0 10px var(--primary-glow); }
    100% { box-shadow: 0 0 25px var(--primary-glow); }
}



/* =========================================================
   GRADIENT ANIMATED BACKGROUND
   (untuk hero section premium)
   ========================================================= */

.gradient-anim {
    background: linear-gradient(-45deg,
        #1a1a1a, 
        #101020, 
        #151515, 
        #0f0f18
    );
    background-size: 400% 400%;
    animation: gradientFlow 12s ease infinite;
}

@keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* =========================================================
   SCROLL REVEAL (auto detect by JS)
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}