/* ================================================
   ANIMATION.CSS - All Animations & Effects
   ================================================ */

/* ================================================
   FADE UP ANIMATION
   ================================================ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   FADE LEFT ANIMATION
   ================================================ */

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================================
   FADE RIGHT ANIMATION
   ================================================ */

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================================
   ZOOM IN ANIMATION
   ================================================ */

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

/* ================================================
   SLIDE UP ANIMATION
   ================================================ */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   GLOW EFFECT
   ================================================ */

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
    }
}

/* ================================================
   FLOATING ANIMATION
   ================================================ */

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

/* ================================================
   PULSE ANIMATION
   ================================================ */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ================================================
   BOUNCE ANIMATION
   ================================================ */

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

/* ================================================
   SHIMMER EFFECT
   ================================================ */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ================================================
   SCALE PULSE
   ================================================ */

@keyframes scalePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ================================================
   ROTATE ANIMATION
   ================================================ */

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

/* ================================================
   GRADIENT SHIFT
   ================================================ */

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

/* ================================================
   MODAL FADE IN
   ================================================ */

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================================
   SLIDING TEXT
   ================================================ */

@keyframes slideText {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ================================================
   WORD ROTATION (untuk typing effect)
   ================================================ */

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   GLOW TEXT EFFECT
   ================================================ */

@keyframes glowText {
    0%, 100% {
        text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
        color: #FFFFFF;
    }
    50% {
        text-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
        color: #38BDF8;
    }
}

/* ================================================
   MOUSE GLOW EFFECT
   ================================================ */

@keyframes mouseGlow {
    0%, 100% {
        background: radial-gradient(600px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(37, 99, 235, 0.1), transparent 80%);
    }
}

/* ================================================
   BORDER ANIMATION
   ================================================ */

@keyframes borderFlow {
    0% {
        border-image-source: linear-gradient(90deg, #2563EB, #38BDF8, #2563EB);
        border-image-slice: 1;
    }
    50% {
        border-image-source: linear-gradient(90deg, #38BDF8, #2563EB, #38BDF8);
        border-image-slice: 1;
    }
    100% {
        border-image-source: linear-gradient(90deg, #2563EB, #38BDF8, #2563EB);
        border-image-slice: 1;
    }
}

/* ================================================
   ICON FLOAT ANIMATION
   ================================================ */

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* ================================================
   STAGGER ANIMATION (for multiple elements)
   ================================================ */

@keyframes staggerFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   NUMBER COUNTER ANIMATION
   ================================================ */

@keyframes countUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ================================================
   CARD TILT EFFECT
   ================================================ */

@keyframes cardTilt {
    0% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
}

/* ================================================
   HOVER SCALE WITH SHADOW
   ================================================ */

@keyframes hoverScale {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    100% {
        transform: scale(1.02);
        box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
    }
}

/* ================================================
   RIPPLE EFFECT
   ================================================ */

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ================================================
   AOS ANIMATION CLASSES
   ================================================ */

/* Fade animations */
.aos-animate[data-aos="fade-up"] {
    animation: fadeUp 0.8s ease forwards;
}

.aos-animate[data-aos="fade-left"] {
    animation: fadeLeft 0.8s ease forwards;
}

.aos-animate[data-aos="fade-right"] {
    animation: fadeRight 0.8s ease forwards;
}

.aos-animate[data-aos="zoom-in"] {
    animation: zoomIn 0.8s ease forwards;
}

.aos-animate[data-aos="slide-up"] {
    animation: slideUp 0.8s ease forwards;
}

/* ================================================
   SKILL CARD ANIMATIONS
   ================================================ */

.skill-card {
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
}

.skill-card:nth-child(1) { animation-delay: 0s; }
.skill-card:nth-child(2) { animation-delay: 0.1s; }
.skill-card:nth-child(3) { animation-delay: 0.2s; }
.skill-card:nth-child(4) { animation-delay: 0.3s; }
.skill-card:nth-child(5) { animation-delay: 0.4s; }
.skill-card:nth-child(6) { animation-delay: 0.5s; }
.skill-card:nth-child(7) { animation-delay: 0.6s; }
.skill-card:nth-child(8) { animation-delay: 0.7s; }
.skill-card:nth-child(9) { animation-delay: 0.8s; }
.skill-card:nth-child(10) { animation-delay: 0.9s; }
.skill-card:nth-child(11) { animation-delay: 1s; }
.skill-card:nth-child(12) { animation-delay: 1.1s; }

.skill-card .skill-icon {
    animation: float 3s ease-in-out infinite;
}

/* ================================================
   PROJECT CARD ANIMATIONS
   ================================================ */

.project-card {
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
}

.project-card:nth-child(1) { animation-delay: 0s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.4s; }
.project-card:nth-child(4) { animation-delay: 0.6s; }

/* ================================================
   STAT CARD ANIMATIONS
   ================================================ */

.stat-card {
    animation: zoomIn 0.6s ease forwards;
    opacity: 0;
}

.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.4s; }
.stat-card:nth-child(4) { animation-delay: 0.6s; }

/* ================================================
   TIMELINE ANIMATIONS
   ================================================ */

.timeline-item {
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
}

.timeline-item:nth-child(1) { animation-delay: 0s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.4s; }
.timeline-item:nth-child(4) { animation-delay: 0.6s; }

/* ================================================
   BUTTON HOVER EFFECT
   ================================================ */

.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    animation: none; /* Handled by hover states */
}

/* ================================================
   CARD HOVER GLOW
   ================================================ */

.skill-card:hover,
.project-card:hover,
.stat-card:hover {
    animation: glow 2s ease-in-out infinite;
}

/* ================================================
   FLOATING ELEMENTS ANIMATION
   ================================================ */

.floating-item {
    animation: iconFloat 4s ease-in-out infinite;
}

/* ================================================
   SMOOTH REVEAL ON SCROLL
   ================================================ */

[data-aos] {
    opacity: 0;
}

.aos-animate {
    opacity: 1 !important;
}

/* ================================================
   FORM INPUT ANIMATION
   ================================================ */

.contact-form input,
.contact-form textarea {
    animation: slideUp 0.5s ease forwards;
    opacity: 0;
}

.contact-form .form-group:nth-child(1) > input { animation-delay: 0s; }
.contact-form .form-group:nth-child(2) > input { animation-delay: 0.1s; }
.contact-form .form-group:nth-child(3) > input { animation-delay: 0.2s; }
.contact-form .form-group:nth-child(4) > textarea { animation-delay: 0.3s; }

/* ================================================
   LOADING ANIMATION
   ================================================ */

@keyframes loadingPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

.loader-ring {
    animation: rotate 1s linear infinite !important;
}

.loader-text {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

/* ================================================
   CURSOR GLOW ANIMATION
   ================================================ */

.cursor-glow {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(56, 189, 248, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: cursorGlow 0.5s ease forwards;
}

@keyframes cursorGlow {
    0% {
        box-shadow: 0 0 5px rgba(56, 189, 248, 0.3);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
        transform: scale(1);
    }
}

/* ================================================
   PAGE TRANSITION ANIMATION
   ================================================ */

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    animation: pageSlideIn 0.6s ease;
}

/* ================================================
   ENHANCED HOVER STATE ANIMATIONS
   ================================================ */

/* Button enhanced hover */
.btn-primary:hover {
    animation: scalePulse 0.6s ease-out;
}

/* Card enhanced hover */
.project-card:hover .project-image img {
    animation: zoomIn 0.6s ease forwards;
}

/* ================================================
   ICON PULSE ANIMATION
   ================================================ */

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(56, 189, 248, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.8));
    }
}

.skill-icon {
    animation: iconPulse 2s ease-in-out infinite;
}

/* ================================================
   NAVBAR ANIMATION
   ================================================ */

@keyframes navbarSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar {
    animation: navbarSlideDown 0.6s ease;
}

/* ================================================
   SECTION TITLE ANIMATION
   ================================================ */

.section-title {
    animation: slideInUp 0.6s ease forwards;
    opacity: 0;
}

/* ================================================
   HERO TEXT ANIMATION
   ================================================ */

.hero-title {
    animation: fadeUp 0.8s ease 0.2s forwards;
    opacity: 0;
}

.greeting {
    animation: fadeUp 0.8s ease forwards;
    opacity: 0;
}

.role {
    animation: fadeUp 0.8s ease 0.4s forwards;
    opacity: 0;
}

/* ================================================
   ABOUT CONTENT ANIMATION
   ================================================ */

.about-text p {
    animation: fadeLeft 0.6s ease forwards;
    opacity: 0;
}

.about-text p:nth-child(1) { animation-delay: 0s; }
.about-text p:nth-child(2) { animation-delay: 0.2s; }
.about-text p:nth-child(3) { animation-delay: 0.4s; }

/* ================================================
   CONTACT METHOD ANIMATION
   ================================================ */

.contact-method {
    animation: slideUp 0.5s ease forwards;
    opacity: 0;
}

.contact-method:nth-child(1) { animation-delay: 0s; }
.contact-method:nth-child(2) { animation-delay: 0.1s; }
.contact-method:nth-child(3) { animation-delay: 0.2s; }
.contact-method:nth-child(4) { animation-delay: 0.3s; }
.contact-method:nth-child(5) { animation-delay: 0.4s; }

/* ================================================
   GRADIENT ANIMATION FOR ELEMENTS
   ================================================ */

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

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientFlow 4s ease infinite;
}

/* ================================================
   SMOOTH SCROLL BEHAVIOR
   ================================================ */

html {
    scroll-behavior: smooth;
}

/* ================================================
   TRANSITION UTILITIES
   ================================================ */

.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   CURSOR CHANGE ANIMATION
   ================================================ */

@keyframes cursorBlink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

.typing-cursor {
    animation: cursorBlink 1s infinite;
}

/* ================================================
   FADE IN ON VIEWPORT
   ================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-on-scroll {
    animation: fadeInUp 0.8s ease;
}