/* classic-anim.css v2 (21/10/2026) — "Classic Motion": reveal lembut bergaya editorial, hover halus, hero hidup, transisi antarhalaman.
   Aturan: hanya opacity/transform/filter (tanpa geser tata letak). State tersembunyi HANYA bila html.js-anim (skrip inline di <head>, fallback 4 dtk). */
:root{--cl-ease:cubic-bezier(.16,1,.3,1);--cl-ease-out:cubic-bezier(.22,1,.36,1);--cl-gold:#D4AF37;--cl-gold-2:#E8D5B0}
html.js-anim{scroll-behavior:smooth}

/* ============ 1. Reveal gulir (fade-up pegas + blur halus pada judul, kartu menetap dari zoom) ============ */
.js-anim [data-anim]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--cl-ease),transform .9s var(--cl-ease),filter .9s var(--cl-ease);will-change:opacity,transform}
.js-anim [data-anim="scale"]{transform:translate3d(0,24px,0) scale(.95)}
.js-anim [data-anim="soft"]{transform:translate3d(0,16px,0);transition-duration:.7s}
.js-anim a[data-anim]{transform:translate3d(0,32px,0) scale(.97)}
.js-anim h2[data-anim],.js-anim h3[data-anim]{filter:blur(7px)}
.js-anim [data-anim].anim-in{opacity:1;transform:none;filter:none}
.js-anim [data-anim].anim-now{transition-duration:.35s}
.js-anim [data-anim].anim-done{transition:transform .3s var(--cl-ease-out),box-shadow .3s var(--cl-ease-out);will-change:auto}
.js-anim [data-anim]:not(.anim-done) img{transition:transform 1.3s var(--cl-ease)}
.js-anim a[data-anim]:not(.anim-in) img,.js-anim [data-anim]:not(.anim-in) .bg-card img{transform:scale(1.08)}

/* ============ 2. Garis emas di bawah judul: tumbuh lalu berkilau sekali ============ */
[data-anim-line]{position:relative}
[data-anim-line]::after{content:"";position:absolute;left:var(--ulx,0);bottom:-.35em;width:64px;height:2px;background:linear-gradient(90deg,var(--cl-gold),#F6E7B8,var(--cl-gold));background-size:200% 100%;transform-origin:0 50%;pointer-events:none}
.js-anim [data-anim-line]::after{transform:scaleX(0);transition:transform .9s var(--cl-ease) .15s}
.js-anim [data-anim-line].line-in::after{transform:scaleX(1);animation:clLineShine 1.8s ease .9s 1}
@keyframes clLineShine{0%{background-position:0 0}100%{background-position:-200% 0}}

/* ============ 3. Hover: kartu terangkat + sorot emas + foto zoom; tombol berkilau + pegas tekan ============ */
@media (hover:hover){
main .grid>.bg-card,main .grid>a>.bg-card,main .grid>[data-anim]>.bg-card{transition:transform .45s var(--cl-ease-out),box-shadow .45s var(--cl-ease-out),border-color .45s var(--cl-ease-out)}
main .grid>.bg-card:hover,main .grid>a:hover>.bg-card,main .grid>[data-anim]:hover>.bg-card{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(212,175,55,.45),0 0 0 1px rgba(212,175,55,.35)}
main .grid .bg-card img{transition:transform .7s var(--cl-ease-out)}
main .grid>.bg-card:hover img,main .grid>a:hover>.bg-card img,main .grid>[data-anim]:hover>.bg-card img{transform:scale(1.06)}
main a.rounded-full,main a>button.rounded-full,[data-cl-hero] a>button{position:relative;overflow:hidden;transition:transform .35s var(--cl-ease-out),box-shadow .35s var(--cl-ease-out),background-color .3s ease,color .3s ease}
main a.rounded-full::before,main a>button.rounded-full::before,[data-cl-hero] a>button::before{content:"";position:absolute;top:0;bottom:0;left:-80%;width:45%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);pointer-events:none;transition:left .1s linear}
main a.rounded-full:hover::before,main a:hover>button.rounded-full::before,[data-cl-hero] a:hover>button::before{left:130%;transition:left .65s var(--cl-ease-out)}
main a.rounded-full:hover,main a:hover>button.rounded-full{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(212,175,55,.55)}
main a.rounded-full:active,main a:active>button.rounded-full,[data-cl-hero] a:active>button{transform:translateY(-1px) scale(.98);transition-duration:.12s}
}

/* ============ 4. Hero: judul/sub/tombol masuk berurutan, judul kembali beranimasi tiap ganti slide, CTA utama berdenyut lembut ============ */
/* wrapper hero: build Tailwind memaksa opacity:1/transform:none !important (menghalangi animasi), jadi animasikan filter+translate; wrapper judul dikecualikan (judul punya animasinya sendiri) */
.js-anim [data-cl-hero] .animate-slide-up-fade:not(:has([data-cl-hero-title])){animation:clHeroWrap 1.1s var(--cl-ease) both!important}
.js-anim [data-cl-hero] .animate-slide-up-fade:nth-child(1){animation-delay:.05s!important}
.js-anim [data-cl-hero] .animate-slide-up-fade:nth-child(2){animation-delay:.18s!important}
.js-anim [data-cl-hero] .animate-slide-up-fade:nth-child(3){animation-delay:.32s!important}
.js-anim [data-cl-hero] .animate-slide-up-fade:nth-child(4){animation-delay:.46s!important}
.js-anim [data-cl-hero] .animate-slide-up-fade:nth-child(n+5){animation-delay:.6s!important}
.js-anim [data-cl-hero-title]{animation:clHeroIn .9s var(--cl-ease) both}
@keyframes clHeroIn{0%{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes clHeroWrap{0%{filter:opacity(0) blur(6px);translate:0 22px}100%{filter:none;translate:0 0}}
.js-anim [data-cl-hero] a>button.bg-primary,.js-anim [data-cl-hero] a.bg-primary{animation:clGlow 3.4s ease-in-out infinite}
@keyframes clGlow{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.45)}50%{box-shadow:0 0 30px 4px rgba(212,175,55,.32)}}
.js-anim [data-cl-hero] [data-cl-slide]{will-change:transform}

/* ============ 5. Gambar lazy muncul melembut saat selesai dimuat ============ */
.js-anim img[loading="lazy"]:not(.is-loaded){opacity:0}
.js-anim img[loading="lazy"]{transition:opacity .7s ease,transform .7s var(--cl-ease-out)}

/* ============ 6. Tombol WhatsApp melayang: cincin + angkat saat hover ============ */
a[data-wa-label="floating_whatsapp"]{transition:transform .35s var(--cl-ease-out),box-shadow .35s var(--cl-ease-out),background-color .3s ease}
a[data-wa-label="floating_whatsapp"]::after{content:"";position:absolute;inset:0;border-radius:9999px;border:2px solid #25D366;opacity:0;pointer-events:none;animation:clRing 3s ease-out infinite}
a[data-wa-label="floating_whatsapp"]:hover::after{animation:none}
@keyframes clRing{0%{transform:scale(1);opacity:.7}60%,100%{transform:scale(1.35);opacity:0}}

/* ============ 7. Transisi antarhalaman (View Transitions, Chrome 126+/Safari 18.2+; browser lain mengabaikan) ============ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:clVtOut .16s ease-in both}
::view-transition-new(root){animation:clVtIn .4s var(--cl-ease) both}
@keyframes clVtOut{to{opacity:0}}
@keyframes clVtIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* ============ 8. Ponsel: amplitudo lebih kecil, tanpa blur (hemat GPU) ============ */
@media (max-width:640px){
.js-anim [data-anim]{transform:translate3d(0,18px,0);transition-duration:.7s}
.js-anim a[data-anim]{transform:translate3d(0,20px,0) scale(.985)}
.js-anim h2[data-anim],.js-anim h3[data-anim]{filter:none}
.js-anim a[data-anim]:not(.anim-in) img,.js-anim [data-anim]:not(.anim-in) .bg-card img{transform:scale(1.04)}
}

/* ============ 9. Hormati prefers-reduced-motion: semua diam ============ */
@media (prefers-reduced-motion:reduce){
html.js-anim{scroll-behavior:auto}
[data-anim]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
[data-anim] img,.bg-card img{transform:none!important;transition:none!important}
[data-anim-line]::after{transform:none!important;transition:none!important;animation:none!important}
a[data-wa-label="floating_whatsapp"]::after{animation:none!important;display:none}
main .grid>.bg-card:hover,main .grid>a:hover>.bg-card,main .grid>[data-anim]:hover>.bg-card,main a.rounded-full:hover,main a:hover>button.rounded-full{transform:none!important}
.js-anim [data-cl-hero] .animate-slide-up-fade:not(:has([data-cl-hero-title])),.js-anim [data-cl-hero-title],.js-anim [data-cl-hero] a>button.bg-primary,.js-anim [data-cl-hero] a.bg-primary{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
.js-anim img[loading="lazy"]:not(.is-loaded){opacity:1}
@view-transition{navigation:none}
}