/* =========================================================
   ZYNN V38 — LIGHT MOBILE SMOOTH OPTIMIZATION
   Tujuan:
   - Ringankan HP yang patah-patah.
   - Partikel tetap ada dan tampilan tetap sama.
   - Animasi tombol tetap ada, tapi lebih ringan.
   - Produk/card tetap animasi saat scroll, tanpa blur berat/ripple berat.
   ========================================================= */

:root{
  --zv38-ease:cubic-bezier(.2,.8,.2,1);
  --zv38-spring:cubic-bezier(.16,1,.3,1);
}

/* Safety: jangan ada animasi lama yang bikin berat */
.zv37-ripple,
.zv32-ripple{
  display:none!important;
}

.zv37-product-in,
.zv37-product-left,
.zv37-product-right,
.zv37-product-pop{
  animation:none!important;
}

/* Semua interaksi smooth, tapi ringan */
a, button,
.tab-btn, .ds-tab,
.wallet-btn, .wallet-btn-index,
.cyber-actions a, .cyber-actions button,
.banner-arrow,
.navbar a,
.nav-user-pill, .nav-login-btn,
.user-box,
.zynn-bottom-nav a,
.nominal-item,
.deposit-close, .deposit-submit,
#cs-pill, #cs-bubble,
.ref-hero-dots span{
  transition:
    transform .18s var(--zv38-ease),
    filter .18s var(--zv38-ease),
    box-shadow .18s var(--zv38-ease),
    opacity .18s var(--zv38-ease)!important;
}

/* PC tetap terasa premium */
@media(hover:hover) and (pointer:fine){
  a:hover, button:hover,
  .tab-btn:hover, .ds-tab:hover,
  .wallet-btn:hover, .wallet-btn-index:hover,
  .cyber-actions a:hover, .cyber-actions button:hover,
  .banner-arrow:hover,
  .nav-user-pill:hover, .nav-login-btn:hover,
  .zynn-bottom-nav a:hover,
  .nominal-item:hover,
  .deposit-close:hover, .deposit-submit:hover,
  #cs-pill:hover, #cs-bubble:hover{
    transform:translateY(-2px) scale(1.008)!important;
    filter:brightness(1.045)!important;
  }

  .card:hover,
  .ds-card:hover,
  .ds-service-box:hover{
    transform:translateY(-4px) scale(1.006)!important;
    filter:brightness(1.035)!important;
  }
}

/* Tap feedback ringan */
.zv38-press{
  transform:scale(.975)!important;
  filter:brightness(.96)!important;
}

.card.zv38-press,
.ds-card.zv38-press,
.ds-service-box.zv38-press{
  transform:scale(.99)!important;
}

/* Product scroll animation: ringan, bukan blur */
.zv38-product-in{
  animation:zv38ProductUp .48s var(--zv38-spring) both!important;
  transform-origin:center bottom;
}

.zv38-product-left{
  animation-name:zv38ProductLeft!important;
}

.zv38-product-right{
  animation-name:zv38ProductRight!important;
}

.zv38-product-pop{
  animation-name:zv38ProductPop!important;
}

@keyframes zv38ProductUp{
  0%{
    opacity:0;
    transform:translateY(28px) scale(.965);
  }
  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.006);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes zv38ProductLeft{
  0%{
    opacity:0;
    transform:translateX(-20px) translateY(20px) scale(.97);
  }
  65%{
    opacity:1;
    transform:translateX(2px) translateY(-2px) scale(1.004);
  }
  100%{
    opacity:1;
    transform:translateX(0) translateY(0) scale(1);
  }
}

@keyframes zv38ProductRight{
  0%{
    opacity:0;
    transform:translateX(20px) translateY(20px) scale(.97);
  }
  65%{
    opacity:1;
    transform:translateX(-2px) translateY(-2px) scale(1.004);
  }
  100%{
    opacity:1;
    transform:translateX(0) translateY(0) scale(1);
  }
}

@keyframes zv38ProductPop{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.94);
  }
  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.008);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Modal ringan */
.deposit-overlay.is-open .deposit-modal,
.deposit-overlay[style*="flex"] .deposit-modal{
  animation:zv38ModalIn .24s var(--zv38-spring) both!important;
}

@keyframes zv38ModalIn{
  from{opacity:.001; transform:translateY(12px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* ============================
   MOBILE PERFORMANCE MODE
   ============================ */
@media(max-width:720px){
  /* Hilangkan hover transform di HP, cukup tap feedback */
  a, button,
  .tab-btn, .ds-tab,
  .wallet-btn, .wallet-btn-index,
  .cyber-actions a, .cyber-actions button,
  .banner-arrow,
  .nav-user-pill, .nav-login-btn,
  .zynn-bottom-nav a,
  .nominal-item,
  .deposit-close, .deposit-submit,
  .card, .ds-card, .ds-service-box{
    transition:
      transform .14s var(--zv38-ease),
      filter .14s var(--zv38-ease),
      opacity .14s var(--zv38-ease)!important;
    will-change:auto!important;
  }

  /* Partikel tetap ada, tapi animasi individual diperlambat dan diringankan */
  #zv36-particles::before{
    opacity:.58!important;
    animation-duration:80s!important;
  }

  #zv36-particles::after{
    opacity:.34!important;
    animation-duration:120s!important;
  }

  #zv36-particles .zv36-particle{
    width:3px!important;
    height:3px!important;
    opacity:.66!important;
    animation-duration:22s!important;
    box-shadow:0 0 8px currentColor,0 0 16px currentColor!important;
  }

  #zv36-particles .zv36-particle.big{
    width:4px!important;
    height:4px!important;
    box-shadow:0 0 10px currentColor,0 0 22px currentColor!important;
  }

  /* Produk tetap animasi, tapi lebih cepat dan ringan */
  .zv38-product-in{
    animation-duration:.36s!important;
  }

  @keyframes zv38ProductUp{
    0%{opacity:0; transform:translateY(18px) scale(.98);}
    70%{opacity:1; transform:translateY(-1px) scale(1.003);}
    100%{opacity:1; transform:translateY(0) scale(1);}
  }

  @keyframes zv38ProductLeft{
    0%{opacity:0; transform:translateX(-12px) translateY(14px) scale(.985);}
    70%{opacity:1; transform:translateX(1px) translateY(-1px) scale(1.002);}
    100%{opacity:1; transform:translateX(0) translateY(0) scale(1);}
  }

  @keyframes zv38ProductRight{
    0%{opacity:0; transform:translateX(12px) translateY(14px) scale(.985);}
    70%{opacity:1; transform:translateX(-1px) translateY(-1px) scale(1.002);}
    100%{opacity:1; transform:translateX(0) translateY(0) scale(1);}
  }

  @keyframes zv38ProductPop{
    0%{opacity:0; transform:translateY(14px) scale(.975);}
    70%{opacity:1; transform:translateY(-1px) scale(1.004);}
    100%{opacity:1; transform:translateY(0) scale(1);}
  }
}

@media(prefers-reduced-motion:reduce){
  .zv38-product-in,
  .deposit-overlay.is-open .deposit-modal{
    animation:none!important;
  }
}