/* =====================================================
   JAKSKY MOTION FX V20
   GRID-SAFE • MOBILE-FIRST • HIGH REFRESH
   ===================================================== */

html{
  scroll-behavior:smooth;
}

body{
  animation:jakPageEnter .45s ease both;
}

@keyframes jakPageEnter{
  from{opacity:.25}
  to{opacity:1}
}

/* Scroll progress */
#jakFxProgress{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:3px;
  z-index:9999999;
  pointer-events:none;
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#ff3d9d,#b15cff,#39bfff);
  box-shadow:0 0 14px rgba(255,61,157,.55);
  transition:width .08s linear;
}

/* ================= BUTTON MOTION ================= */

button,
.btn,
.primary,
.secondary{
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:
    filter .18s ease,
    box-shadow .22s ease,
    transform .16s ease !important;
}

button:active,
.btn:active,
.primary:active,
.secondary:active{
  transform:scale(.965) !important;
  filter:brightness(.98);
}

.jakFxRipple{
  position:absolute;
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.52);
  transform:scale(0);
  animation:jakRipple .58s ease-out forwards;
}

@keyframes jakRipple{
  to{
    transform:scale(22);
    opacity:0;
  }
}

/* ================= GRID REVEAL ================= */
/* IMPORTANT: tidak pakai translate/scale pada CARD */

#list > .card.jakFxReveal{
  opacity:.08;
  filter:blur(2px) saturate(.85);
}

#list > .card.jakFxReveal.jakFxVisible{
  opacity:1;
  filter:blur(0) saturate(1);
  transition:
    opacity .55s cubic-bezier(.2,.8,.2,1),
    filter .65s cubic-bezier(.2,.8,.2,1) !important;
}

/* Card glow tanpa mengubah posisi */
#list > .card{
  transition:
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease !important;
}

#list > .card:active{
  filter:brightness(.97);
  box-shadow:0 12px 30px rgba(226,67,152,.16) !important;
}

/* ================= TAB ================= */

#filterTabs button.active,
.tabs button.active,
.tab.active{
  animation:jakActiveGlow 2.6s ease-in-out infinite;
}

@keyframes jakActiveGlow{
  0%,100%{
    box-shadow:0 6px 18px rgba(244,62,157,.18);
  }
  50%{
    box-shadow:
      0 8px 28px rgba(244,62,157,.34),
      0 0 0 3px rgba(244,62,157,.07);
  }
}

/* ================= BANNER SHINE ================= */

.jakPromoViewport{
  position:relative;
  overflow:hidden;
}

.jakPromoViewport::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  left:-55%;
  width:25%;
  pointer-events:none;
  background:linear-gradient(
    100deg,
    transparent,
    rgba(255,255,255,.42),
    transparent
  );
  transform:skewX(-16deg);
  animation:jakBannerShine 5.5s ease-in-out infinite;
}

@keyframes jakBannerShine{
  0%,58%{left:-55%;opacity:0}
  65%{opacity:1}
  82%{left:135%;opacity:.8}
  100%{left:135%;opacity:0}
}

/* ================= CS ================= */

#jakCsLauncher,
.jakCsLauncher,
[class*="csLauncher"]{
  animation:jakCsPulse 2.8s ease-in-out infinite;
}

@keyframes jakCsPulse{
  0%,100%{
    box-shadow:0 8px 22px rgba(238,45,164,.22);
  }
  50%{
    box-shadow:
      0 10px 32px rgba(238,45,164,.42),
      0 0 0 7px rgba(238,45,164,.07);
  }
}

/* ================= MODAL ================= */

.jakClaimsBox,
.modalBox,
.jakNotifPanel,
.profileModal,
.publicProfileBox,
.jakDialogBox,
.vipModalContent{
  transform-origin:center;
  animation:jakModalPop .38s cubic-bezier(.16,1,.3,1) both;
}

@keyframes jakModalPop{
  0%{
    opacity:0;
    transform:scale(.94);
  }
  70%{
    opacity:1;
    transform:scale(1.012);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}

/* Pemakai kode */
.jakClaimsRow{
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

.jakClaimsRow:active{
  box-shadow:0 7px 20px rgba(223,65,150,.12);
}

/* ================= BOTTOM NAV ================= */

.bottomNav,
.bottom-nav,
nav[class*="bottom"]{
  animation:jakNavEnter .55s cubic-bezier(.16,1,.3,1) both;
}

@keyframes jakNavEnter{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Active nav glow only — tidak mengubah layout */
.bottomNav .active,
.bottom-nav .active{
  animation:jakNavGlow 2.5s ease-in-out infinite;
}

@keyframes jakNavGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(247,63,159,0))}
  50%{filter:drop-shadow(0 4px 8px rgba(247,63,159,.32))}
}

/* ================= REDUCED MOTION ================= */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* =====================================================
   JAKSKY VIDEO PERFORMANCE MODE
   Efek ambient berhenti ketika video sedang diputar
   ===================================================== */

body.jakVideoPlaying .jakPromoViewport::after,
body.jakVideoPlaying #filterTabs button.active,
body.jakVideoPlaying .tabs button.active,
body.jakVideoPlaying .tab.active,
body.jakVideoPlaying #jakCsLauncher,
body.jakVideoPlaying .jakCsLauncher,
body.jakVideoPlaying [class*="csLauncher"],
body.jakVideoPlaying .bottomNav .active,
body.jakVideoPlaying .bottom-nav .active{
  animation:none !important;
}

body.jakVideoPlaying #list > .card{
  transition:none !important;
}

body.jakVideoPlaying{
  scroll-behavior:auto !important;
}