/* PGM — animasi situs + lightbox foto */
:root { --fx-ease: cubic-bezier(.2,.8,.2,1); }

/* ---------- Masuk halaman ---------- */
body { animation: fxPage .55s var(--fx-ease) both; }
@keyframes fxPage { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Bilah kemajuan scroll ---------- */
.fx-progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 4000; transform: scaleX(0); transform-origin: left; pointer-events: none;
    background: linear-gradient(90deg, var(--primary-2, #2f7934), var(--accent, #e4b81c)); }

/* ---------- Muncul bertahap saat scroll ---------- */
.fx .fx-reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease); transition-delay: calc(var(--fx-i, 0) * 70ms); }
.fx .fx-reveal.fx-in { opacity: 1; transform: none; }

/* ---------- Foto: muncul halus & skeleton ---------- */
.fx-img { opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .9s var(--fx-ease); }
.fx-img.fx-img-ok { opacity: 1; transform: none; }

/* ---------- Kartu & foto: hover ---------- */
.card, .list-item, .doc-card, .feature-card, .side-widget, .aw-card, .aw-cta, .vm-card, .gallery-item { transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), border-color .3s; }
.card:hover, .doc-card:hover, .feature-card:hover, .aw-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.list-item:hover { transform: translateX(4px); }
.aw-cta:hover { transform: translateY(-3px); }
.card-image, .li-thumb, .side-thumb, .article-image, .gallery-item, .about-photo, .image-placeholder { overflow: hidden; }
.card-image img, .li-thumb img, .side-thumb img, .gallery-item img { transition: transform .8s var(--fx-ease); }
.card:hover .card-image img, .list-item:hover .li-thumb img, a:hover > .side-thumb img, .gallery-item:hover img { transform: scale(1.08); }

/* ---------- Tombol: riak & tekan ---------- */
.btn, .jbtn, .read-more { transition: transform .2s var(--fx-ease), box-shadow .3s, background .3s, color .3s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.fx-rip-host { position: relative; overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: fxRipple .65s ease-out forwards; pointer-events: none; }
.btn-outline .fx-ripple { background: rgba(47,121,52,.25); }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* ---------- Halaman Tentang ---------- */
.about-photo img { transform: translateY(var(--fx-py, 0)) scale(1.08); animation: fxKen 14s ease-in-out infinite alternate; }
@keyframes fxKen { from { transform: translateY(var(--fx-py, 0)) scale(1.08); } to { transform: translateY(var(--fx-py, 0)) scale(1.16); } }
.ip-badge { animation: fxFloat 4.5s ease-in-out infinite; }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.image-placeholder > i { animation: fxFloat 5s ease-in-out infinite; }
.vm-ic, .aw-list i { transition: transform .4s var(--fx-ease); }
.vm-card:hover .vm-ic { transform: rotate(-8deg) scale(1.12); }
.vm-card li { transition: transform .25s var(--fx-ease); }
.vm-card li:hover { transform: translateX(6px); }
.aw-cta { background-size: 220% 220%; animation: fxGrad 9s ease infinite; }
@keyframes fxGrad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.about-caption { transform: translateY(0); transition: padding .4s var(--fx-ease); }
.about-photo:hover .about-caption { padding-bottom: 24px; }

/* grafik: batang naik saat terlihat */
.aw-chart.fx-wait .aw-colbar i { animation: none; transform: scaleY(0); }
.aw-col:hover .aw-colbar i { filter: brightness(1.12); }
.aw-colbar i { transition: filter .25s; }

/* ---------- Tombol kembali ke atas ---------- */
.scroll-top.show { animation: fxPop .5s var(--fx-ease); }
@keyframes fxPop { from { transform: scale(.4); opacity: 0; } }

/* ---------- Foto yang bisa di-zoom ---------- */
img.fx-zoomable { cursor: zoom-in; transition: filter .25s, transform .5s var(--fx-ease); }
img.fx-zoomable:hover { filter: brightness(1.05); }
.fx-has-zoom { position: relative; }
.fx-zoom-btn { position: absolute; right: 10px; top: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: zoom-in;
    background: rgba(8,28,20,.62); color: #fff; font-size: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25);
    opacity: 0; transform: scale(.7); transition: opacity .25s, transform .3s var(--fx-ease), background .2s; }
.fx-has-zoom:hover .fx-zoom-btn, .fx-zoom-btn:focus-visible { opacity: 1; transform: none; }
.fx-zoom-btn:hover { background: var(--primary-2, #2f7934); transform: scale(1.1); }
@media (hover: none) { .fx-zoom-btn { opacity: .9; transform: none; width: 32px; height: 32px; } }

/* ---------- Lightbox ---------- */
body.fx-lb-lock { overflow: hidden; }
.fx-lb { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(3,16,12,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.fx-lb.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.fx-lb-stage { position: absolute; inset: 64px 0 56px; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; }
.fx-lb.zoomed .fx-lb-stage { cursor: grab; }
.fx-lb-stage.drag { cursor: grabbing; }
.fx-lb-stage img { max-width: 94vw; max-height: calc(100vh - 124px); max-height: calc(100dvh - 124px); width: auto; height: auto; object-fit: contain; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.55); transform-origin: center; transition: transform .22s var(--fx-ease); will-change: transform; -webkit-user-drag: none; }
.fx-lb.zoomed .fx-lb-stage img { border-radius: 4px; }
.fx-lb-stage.drag img { transition: none; }
.fx-lb.loading .fx-lb-stage::after { content: ''; position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: fxSpin .8s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx-lb-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; color: #fff; }
.fx-lb-count { font-weight: 700; font-size: 14px; letter-spacing: .03em; opacity: .9; }
.fx-lb-tools { display: flex; gap: 8px; margin-left: auto; }
.fx-lb button { border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.14); width: 42px; height: 42px; border-radius: 50%; font-size: 16px; display: grid; place-items: center; transition: background .2s, transform .2s var(--fx-ease); }
.fx-lb button:hover { background: rgba(255,255,255,.28); transform: scale(1.08); }
.fx-lb button:focus-visible { outline: 2px solid var(--accent, #e4b81c); outline-offset: 2px; }
.fx-lb-nav { position: absolute; top: 50%; z-index: 3; margin-top: -21px; }
.fx-lb-nav.prev { left: 14px; } .fx-lb-nav.next { right: 14px; }
.fx-lb.single .fx-lb-nav { display: none; }
.fx-lb-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 14px 70px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff; font-weight: 600; font-size: 14.5px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.fx-lb-cap[hidden] { display: none; }
@media (max-width: 640px) { .fx-lb-nav { display: none; } .fx-lb-stage { inset: 58px 0 48px; } .fx-lb-stage img { max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); } .fx-lb-cap { padding-inline: 16px; } .fx-lb button { width: 38px; height: 38px; } }

/* ---------- Hormati preferensi "kurangi gerak" ---------- */
@media (prefers-reduced-motion: reduce) {
    body, .fx-lb, .fx-lb-stage img, .about-photo img, .ip-badge, .aw-cta, .image-placeholder > i { animation: none !important; transition: none !important; }
    .fx .fx-reveal, .fx-img { opacity: 1; transform: none; }
}