/* =========================================================
   ZYNN V36 — TOTAL FIX
   - Partikel terlihat jelas, atas/tengah/bawah.
   - Scroll wheel normal lagi.
   - Banner slider/panah tidak bikin banner hilang/gede.
   - Animasi produk/card saat masuk layar tetap ada.
   - Tidak ubah saldo/topup/data/layout utama.
   ========================================================= */

:root{
  --zv36-cyan:#5df2ff;
  --zv36-blue:#68b9ff;
  --zv36-purple:#a56dff;
  --zv36-pink:#ff63d7;
  --zv36-green:#19f2ac;
  --zv36-ease:cubic-bezier(.16,1,.3,1);
}

/* Safety: normal scroll, no hidden page */
html, body{
  overflow-x:hidden!important;
}
html{
  scroll-behavior:auto!important;
}
body{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* Kill previous heavy particles/classes if browser cached them */
#zv34-particles,
#zv35-particles{
  display:none!important;
}
.zv34-motion-in,
.zv34-from-left,
.zv34-from-right,
.zv34-zoom,
.zv35-card-motion,
.zv35-card-left,
.zv35-card-right,
.zv35-card-zoom{
  animation:none!important;
}

/* Global particle layer: fixed, behind content but visible */
#zv36-particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none!important;
  overflow:hidden;
  contain:layout paint;
}

/* Starfield: visible all over page, not just bottom */
#zv36-particles::before,
#zv36-particles::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(93,242,255,.70) 0 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(165,109,255,.58) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,99,215,.50) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(25,242,172,.45) 0 1px, transparent 1.7px);
  background-size:130px 130px, 190px 190px, 250px 250px, 310px 310px;
  background-position:0 0, 60px 110px, 140px 40px, 210px 180px;
  animation:zv36StarsMove 48s linear infinite;
  opacity:.80;
}
#zv36-particles::after{
  background-size:170px 170px, 230px 230px, 340px 340px, 420px 420px;
  animation-duration:76s;
  animation-direction:reverse;
  opacity:.48;
}
@keyframes zv36StarsMove{
  from{background-position:0 0, 60px 110px, 140px 40px, 210px 180px;}
  to{background-position:-180px -240px, -120px -80px, -40px -200px, 40px -60px;}
}

#zv36-particles .zv36-particle{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:999px;
  color:var(--zv36-cyan);
  background:currentColor;
  opacity:.9;
  box-shadow:0 0 10px currentColor,0 0 24px currentColor;
  transform:translate3d(0,0,0);
  animation:zv36Float var(--dur,14s) linear infinite, zv36Blink var(--blink,3s) ease-in-out infinite;
  will-change:transform,opacity;
}
#zv36-particles .zv36-particle:nth-child(5n+1){color:var(--zv36-cyan);}
#zv36-particles .zv36-particle:nth-child(5n+2){color:var(--zv36-purple);}
#zv36-particles .zv36-particle:nth-child(5n+3){color:var(--zv36-pink);}
#zv36-particles .zv36-particle:nth-child(5n+4){color:var(--zv36-green);}
#zv36-particles .zv36-particle:nth-child(5n+5){color:var(--zv36-blue);}
#zv36-particles .zv36-particle.big{
  width:6px;
  height:6px;
  box-shadow:0 0 14px currentColor,0 0 34px currentColor;
}

@keyframes zv36Float{
  0%{transform:translate3d(0,18px,0) scale(var(--scale,1)); opacity:0;}
  10%{opacity:.95;}
  50%{transform:translate3d(var(--drift,24px),-46vh,0) scale(calc(var(--scale,1)*1.10)); opacity:.9;}
  100%{transform:translate3d(calc(var(--drift,24px)*-1),-105vh,0) scale(calc(var(--scale,1)*.88)); opacity:0;}
}
@keyframes zv36Blink{
  0%,100%{filter:brightness(.9);}
  50%{filter:brightness(1.75);}
}

/* Content above particles */
body > *:not(#zv36-particles){
  position:relative;
  z-index:1;
}

/* Banner stability fix */
.banner-wrapper,
.banner-slider{
  overflow:hidden!important;
  border-radius:28px!important;
}
.banner-slider{
  height:auto;
  min-height:0;
}
.banner-track{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  transform:translateX(calc(var(--zynn-banner-index,0) * -100%))!important;
  transition:transform .50s cubic-bezier(.22,.8,.18,1)!important;
  will-change:transform;
}
.banner-item{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  height:100%!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
.banner-item img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
}

/* Dots stable */
.ref-hero-dots span,
.ref-hero-dots span:first-child,
.ref-hero-dots span:not(.active),
.ref-hero-dots span:first-child:not(.active){
  width:9px!important;
  min-width:9px!important;
  height:9px!important;
  border-radius:999px!important;
  background:rgba(226,238,255,.30)!important;
  opacity:.75!important;
  box-shadow:0 0 8px rgba(255,255,255,.08)!important;
  transition:width .24s var(--zv36-ease), min-width .24s var(--zv36-ease), background .24s ease, box-shadow .24s ease!important;
}
.ref-hero-dots span.active,
.ref-hero-dots span:first-child.active{
  width:30px!important;
  min-width:30px!important;
  background:linear-gradient(90deg,var(--zv36-cyan),var(--zv36-purple))!important;
  opacity:1!important;
  box-shadow:0 0 12px rgba(93,242,255,.45),0 0 22px rgba(165,109,255,.26)!important;
}

/* Interaction animation - lightweight */
a,button,input,select,textarea,
.tab-btn,.ds-tab,
.card,.ds-card,.ds-service-box,
.banner-arrow,.wallet-btn,.wallet-btn-index,
.cyber-actions a,.cyber-actions button,
.nav-user-pill,.nav-login-btn,
.zynn-bottom-nav a,
.nominal-item,.deposit-close,.deposit-submit{
  transition:transform .24s var(--zv36-ease),filter .24s var(--zv36-ease),box-shadow .24s var(--zv36-ease),opacity .24s var(--zv36-ease)!important;
}

@media(hover:hover) and (pointer:fine){
  button:hover,a:hover,.tab-btn:hover,.ds-tab:hover,.wallet-btn:hover,.wallet-btn-index:hover,.banner-arrow:hover{
    transform:translateY(-2px)!important;
    filter:brightness(1.05)!important;
  }
  .card:hover,.ds-card:hover,.ds-service-box:hover{
    transform:translateY(-5px) scale(1.01)!important;
    filter:brightness(1.04)!important;
  }
}

/* Product/card appears when scrolled into view */
.zv36-card-ready{
  opacity:1;
}
.zv36-card-in{
  animation:zv36ProductIn .62s var(--zv36-ease) both!important;
  transform-origin:center bottom;
}
.zv36-card-left{animation-name:zv36ProductLeft!important;}
.zv36-card-right{animation-name:zv36ProductRight!important;}
.zv36-card-zoom{animation-name:zv36ProductZoom!important;}

@keyframes zv36ProductIn{
  0%{opacity:0; transform:translateY(38px) scale(.94);}
  62%{opacity:1; transform:translateY(-4px) scale(1.012);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes zv36ProductLeft{
  0%{opacity:0; transform:translateX(-34px) translateY(22px) scale(.95);}
  62%{opacity:1; transform:translateX(4px) translateY(-3px) scale(1.01);}
  100%{opacity:1; transform:translateX(0) translateY(0) scale(1);}
}
@keyframes zv36ProductRight{
  0%{opacity:0; transform:translateX(34px) translateY(22px) scale(.95);}
  62%{opacity:1; transform:translateX(-4px) translateY(-3px) scale(1.01);}
  100%{opacity:1; transform:translateX(0) translateY(0) scale(1);}
}
@keyframes zv36ProductZoom{
  0%{opacity:0; transform:translateY(18px) scale(.88);}
  64%{opacity:1; transform:translateY(-2px) scale(1.018);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

/* Press/tap */
.zv36-pressing{
  transform:scale(.965)!important;
  filter:brightness(.95)!important;
}

/* Mobile */
@media(max-width:720px){
  #zv36-particles .zv36-particle{width:3px;height:3px;opacity:.72;}
  #zv36-particles .zv36-particle.big{width:5px;height:5px;}
  #zv36-particles::before{opacity:.62;}
  #zv36-particles::after{opacity:.36;}
  .zv36-card-in{animation-duration:.48s!important;}
  .ref-hero-dots span,
  .ref-hero-dots span:first-child,
  .ref-hero-dots span:not(.active),
  .ref-hero-dots span:first-child:not(.active){
    width:8px!important;min-width:8px!important;height:8px!important;
  }
  .ref-hero-dots span.active,
  .ref-hero-dots span:first-child.active{
    width:24px!important;min-width:24px!important;height:8px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #zv36-particles{display:none!important;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}