/* ==========================================================================
   NGGOWO JONEGORO — animasi & media sosial
   Semua animasi memakai class .js (ditambahkan skrip di <head>) sehingga
   jika JavaScript mati, konten tetap tampil normal. Animasi pembuka (intro)
   tidak diubah; animasi halaman baru mulai setelah intro selesai.
   ========================================================================== */

/* ---------- Bar atas + media sosial (berlaku di semua halaman) ---------- */
.home-topbar{--hd:#1f4136;--hp:Poppins,Inter,ui-sans-serif,system-ui,sans-serif;--topbar-h:clamp(34px,5vh,42px);
  background:var(--hd);color:#f6f1e1;height:var(--topbar-h);padding:0 3.8vw;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--hp);font-size:12.5px;font-weight:400}
.home-topbar-info,.home-topbar-social{display:flex;align-items:center}
.home-topbar-info{gap:28px;min-width:0}
.home-topbar-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.home-topbar-sep{width:1px;height:16px;background:#f6f1e180}
.home-topbar-social{gap:22px}
.home-topbar-social a{display:inline-flex;align-items:center;gap:8px;color:#f6f1e1;transition:color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.home-topbar-social a:hover{color:#fff;transform:translateY(-2px)}
.home-topbar-social .soc svg{flex:none;transition:transform .4s cubic-bezier(.3,1.6,.5,1),color .25s}
.home-topbar-social .soc:hover svg{transform:scale(1.18) rotate(-6deg)}
.home-topbar-social .soc-ig:hover svg{color:#f4b6d2}
.home-topbar-social .soc-tt:hover svg{color:#7ee8f0}
.home-topbar-social .soc span{white-space:nowrap;position:relative}
.home-topbar-social .soc span:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.home-topbar-social .soc:hover span:after{transform:scaleX(1)}
@media(max-width:1100px){.home-topbar-tagline,.home-topbar-sep{display:none}}
@media(max-width:800px){.home-topbar{padding:0 18px;font-size:12px}.home-topbar-social{gap:16px}}
@media(max-width:640px){.home-topbar-social .soc span{display:none}.home-topbar-info{display:none}.home-topbar{justify-content:flex-end}}

/* ---------- Media sosial di footer ---------- */
@media(min-width:801px){.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr 1.2fr}}
.footer .footer-grid>div>a.soc-row{display:flex;align-items:center;gap:12px;margin:12px 0;color:#d9e3db;font-size:13px;transition:color .25s,transform .3s}
.footer .soc-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff33;color:#f2d49c;flex:none;transition:background .3s,color .3s,transform .4s cubic-bezier(.3,1.6,.5,1),border-color .3s}
.footer .soc-row:hover{color:#fff;transform:translateX(4px)}
.footer .soc-row:hover .soc-ico{background:#d4a65a;border-color:#d4a65a;color:#1b342b;transform:rotate(-8deg) scale(1.08)}

/* ---------- Animasi masuk saat gulir (scroll reveal) ---------- */
@keyframes rv-up{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rv-left{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes rv-right{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes rv-fallback{to{opacity:1;transform:none}}

.js :is(.page-heading,.section-head,.feature-band>*,.product-card,.tourism-card,.searchbar,.table-wrap,.summary,.empty,.alert,.login-story,.login-panel,.detail-image,.detail-copy,.footer-grid>div,.copyright):not(.in){
  opacity:0;transform:translateY(30px);animation:rv-fallback .01s 9s forwards}
.js :is(.login-story,.detail-image):not(.in){transform:translateX(-44px)}
.js :is(.login-panel,.detail-copy):not(.in){transform:translateX(44px)}
.js :is(.page-heading,.section-head,.feature-band>*,.product-card,.tourism-card,.searchbar,.table-wrap,.summary,.empty,.alert,.login-story,.login-panel,.detail-image,.detail-copy,.footer-grid>div,.copyright).in{
  animation:rv-up .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s) backwards}
.js :is(.login-story,.detail-image).in{animation-name:rv-left}
.js :is(.login-panel,.detail-copy).in{animation-name:rv-right}

/* ---------- Animasi saat halaman dibuka ---------- */
@keyframes pg-in{from{opacity:0}to{opacity:1}}
@keyframes drop-in{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes fade-slide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hero-zoom{from{transform:scale(1.07);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes shine{0%,62%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes nav-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

body{animation:pg-in .6s ease backwards}
body.nj-leaving{opacity:0;transition:opacity .18s ease}
html:not(.nj-intro-on) .home-topbar{animation:drop-in .6s cubic-bezier(.2,.7,.2,1) backwards}
html:not(.nj-intro-on) .site-header{animation:fade-slide .7s cubic-bezier(.2,.7,.2,1) .1s backwards}
html:not(.nj-intro-on) .nav>a{animation:fade-slide .6s cubic-bezier(.2,.7,.2,1) backwards}
html:not(.nj-intro-on) .nav>a:nth-child(1){animation-delay:.25s}
html:not(.nj-intro-on) .nav>a:nth-child(2){animation-delay:.33s}
html:not(.nj-intro-on) .nav>a:nth-child(3){animation-delay:.41s}
html:not(.nj-intro-on) .nav>a:nth-child(4){animation-delay:.49s}
html:not(.nj-intro-on) .nav>a:nth-child(5){animation-delay:.57s}
html:not(.nj-intro-on) .nav>a:nth-child(6){animation-delay:.65s}
html:not(.nj-intro-on) .home-banner img{animation:fade-slide .9s cubic-bezier(.2,.7,.2,1) .25s backwards}
html:not(.nj-intro-on) .home-hero-image>img{animation:hero-zoom 1.6s cubic-bezier(.2,.7,.2,1) .35s backwards}
.cart-link span{animation:pop .6s cubic-bezier(.3,1.6,.5,1) .9s backwards}
.brand-mark{transition:transform .6s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.brand:hover .brand-mark{transform:rotate(360deg);background:var(--gold);color:#fff}

/* ---------- Menu ---------- */
body:not(.is-home) .nav a:not(.cart-link){position:relative}
body:not(.is-home) .nav a:not(.cart-link):after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
body:not(.is-home) .nav a:not(.cart-link):hover:after,body:not(.is-home) .nav a.active:after{transform:scaleX(1)}
.nav a{transition:color .25s,border-color .3s}
.is-home .nav a:not(.active):hover{border-bottom-color:#1b4d3b66}
.cart-link{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cart-link:hover{transform:translateY(-2px)}
.nav.open{animation:nav-drop .3s ease}
.site-header{transition:box-shadow .35s ease,background .35s ease}
.site-header.is-stuck{box-shadow:0 8px 28px #1f41362b}

/* ---------- Kartu, gambar, tombol ---------- */
.product-card,.tourism-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s}
.tourism-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px #263b2a1a;border-color:#d8cfae}
.product-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px #263b2a1a;border-color:#d8cfae}
.product-image img,.tourism-visual.has-image img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-image img,.tourism-card:hover .tourism-visual.has-image img{transform:scale(1.09)}
.tourism-visual.has-image{overflow:hidden}
.tourism-visual.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.pill{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.product-card:hover .pill{transform:translateY(-2px) scale(1.06)}
.btn,.small-btn{position:relative;overflow:hidden;transition:background .25s,color .25s,border-color .25s,transform .2s,box-shadow .3s}
.btn:hover,.small-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #1f413638}
.btn:active,.small-btn:active{transform:translateY(0) scale(.97)}
.btn:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,#ffffff40,transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn:hover:after{animation:shine .9s ease}
.nj-ripple{position:absolute;border-radius:50%;background:#ffffff55;transform:scale(0);animation:nj-rip .6s ease-out forwards;pointer-events:none}
@keyframes nj-rip{to{transform:scale(1);opacity:0}}
.field input,.field textarea,.field select,.searchbar input{transition:border-color .25s,box-shadow .25s,transform .25s}
.field input:focus,.field textarea:focus,.field select:focus,.searchbar input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px #315c4922}
.text-link{position:relative}
.text-link:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.text-link:hover:after{transform:scaleX(1)}

/* ---------- Gambar beranda: tombol transparan di atas gambar ---------- */
.home-hero-image .hero-hotspot{overflow:hidden;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.home-hero-image .hero-hotspot:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 2px #ffffffb0,0 12px 28px #13544055}
.home-hero-image .hero-hotspot:active{transform:scale(.97)}
.home-hero-image .hero-hotspot:after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,#ffffff59,transparent);transform:translateX(-130%) skewX(-18deg);animation:shine 5.5s ease-in-out 2.2s infinite}
.home-hero-image .hero-hotspot-oleh:after{animation-delay:3.2s}

/* ---------- Bilah progres gulir & tombol ke atas ---------- */
.nj-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#d4a65a,#f2d49c,#315c49);z-index:9998;pointer-events:none}
.nj-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:0;background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px #1f413655;z-index:9997;opacity:0;transform:translateY(24px) scale(.8);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1),background .25s}
.nj-top.show{opacity:1;transform:none;pointer-events:auto}
.nj-top.show svg{animation:float-y 2.4s ease-in-out infinite}
.nj-top:hover{background:var(--deep)}

/* ---------- Hormati pengaturan "kurangi gerakan" ---------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js :is(.page-heading,.section-head,.feature-band>*,.product-card,.tourism-card,.searchbar,.table-wrap,.summary,.empty,.alert,.login-story,.login-panel,.detail-image,.detail-copy,.footer-grid>div,.copyright):not(.in){opacity:1;transform:none}
}