@layer pop {
html[data-design="armufa-modern"] body{
  --sy-ease:cubic-bezier(.22,1,.36,1);
  --sy-blue-1:#0f4fbd;
  --sy-blue-2:#2b7cff;
  --sy-blue-3:#d9e9ff;
}

/* ===== global motion ===== */
html[data-design="armufa-modern"] body .sy-motion-target,
html[data-design="armufa-modern"] body .sy-stagger-item{
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .52s var(--sy-ease), transform .52s var(--sy-ease), box-shadow .24s ease;
  will-change:transform,opacity;
}
html[data-design="armufa-modern"] body .sy-motion-target.is-visible,
html[data-design="armufa-modern"] body .sy-stagger-item.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

html[data-design="armufa-modern"] body .mc-card,
html[data-design="armufa-modern"] body .mc-country-item,
html[data-design="armufa-modern"] body .mc-order-item,
html[data-design="armufa-modern"] body .mc-service-card,
html[data-design="armufa-modern"] body .otp-shop-server,
html[data-design="armufa-modern"] body .mc-server-item,
html[data-design="armufa-modern"] body .sy-overview-card,
html[data-design="armufa-modern"] body .sy-recent,
html[data-design="armufa-modern"] body .quick-link{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
html[data-design="armufa-modern"] body :is(.mc-card,.mc-country-item,.mc-order-item,.mc-service-card,.otp-shop-server,.mc-server-item,.quick-link):active{
  transform:translateY(1px) scale(.992);
}
html[data-design="armufa-modern"] body :is(.mc-card,.mc-country-item,.mc-order-item,.mc-service-card,.otp-shop-server,.mc-server-item,.quick-link):hover{
  box-shadow:0 14px 32px rgba(19,68,145,.11)!important;
}
html[data-design="armufa-modern"] body .sy-tapped{transform:scale(.985)!important;filter:saturate(1.03);}

/* ===== header motion ===== */
html[data-design="armufa-modern"] body .mc-header.sy-header{
  overflow:hidden!important;
}
html[data-design="armufa-modern"] body .mc-header.sy-header::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -38%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
  transform:skewX(-18deg);
  animation:syHeaderSweep 5.8s linear infinite;
  pointer-events:none;
  opacity:.6;
}
html[data-design="armufa-modern"] body .mc-header.sy-header .mc-logo-icon,
html[data-design="armufa-modern"] body .sy-user-avatar{
  animation:syFloat 3.6s ease-in-out infinite;
}
html[data-design="armufa-modern"] body .sy-user-avatar{animation-delay:.45s}
html[data-design="armufa-modern"] body .sy-menu-bar{
  overflow:hidden!important;
  background:linear-gradient(120deg,#1845a7 0%,#1863e9 52%,#2784ff 100%)!important;
  background-size:180% 180%!important;
  animation:syGradientFlow 7.5s ease infinite;
}
html[data-design="armufa-modern"] body .sy-menu-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.14) 50%,transparent 65% 100%);
  transform:translateX(-100%);
  animation:syMenuShine 3.8s ease-in-out infinite;
  pointer-events:none;
}
html[data-design="armufa-modern"] body .sy-menu-arrow{animation:syArrowNudge 1.8s ease-in-out infinite}

/* ===== button + chip motion ===== */
html[data-design="armufa-modern"] body :is(.mc-btn,.mc-tab,.mc-amount-btn,.mc-badge,.sy-primary-button,.qris-dismiss-btn){
  position:relative;
  overflow:hidden;
}
html[data-design="armufa-modern"] body :is(.mc-btn,.mc-tab,.mc-amount-btn,.sy-primary-button)::after{
  content:"";
  position:absolute;inset:auto;top:0;left:-140%;width:58%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);
  transition:none;
  pointer-events:none;
}
html[data-design="armufa-modern"] body :is(.mc-btn-primary,.mc-btn-warning,.mc-btn-success,.sy-primary-button,.mc-btn-full)::after{
  animation:syBtnShine 4.2s ease-in-out infinite;
}

/* ===== service / order animations ===== */
html[data-design="armufa-modern"] body .mc-service-card,
html[data-design="armufa-modern"] body .otp-shop-server,
html[data-design="armufa-modern"] body .mc-country-item,
html[data-design="armufa-modern"] body .mc-server-item,
html[data-design="armufa-modern"] body .op-card{
  transform-origin:center bottom;
}
html[data-design="armufa-modern"] body .mc-service-icon,
html[data-design="armufa-modern"] body .mc-country-flag,
html[data-design="armufa-modern"] body .op-card-img{
  transition:transform .24s ease, box-shadow .24s ease;
}
html[data-design="armufa-modern"] body :is(.mc-service-card,.mc-country-item,.mc-server-item,.op-card):hover :is(.mc-service-icon,.mc-country-flag,.op-card-img){
  transform:translateY(-2px) scale(1.04);
}
html[data-design="armufa-modern"] body .op-card.active{
  animation:syPulseBorder 1.7s ease-in-out infinite;
}
html[data-design="armufa-modern"] body .mc-order-sticky{
  animation:syDockIn .65s var(--sy-ease) both;
}

/* ===== deposit specific ===== */
html[data-design="armufa-modern"] body.is-deposit-page .mc-amount-grid{
  gap:10px;
}
html[data-design="armufa-modern"] body.is-deposit-page .mc-amount-btn{
  animation:syFadeLift .55s var(--sy-ease) both;
}
html[data-design="armufa-modern"] body.is-deposit-page .mc-amount-btn.active,
html[data-design="armufa-modern"] body.is-deposit-page .mc-amount-btn.selected{
  box-shadow:0 0 0 3px rgba(25,101,232,.14),0 12px 24px rgba(25,101,232,.18)!important;
  animation:sySelectedPulse 1.8s ease-in-out infinite;
}
html[data-design="armufa-modern"] body.is-deposit-page #activeDepositSection .mc-card,
html[data-design="armufa-modern"] body.is-deposit-page #newQrisSection .mc-card{
  position:relative;
  overflow:hidden;
}
html[data-design="armufa-modern"] body.is-deposit-page #activeDepositSection .mc-card::before,
html[data-design="armufa-modern"] body.is-deposit-page #newQrisSection .mc-card::before{
  content:"";
  position:absolute;inset:-40% auto auto -30%;width:58%;height:180%;
  background:radial-gradient(circle,rgba(37,126,255,.12),transparent 60%);
  animation:syOrbMove 6.8s ease-in-out infinite;
  pointer-events:none;
}
html[data-design="armufa-modern"] body.is-deposit-page .mc-qr-box,
html[data-design="armufa-modern"] body.is-deposit-page #newQrImg{
  animation:syQrFloat 3.1s ease-in-out infinite;
}
html[data-design="armufa-modern"] body.is-deposit-page :is(#depositStatusBadge,#newDepositStatusBadge).mc-status-pending{
  animation:syPendingPulse 1.4s ease-in-out infinite;
}
html[data-design="armufa-modern"] body.is-deposit-page #createQrisBtn{
  box-shadow:0 8px 24px rgba(21,101,232,.18),0 0 0 0 rgba(21,101,232,.18)!important;
  animation:syGlowCTA 2.8s ease-in-out infinite;
}
html[data-design="armufa-modern"] body.is-deposit-page .qris-dismiss-btn{
  animation:syDangerPulse 2.6s ease-in-out infinite;
}

/* ===== admin/dashboard extras ===== */
html[data-design="armufa-modern"] body .sy-balance-card{
  position:relative;overflow:hidden!important;
}
html[data-design="armufa-modern"] body .sy-balance-card::before{
  content:"";
  position:absolute;inset:-20% -15% auto auto;width:42%;height:160%;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);
  transform:rotate(26deg);
  animation:syCardSweep 5.6s linear infinite;
}
html[data-design="armufa-modern"] body .sy-overview-card:nth-child(odd){animation:syFloatTiny 4.6s ease-in-out infinite}
html[data-design="armufa-modern"] body .sy-overview-card:nth-child(even){animation:syFloatTiny 5.2s ease-in-out infinite .4s}

/* ===== keyframes ===== */
@keyframes syHeaderSweep{0%{left:-42%}100%{left:118%}}
@keyframes syMenuShine{0%,22%{transform:translateX(-110%)}40%,100%{transform:translateX(130%)}}
@keyframes syGradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes syArrowNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes syFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes syFloatTiny{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes syBtnShine{0%,16%{left:-140%}35%,100%{left:145%}}
@keyframes syPulseBorder{0%,100%{box-shadow:0 4px 14px rgba(124,58,237,.18)}50%{box-shadow:0 8px 22px rgba(124,58,237,.28)}}
@keyframes syDockIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes syFadeLift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes sySelectedPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.02)}}
@keyframes syOrbMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,18px) scale(1.08)}}
@keyframes syQrFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes syPendingPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.12)}50%{box-shadow:0 0 0 5px rgba(245,158,11,.15)}}
@keyframes syGlowCTA{0%,100%{box-shadow:0 8px 24px rgba(21,101,232,.18),0 0 0 0 rgba(21,101,232,.18)}50%{box-shadow:0 12px 30px rgba(21,101,232,.24),0 0 0 8px rgba(21,101,232,.08)}}
@keyframes syDangerPulse{0%,100%{box-shadow:0 4px 0 #541225,0 0 0 0 rgba(167,29,53,.1)}50%{box-shadow:0 4px 0 #541225,0 0 0 6px rgba(167,29,53,.11)}}
@keyframes syCardSweep{0%{transform:translateX(-110%) rotate(26deg)}100%{transform:translateX(180%) rotate(26deg)}}

@media (prefers-reduced-motion:reduce){
  html[data-design="armufa-modern"] body *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
}

/* Keep long country lists stationary during touch hit testing. */
@layer pop {
html[data-design="armufa-modern"] body .sy-order-countries .mc-country-item,
html[data-design="armufa-modern"] body .sy-order-countries .mc-server-item {
  transform:none!important;
  opacity:1!important;
  will-change:auto!important;
}
html[data-design="armufa-modern"] body .sy-order-countries .mc-server-item a.mc-btn {
  touch-action:manipulation;
}
}