/* ==================================================
   ANIMASI UMUM
================================================== */

/* Muncul dari bawah */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    animation: revealUp 1s ease forwards;
}

@keyframes revealUp {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==================================================
   ANIMASI FOTO
================================================== */

.hero-card {
    animation:
        revealUp 1s ease forwards,
        float 4s ease-in-out 1s infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


/* ==================================================
   ANIMASI TEKS HOME
================================================== */

.hero-grid > div:last-child {
    animation:
        textAppear 1s ease 0.2s both;
}

@keyframes textAppear {

    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* ==================================================
   ANIMASI FOTO SAAT HOVER
================================================== */

.profile-photo {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.profile-photo:hover {
    transform:
        scale(1.03)
        rotate(1deg);

    box-shadow:
        0 25px 50px
        rgba(73, 91, 145, 0.25);
}


/* ==================================================
   ANIMASI SPARKLE
================================================== */

.sparkle {
    animation:
        sparkle 2s ease-in-out infinite;
}

.s2 {
    animation-delay:
        0.5s;
}

.s3 {
    animation-delay:
        1s;
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0.4;

        transform:
            scale(1);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.3);
    }

}


/* ==================================================
   ANIMASI TOMBOL
================================================== */

.btn,
.button {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.btn:hover,
.button:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 10px 20px
        rgba(73, 91, 145, 0.18);
}


/* ==================================================
   ANIMASI SKILL CARD
================================================== */

.skill-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.skill-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(73, 91, 145, 0.16);
}

/* ==================================================
   ANIMASI BAR SKILL
================================================== */

.bar span {
    display: block;
    height: 100%;

    border-radius: 20px;

    animation: skillBar 1.5s ease forwards;
}

@keyframes skillBar {

    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }

}
/* ==================================================
   ANIMASI PROJECT
================================================== */

.project-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.project-card:hover {
    transform:
        translateY(-5px);
}

.project-logo img {
    transition:
        transform 0.4s ease;
}

.project-logo:hover img {
    transform:
        scale(1.04);
}


/* ==================================================
   ANIMASI FEATURE CARD
================================================== */

.feature-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.feature-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 16px 30px
        rgba(24, 38, 74, 0.12);
}


/* ==================================================
   ANIMASI CONTACT
================================================== */

.contact-item {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-item:hover {
    transform:
        translateX(5px);
}


/* ==================================================
   MENGHORMATI PENGATURAN REDUCE MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}