/**
 * Animasi ringan frontend JDIH — scroll reveal, entrance, micro-interaction.
 */

html {
    scroll-behavior: smooth;
}

.site-frame {
    --fe-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fe-duration: 0.55s;
}

/* ── Entrance halaman ── */
.site-header {
    animation: feHeaderIn 0.5s var(--fe-ease) both;
}

.site-frame main {
    animation: feFadeIn 0.45s var(--fe-ease) 0.06s both;
}

.hero-copy {
    animation: feFadeUp 0.65s var(--fe-ease) 0.12s both;
}

.search-panel {
    animation: feFadeUp 0.6s var(--fe-ease) 0.18s both;
}

.site-frame .prokum-hero-inner,
.site-frame .kontak-hero-inner,
.site-frame .stat-hero-inner,
.site-frame .profil-hero-inner,
.site-frame .hero-inner {
    animation: feFadeUp 0.58s var(--fe-ease) 0.1s both;
}

/* ── Scroll reveal ── */
.fe-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--fe-duration) var(--fe-ease),
        transform var(--fe-duration) var(--fe-ease);
    will-change: opacity, transform;
}

.fe-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fe-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.48s var(--fe-ease),
        transform 0.48s var(--fe-ease);
}

.fe-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.fe-stagger.is-visible > *:nth-child(1) { transition-delay: 0.03s; }
.fe-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.fe-stagger.is-visible > *:nth-child(3) { transition-delay: 0.09s; }
.fe-stagger.is-visible > *:nth-child(4) { transition-delay: 0.12s; }
.fe-stagger.is-visible > *:nth-child(5) { transition-delay: 0.15s; }
.fe-stagger.is-visible > *:nth-child(6) { transition-delay: 0.18s; }
.fe-stagger.is-visible > *:nth-child(7) { transition-delay: 0.21s; }
.fe-stagger.is-visible > *:nth-child(8) { transition-delay: 0.24s; }
.fe-stagger.is-visible > *:nth-child(n+9) { transition-delay: 0.27s; }

/* ── Micro-interaction ── */
.site-frame .hero-btn,
.site-frame .product-card,
.site-frame .external-card,
.site-frame .quick-card,
.site-frame .stat-export-pdf,
.site-frame .doc-card,
.site-frame .news-item,
.site-frame .popular-item,
.site-frame .result-item,
.site-frame .prokum-section-card,
.site-frame .stat-kpi-card,
.site-frame .kontak-info-card {
    transition:
        transform 0.22s var(--fe-ease),
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.site-frame .hero-btn:hover,
.site-frame .product-card:hover,
.site-frame .external-card:hover,
.site-frame .quick-card:hover,
.site-frame .doc-card:hover,
.site-frame .news-item:hover,
.site-frame .popular-item:hover,
.site-frame .result-item:hover,
.site-frame .prokum-section-card:hover,
.site-frame .stat-kpi-card:hover,
.site-frame .kontak-info-card:hover {
    transform: translateY(-2px);
}

.site-frame .hero-btn:active,
.site-frame .product-card:active,
.site-frame .external-card:active,
.site-frame .doc-card:active,
.site-frame .news-item:active,
.site-frame .popular-item:active {
    transform: translateY(0);
}

.site-frame .row-head a,
.site-frame .stat-link-all,
.site-frame .nav-menu a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

.site-frame .row-head a i,
.site-frame .stat-link-all i {
    display: inline-block;
    transition: transform 0.22s var(--fe-ease);
}

.site-frame .row-head a:hover i,
.site-frame .stat-link-all:hover i {
    transform: translateX(3px);
}

.site-frame .site-header {
    transition: box-shadow 0.25s ease;
}

.site-frame .site-header.is-scrolled {
    box-shadow: 0 4px 20px rgba(20, 24, 36, 0.06);
}

/* ── Keyframes ── */
@keyframes feHeaderIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* ── Aksesibilitas ── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-header,
    .site-frame main,
    .hero-copy,
    .search-panel,
    .site-frame .prokum-hero-inner,
    .site-frame .kontak-hero-inner,
    .site-frame .stat-hero-inner,
    .site-frame .profil-hero-inner,
    .site-frame .hero-inner {
        animation: none;
    }

    .fe-reveal,
    .fe-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-frame .hero-btn:hover,
    .site-frame .product-card:hover,
    .site-frame .external-card:hover,
    .site-frame .doc-card:hover,
    .site-frame .news-item:hover,
    .site-frame .popular-item:hover,
    .site-frame .result-item:hover {
        transform: none;
    }
}

html.fe-reduced-motion .fe-reveal,
html.fe-reduced-motion .fe-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
}

html.fe-reduced-motion .site-header,
html.fe-reduced-motion .site-frame main,
html.fe-reduced-motion .hero-copy,
html.fe-reduced-motion .search-panel,
html.fe-reduced-motion .site-frame .prokum-hero-inner,
html.fe-reduced-motion .site-frame .kontak-hero-inner,
html.fe-reduced-motion .site-frame .stat-hero-inner,
html.fe-reduced-motion .site-frame .profil-hero-inner,
html.fe-reduced-motion .site-frame .hero-inner {
    animation: none;
}

@media (max-width: 992px) {
    .fe-reveal,
    .fe-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}