/* Animasi halus halaman publik (main.php). Aktif hanya bila html.rj-motion
   (JS tersedia & pengunjung tidak memilih "kurangi gerakan"). */
@keyframes rjUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes rjFade{from{opacity:0}to{opacity:1}}

/* Hero (section pertama): murni CSS, langsung jalan saat halaman tampil */
html.rj-motion main>section:first-of-type .container>*,
html.rj-motion main>section:first-of-type .container>*>*{animation:rjUp .8s cubic-bezier(.2,.7,.2,1) backwards}
html.rj-motion main>section:first-of-type .container>*>*:nth-child(2){animation-delay:.08s}
html.rj-motion main>section:first-of-type .container>*>*:nth-child(3){animation-delay:.16s}
html.rj-motion main>section:first-of-type .container>*>*:nth-child(4){animation-delay:.24s}
html.rj-motion main>section:first-of-type .container>*>*:nth-child(n+5){animation-delay:.32s}
html.rj-motion main>section:first-of-type .container>*:nth-child(2){animation-delay:.18s}

/* Section berikutnya: muncul saat di-scroll */
html.rj-motion [data-rv]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0ms);will-change:opacity,transform}
html.rj-motion [data-rv].rv-in{opacity:1;transform:none;will-change:auto}
html.rj-motion [data-rv="zoom"]{transform:scale(.96) translate3d(0,16px,0)}
html.rj-motion [data-rv="zoom"].rv-in{transform:none}

/* Kartu foto Program Affiliate (beranda) */
.rj-aff{position:relative;display:block;overflow:hidden;border-radius:1.5rem;max-width:28rem;margin:0 auto;aspect-ratio:4/5;background:#0b2a3c;box-shadow:0 25px 50px -20px rgba(8,30,48,.45);isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
@media (min-width:1024px){.rj-aff{max-width:none}}
.rj-aff img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rj-aff::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,24,38,0) 35%,rgba(7,24,38,.55) 60%,rgba(7,24,38,.94) 100%);z-index:1}
.rj-aff:hover{transform:translateY(-4px);box-shadow:0 35px 60px -22px rgba(8,30,48,.55)}
.rj-aff:hover img{transform:scale(1.045)}
.rj-aff__chip{position:absolute;z-index:2;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:#0b3b52;font-weight:700;font-size:.8rem;box-shadow:0 6px 18px -6px rgba(0,0,0,.25)}
.rj-aff__chip svg{width:.95rem;height:.95rem;color:#0d8a8a}
.rj-aff__body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:1.4rem 1.4rem 1.5rem;color:#fff;display:block}
.rj-aff__eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9fe7df}
.rj-aff__title{display:block;margin-top:.45rem;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em}
.rj-aff__title em{font-style:normal;color:#7ee3d6}
.rj-aff__meta{display:block;margin-top:.5rem;font-size:.85rem;color:rgba(226,240,248,.85)}
.rj-aff__btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.1rem;border-radius:.85rem;background:#d9f7f3;color:#0b3b52;font-weight:700;font-size:.9rem;transition:background .3s,gap .3s}
.rj-aff__btn svg{width:1rem;height:1rem}
.rj-aff:hover .rj-aff__btn{background:#fff;gap:.7rem}
@media (min-width:640px){.rj-aff__title{font-size:1.65rem}.rj-aff__body{padding:1.75rem}}

@media (prefers-reduced-motion:reduce){
  html.rj-motion main>section:first-of-type .container>*,html.rj-motion main>section:first-of-type .container>*>*{animation:none}
  html.rj-motion [data-rv]{opacity:1;transform:none;transition:none}
  .rj-aff,.rj-aff img{transition:none}
}