/* =====================================================================
   ARP Law Firm — Motion Layer
   Hanya animasi. Tidak mengubah tata letak: memakai properti terpisah
   (translate / scale / clip-path / opacity) dan seluruh state awal
   dibatalkan setelah animasi selesai.
   ===================================================================== */
:root{
  --arp-ease:cubic-bezier(.16,1,.3,1);
  --arp-io:cubic-bezier(.65,0,.35,1);
}
.arp-w{display:inline-block}

/* ---------- STATE AWAL (hanya aktif bila mesin animasi siap) ---------- */
.arpm [data-rv="rise"]:not(.is-in){opacity:0;translate:0 28px}
.arpm [data-rv="text"]:not(.is-in){opacity:0;translate:0 22px;filter:blur(4px)}
.arpm [data-rv="slide"]:not(.is-in){opacity:0;translate:-26px 0}
.arpm [data-rv="fade"]:not(.is-in){opacity:0}
.arpm [data-rv="aside"]:not(.is-in){opacity:0;clip-path:inset(0 0 100% 0)}
.arpm [data-rv="bar"]:not(.is-in){opacity:0;translate:0 100%}
.arpm [data-rv="nav"]:not(.is-in){opacity:0;translate:0 -100%}
.arpm [data-rv="eyebrow"]:not(.is-in){opacity:0;translate:-16px 0}
.arpm [data-rv="eyebrow"]::after{transform-origin:0 50%}
.arpm [data-rv="eyebrow"]:not(.is-in)::after{scale:0 1}
.arpm [data-rv="words"]:not(.is-in) .arp-w{opacity:0;translate:0 .55em}
.arpm [data-rv="icon"]:not(.is-in){opacity:0;scale:.82}
.arpm [data-rv="icon"]:not(.is-in) svg{stroke-dasharray:1 1.5;stroke-dashoffset:1.3}
.arpm [data-rv="photo"]:not(.is-in){clip-path:inset(0 0 100% 0)}
.arpm [data-rv="photo"] img{scale:1.24}
.arpm [data-rv="media"]:not(.is-in) img{clip-path:inset(0 100% 0 0)}
.arpm [data-rv="media"]::before{transform-origin:0 50%}
.arpm [data-rv="media"]:not(.is-in)::before{scale:0 1}
.arpm [data-rv="media"]:not(.is-in) .about-tag{opacity:0;translate:34px 0}
.arpm [data-rv="curtain"]:not(.is-in){clip-path:inset(100% 0 0 0)}
.arpm [data-rv="curtain"]::before{scale:1.2}

/* ---------- ANIMASI MASUK ---------- */
.arpm [data-rv="rise"].is-in{animation:arpRise 1.15s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="text"].is-in{animation:arpText 1.3s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="slide"].is-in{animation:arpSlide 1.1s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="fade"].is-in{animation:arpFade 1s ease var(--d,0ms) both}
.arpm [data-rv="aside"].is-in{animation:arpAside 1.6s var(--arp-io) var(--d,0ms) both}
.arpm [data-rv="bar"].is-in{animation:arpBar 1.3s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="nav"].is-in{animation:arpNav 1.3s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="eyebrow"].is-in{animation:arpEyebrow 1s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="eyebrow"].is-in::after{animation:arpLine 1.2s var(--arp-ease) calc(var(--d,0ms) + 260ms) both}
.arpm [data-rv="words"].is-in .arp-w{animation:arpWord 1.2s var(--arp-ease) calc(var(--d,0ms) + var(--i,0) * var(--ws,65ms)) both}
.arpm [data-rv="icon"].is-in{animation:arpPop .9s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="icon"].is-in svg{stroke-dasharray:1 1.5;animation:arpDraw 1.5s var(--arp-io) calc(var(--d,0ms) + 220ms) both}
.arpm [data-rv="photo"].is-in{animation:arpWipeDown 1.6s var(--arp-io) var(--d,0ms) both}
.arpm [data-rv="photo"].is-in img{animation:arpSettle 2.2s var(--arp-ease) var(--d,0ms) both}
.arpm [data-rv="media"].is-in img{animation:arpWipeRight 1.7s var(--arp-io) var(--d,0ms) both}
.arpm [data-rv="media"].is-in::before{animation:arpLine 1.3s var(--arp-ease) calc(var(--d,0ms) + 800ms) both}
.arpm [data-rv="media"].is-in .about-tag{animation:arpTag 1.3s var(--arp-ease) calc(var(--d,0ms) + 1000ms) both}
.arpm [data-rv="curtain"].is-in{animation:arpWipeUp 1.5s var(--arp-io) var(--d,0ms) both}
.arpm [data-rv="curtain"].is-in::before{animation:arpSettle 2.3s var(--arp-ease) var(--d,0ms) both}

@keyframes arpRise{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes arpText{from{opacity:0;translate:0 22px;filter:blur(4px)}to{opacity:1;translate:none;filter:blur(0)}}
@keyframes arpSlide{from{opacity:0;translate:-26px 0}to{opacity:1;translate:none}}
@keyframes arpFade{from{opacity:0}to{opacity:1}}
@keyframes arpAside{from{opacity:0;translate:0 14px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:none;clip-path:inset(0 0 0 0)}}
@keyframes arpBar{from{opacity:0;translate:0 100%}to{opacity:1;translate:none}}
@keyframes arpNav{from{opacity:0;translate:0 -100%}to{opacity:1;translate:none}}
@keyframes arpEyebrow{from{opacity:0;translate:-16px 0}to{opacity:1;translate:none}}
@keyframes arpLine{from{scale:0 1}to{scale:1 1}}
@keyframes arpWord{
  from{opacity:0;translate:0 .55em;filter:blur(7px)}
  55%{filter:blur(0)}
  to{opacity:1;translate:none;filter:blur(0)}
}
@keyframes arpPop{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes arpDraw{from{stroke-dashoffset:1.3}to{stroke-dashoffset:0}}
@keyframes arpWipeDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes arpWipeUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes arpWipeRight{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes arpSettle{from{scale:1.24}to{scale:1}}
@keyframes arpTag{from{opacity:0;translate:34px 0}to{opacity:1;translate:none}}

/* ---------- HERO: gambar latar bernapas + parallax scroll ---------- */
.arpm [data-ps]::before{transform:scale(calc(1 + var(--ps,0)))}
.arpm .hero[data-ps]::before{transform:scale(calc(1.018 + var(--ps,0)))}
.arpm-go [data-hero]::before{animation:arpKen 24s var(--arp-ease) both}
.arpm-soft [data-hero]::before{animation:none}
@keyframes arpKen{from{scale:1.13}to{scale:1}}
.arpm .services[data-ps]::after,
.arpm [data-hero]::after{translate:var(--wx,0) 0}

/* ---------- Kilau emas pada frasa beraksen di judul hero ---------- */
.arp-shine{
  background:linear-gradient(100deg,#d2b777 0%,#d2b777 40%,#fff4d2 50%,#d2b777 60%,#d2b777 100%);
  background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:arpShine 2.6s var(--arp-io) .05s 1 both;
}
@keyframes arpShine{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---------- Debu emas di hero ---------- */
.arp-dust{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:0;
  transition:opacity 2.8s ease;mix-blend-mode:screen;
}
.arpm-go .arp-dust{opacity:1}

/* ---------- Garis progres scroll di navigasi ---------- */
.arp-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.arp-progress i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,rgba(182,144,79,0),#b6904f 25%,#f1e0ae);
  transform-origin:0 50%;scale:var(--sp,0) 1;opacity:.95;
}
.arpm .nav{transition:box-shadow .6s ease}
.arpm.arp-scrolled .nav{box-shadow:0 14px 34px rgba(0,0,0,.20)}

/* ---------- Tombol: kilau + tarikan magnetik halus ---------- */
.arpm .btn{position:relative;overflow:hidden;isolation:isolate}
.arpm .btn::after{
  content:"";position:absolute;top:-1px;bottom:-1px;left:-45%;width:34%;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.42) 50%,transparent 100%);
  transform:skewX(-22deg);translate:-160% 0;pointer-events:none;
}
.arpm .btn:hover::after{animation:arpSheen 1s var(--arp-io)}
@keyframes arpSheen{from{translate:-160% 0}to{translate:520% 0}}

/* ---------- Kartu: sorot emas mengikuti kursor ---------- */
.arpm :is(.practice-item,.area-card,.support-card,.engagement-card){position:relative}
.arpm :is(.practice-item,.area-card,.support-card,.engagement-card)::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(210,183,119,.17),transparent 68%);
  transition:opacity .45s ease;
}
.arpm :is(.practice-item,.area-card,.support-card,.engagement-card):hover::after{opacity:1}

/* ---------- Filter Practice Areas: kartu tersusun ulang dengan halus ---------- */
.arp-refilter{animation:arpCard .85s var(--arp-ease) calc(var(--rf,0) * 55ms) both}
@keyframes arpCard{from{opacity:0;translate:0 20px}to{opacity:1;translate:none}}

/* ---------- Dropdown navigasi ---------- */
.arpm .nav-service-menu:hover .nav-service-dropdown a,
.arpm .nav-service-menu:focus-within .nav-service-dropdown a{animation:arpItem .5s var(--arp-ease) both}
.arpm .nav-service-dropdown a:nth-child(1){animation-delay:.05s!important}
.arpm .nav-service-dropdown a:nth-child(2){animation-delay:.11s!important}
.arpm .nav-service-dropdown a:nth-child(3){animation-delay:.17s!important}
@keyframes arpItem{from{opacity:0;translate:-10px 0}to{opacity:1;translate:none}}

/* ---------- Menu mobile ---------- */
.arpm .mobile-panel.show{animation:arpPanel .5s var(--arp-ease) both}
.arpm .mobile-panel.show>*{animation:arpRise .65s var(--arp-ease) both}
.arpm .mobile-panel.show>*:nth-child(1){animation-delay:.06s}
.arpm .mobile-panel.show>*:nth-child(2){animation-delay:.10s}
.arpm .mobile-panel.show>*:nth-child(3){animation-delay:.14s}
.arpm .mobile-panel.show>*:nth-child(4){animation-delay:.18s}
.arpm .mobile-panel.show>*:nth-child(5){animation-delay:.22s}
.arpm .mobile-panel.show>*:nth-child(6){animation-delay:.26s}
.arpm .mobile-panel.show>*:nth-child(7){animation-delay:.30s}
.arpm .mobile-panel.show>*:nth-child(8){animation-delay:.34s}
@keyframes arpPanel{from{opacity:0;translate:0 -16px}to{opacity:1;translate:none}}

/* ---------- Modal konsultasi ---------- */
.arpm .modal.show{animation:arpFade .4s ease both}
.arpm .modal.show .modal-card{animation:arpModal .75s var(--arp-ease) .04s both}
.arpm .modal.show .modal-card>*{animation:arpRise .8s var(--arp-ease) both}
.arpm .modal.show .modal-card>*:nth-child(2){animation-delay:.14s}
.arpm .modal.show .modal-card>*:nth-child(3){animation-delay:.20s}
.arpm .modal.show .modal-card>*:nth-child(4){animation-delay:.26s}
.arpm .modal.show .modal-card>*:nth-child(5){animation-delay:.32s}
.arpm .modal.show .modal-card>*:nth-child(6){animation-delay:.38s}
@keyframes arpModal{from{opacity:0;translate:0 36px;scale:.97}to{opacity:1;translate:none;scale:1}}