/* ============================================
   JXIE Portfolio — Custom Stylesheet
   style.css
   ============================================ */

/* ---- Material Symbols ---- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ---- Custom Animations ---- */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.animate-float-1 { animation: float 6s ease-in-out infinite; }
.animate-float-2 { animation: float 7s ease-in-out infinite 1s; }
.animate-float-3 { animation: float 5s ease-in-out infinite 2s; }

/* ---- Scroll Reveal (Nyebar) ---- */
.reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1) !important;
}

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

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* ---- Hero Load Animation (one-time, doesn't repeat on scroll) ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.5, 0, 0, 1) both;
}

.fade-in-delay-1 { animation: fadeInUp 0.8s cubic-bezier(0.5, 0, 0, 1) 0.15s both; }
.fade-in-delay-2 { animation: fadeInUp 0.8s cubic-bezier(0.5, 0, 0, 1) 0.3s both; }
.fade-in-delay-3 { animation: fadeInUp 0.8s cubic-bezier(0.5, 0, 0, 1) 0.45s both; }

/* ---- Glass Card Entrance (staggered, one-time) ---- */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.93);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.card-entrance-1 { animation: cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.0s both; }
.card-entrance-2 { animation: cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s both; }
.card-entrance-3 { animation: cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s both; }