/* Rak Ajar · animasi toko. Aktif hanya bila <html> berkelas ra-gerak (dipasang assets/rakanim.js,
   tidak dipasang bila perangkat meminta "kurangi gerakan"). Tanpa JS, halaman tampil normal tanpa animasi. */

/* muncul saat digulir */
.ra-gerak .ung{opacity:0;transform:translateY(22px) scale(.985)}
.ra-gerak .ung.tampak{opacity:1;transform:none;transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.ra-gerak .rk1.ung{opacity:0;transform:translateY(-46px) rotate(-9deg)}
.ra-gerak .rk1.ung.tampak{opacity:1;transform:none;transition:opacity .25s ease,transform .75s cubic-bezier(.3,1.6,.45,1)}

/* beranda: teks pembuka bertahap, tumpukan buku melayang */
@keyframes ra-naik{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ra-layang{0%,100%{translate:0 0}50%{translate:0 -10px}}
.ra-gerak .hero:not(.diam) .wrap>div:first-child>*{animation:ra-naik .7s cubic-bezier(.2,.8,.2,1) both}
.ra-gerak .hero:not(.diam) .wrap>div:first-child>:nth-child(2){animation-delay:.08s}
.ra-gerak .hero:not(.diam) .wrap>div:first-child>:nth-child(3){animation-delay:.16s}
.ra-gerak .hero:not(.diam) .wrap>div:first-child>:nth-child(4){animation-delay:.24s}
.ra-gerak .hero:not(.diam) .wrap>div:first-child>:nth-child(5){animation-delay:.32s}
.ra-gerak .hero:not(.diam) .wrap>div:first-child>:nth-child(6){animation-delay:.4s}
.ra-gerak .hero:not(.diam) .stack{animation:ra-naik .9s .15s cubic-bezier(.2,.8,.2,1) both}
.ra-gerak .stack{transform:perspective(900px) rotateX(var(--sx,0deg)) rotateY(var(--sy,0deg));transition:transform .5s ease-out;transform-style:preserve-3d}
.ra-gerak .stack .bk{animation:ra-layang 5s ease-in-out infinite}
.ra-gerak .stack .b2{animation-delay:-1.6s;animation-duration:5.6s}
.ra-gerak .stack .b3{animation-delay:-3.1s;animation-duration:4.6s}
.ra-gerak .stack .qrb{animation:ra-layang 6s -2s ease-in-out infinite}

/* deretan angka di beranda */
.angka{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.angka>div{background:#fff;border:1.5px solid var(--line,#EFE3D3);border-radius:16px;padding:8px 14px;display:flex;flex-direction:column;line-height:1.1;min-width:96px}
.angka b{font:800 1.7rem 'Baloo 2',sans-serif;color:var(--ink,#2B2238)}
.angka span{font-size:.76rem;font-weight:800;color:var(--mut,#6B5B4E)}

/* sampul miring 3D dan kilau */
.cv>svg,.cv>img,.jc .ar svg,.rk1 .cvr{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ra-gerak .miring>svg,.ra-gerak .miring>img,.ra-gerak .jc .ar.miring svg{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04);transition:transform .08s linear}
.ra-gerak .rk1 .cvr.miring{transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.05);transition:transform .08s linear}
.rk1 .cvr{position:relative}
.ra-gerak .cv::after,.ra-gerak .jc .ar::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.35),transparent 55%)}
.ra-gerak .miring::after{opacity:1}

/* lencana Gratis berdenyut halus */
@keyframes ra-denyut{0%{box-shadow:0 0 0 0 rgba(21,128,61,.45)}70%,100%{box-shadow:0 0 0 9px rgba(21,128,61,0)}}
.ra-gerak .tg.free{animation:ra-denyut 2.6s ease-out infinite}

/* tombol + dan angka keranjang memantul */
@keyframes ra-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.ra-gerak .plus.on,.ra-gerak .rb[aria-pressed=true] .ck{animation:ra-pop .4s cubic-bezier(.3,1.5,.5,1)}
.ra-gerak .lompat{animation:ra-pop .45s cubic-bezier(.3,1.5,.5,1)}
.ra-gerak nav.mn a.lompat{animation:ra-pop .45s cubic-bezier(.3,1.5,.5,1);background:var(--peach,#FFE9D6)}
.ra-gerak .rb{transition:transform .2s,box-shadow .2s}
.ra-gerak .rb:active{transform:scale(.97)}
.ra-gerak .rb[aria-pressed=true]{box-shadow:0 14px 26px -18px rgba(43,34,56,.8)}

/* harga coret dicoret */
@keyframes ra-coret{from{background-size:0 1.6px}to{background-size:100% 1.6px}}
.ra-gerak .pr s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/100% 1.6px}
.ra-gerak .ung .pr s{background-size:0 1.6px}
.ra-gerak .ung.tampak .pr s{animation:ra-coret .5s .45s ease both}

/* Rakit Paket */
.mtk .capai{color:var(--acc2,#8A3F00)}
.ra-level{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap;background:var(--ink,#2B2238);color:#FFD9A8;font:800 .85rem Nunito,sans-serif;padding:6px 12px;border-radius:99px;pointer-events:none;animation:ra-lv 1.9s ease both}
.ra-level.apung{position:fixed;bottom:80px;z-index:96;font-size:1rem;padding:9px 18px;box-shadow:0 14px 30px -12px rgba(43,34,56,.6)}
@keyframes ra-lv{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}

/* konfeti */
.ra-konfeti{position:fixed;z-index:95;pointer-events:none;border-radius:2px;will-change:transform}

/* intip halaman */
@keyframes ra-pudar{from{opacity:0}to{opacity:1}}
.ra-gerak .lb:not([hidden]){animation:ra-pudar .2s ease}

/* kemajuan baca di Rak bukuku */
.kmj{display:block;height:6px;border-radius:9px;background:#EFE3D3;overflow:hidden;margin-top:4px}
.kmj i{display:block;height:100%;border-radius:9px;background:var(--ok,#15803D)}
@keyframes ra-isi{from{width:0}}
.ra-gerak .rk1.tampak .kmj i{animation:ra-isi 1s .5s cubic-bezier(.2,.8,.2,1) both}

/* perpindahan halaman */
::view-transition-old(root){animation:.16s ease-in both ra-keluar}
::view-transition-new(root){animation:.32s cubic-bezier(.2,.8,.2,1) both ra-masuk}
@keyframes ra-keluar{to{opacity:0}}
@keyframes ra-masuk{from{opacity:0;transform:translateY(10px)}}
header.top{view-transition-name:kepala}

@media (prefers-reduced-motion:reduce){.ra-level{animation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{.ung{opacity:1!important;transform:none!important}.ra-fx{display:none!important}}