/* Animasi landing — Graha Ilmu */
.gi-anchor-section {
    scroll-margin-top: 5.5rem;
}
@keyframes gi-fade-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

.gi-animate {
    opacity: 0;
}

.gi-animate.is-visible {
    animation: gi-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gi-animate-delay-1 { animation-delay: 0.1s; }
.gi-animate-delay-2 { animation-delay: 0.2s; }
.gi-animate-delay-3 { animation-delay: 0.3s; }
.gi-animate-delay-4 { animation-delay: 0.4s; }
.gi-animate-delay-5 { animation-delay: 0.5s; }

.gi-hero-enter {
    animation: gi-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gi-hero-enter-d1 { animation-delay: 0.12s; opacity: 0; }
.gi-hero-enter-d2 { animation-delay: 0.24s; opacity: 0; }
.gi-hero-enter-d3 { animation-delay: 0.36s; opacity: 0; }
.gi-hero-enter-d4 { animation-delay: 0.48s; opacity: 0; }

.gi-hero-img {
    animation: gi-fade-in 1s ease 0.35s forwards, gi-float 6s ease-in-out 1.5s infinite;
    opacity: 0;
}

/* Dashboard penulis — tampil langsung + animasi ringan */
@keyframes gi-dash-reveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gi-dash-reveal {
    animation: gi-dash-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Dashboard penulis — kartu interaktif */
.gi-dash-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.25s ease;
}

.gi-dash-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgb(47 49 139 / 0.18);
}

.gi-dash-stat {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gi-dash-stat:hover {
    transform: translateY(-4px) scale(1.02);
}

.gi-welcome-icon {
    animation: gi-float 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .gi-animate,
    .gi-hero-enter,
    .gi-hero-enter-d1,
    .gi-hero-enter-d2,
    .gi-hero-enter-d3,
    .gi-hero-enter-d4,
    .gi-hero-img,
    .gi-welcome-icon {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .gi-dash-card:hover,
    .gi-dash-stat:hover {
        transform: none;
    }
}