/* =========================================================
   Karbit Prime - effects.css
   Animated text + role badge effects
   ========================================================= */

.name-effect-member{
  color:#eef2ff;
  font-weight:800;
}

/* Shared animated text base */
.name-effect-admin-gold,
.name-effect-mademoiselle,
.vip-effect-aurora,
.vip-effect-prism,
.vip-effect-electric,
.vip-effect-sunset{
  display:inline-block;
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent !important;
  font-weight:900;
  will-change:background-position, filter, transform;
}

/* -------------------------
   Admin Gold
   ------------------------- */
.name-effect-admin-gold{
  background-image:linear-gradient(
    90deg,
    #fff7c6 0%,
    #f1c94a 18%,
    #fff1a3 35%,
    #c98b17 52%,
    #fff0b5 70%,
    #d6a22d 85%,
    #fff7c6 100%
  );
  animation:textShimmerGold 3.2s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,214,74,.20));
}

/* -------------------------
   Mademoiselle baru
   ------------------------- */
.name-effect-mademoiselle{
  background-image:linear-gradient(
    90deg,
    #fff2f7 0%,
    #ffd7e7 20%,
    #ffbfd8 40%,
    #f5a8c8 60%,
    #ffe3ee 80%,
    #fff2f7 100%
  );
  animation:textShimmerRoseSoft 4.2s linear infinite;
  filter:drop-shadow(0 0 7px rgba(255,175,210,.16));
}

/* -------------------------
   VIP / Premium Effects
   ------------------------- */
.vip-effect-aurora{
  background-image:linear-gradient(
    90deg,
    #8cc8ff 0%,
    #9d8cff 18%,
    #ff7ecb 36%,
    #8ef0d6 56%,
    #9aa6ff 78%,
    #8cc8ff 100%
  );
  animation:textFlow 3.4s linear infinite;
  filter:drop-shadow(0 0 8px rgba(149,171,255,.22));
}

.vip-effect-prism{
  background-image:linear-gradient(
    90deg,
    #ffb36b 0%,
    #ff7db8 20%,
    #9f86ff 40%,
    #6bd8ff 60%,
    #9fff97 80%,
    #ffb36b 100%
  );
  animation:textFlow 2.9s linear infinite;
  filter:drop-shadow(0 0 8px rgba(162,134,255,.20));
}

.vip-effect-electric{
  background-image:linear-gradient(
    90deg,
    #d8f3ff 0%,
    #74b9ff 18%,
    #8a7dff 36%,
    #59e1ff 54%,
    #d8f3ff 72%,
    #74b9ff 100%
  );
  animation:textFlowFast 2.3s linear infinite;
  filter:drop-shadow(0 0 10px rgba(105,190,255,.22));
}

.vip-effect-sunset{
  background-image:linear-gradient(
    90deg,
    #ffd29b 0%,
    #ff9d7a 20%,
    #ff78c8 42%,
    #b58cff 64%,
    #ffd29b 100%
  );
  animation:textFlow 3.1s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,140,170,.22));
}

/* =========================================================
   Donor name effects
   aktif hanya saat donor_effect_until masih hidup
   ========================================================= */

.donor-supporter,
.donor-bronze,
.donor-silver,
.donor-gold,
.donor-platinum,
.donor-diamond{
  display:inline-block;
  font-weight:900;
}

.donor-supporter{
  color:#e8eeff;
  text-shadow:0 0 8px rgba(180,200,255,.16);
}

.donor-bronze{
  color:#d6a07a;
  text-shadow:
    0 0 8px rgba(214,160,122,.16),
    0 0 16px rgba(166,94,53,.10);
}

.donor-silver{
  color:#f1f6ff;
  text-shadow:
    0 0 10px rgba(220,235,255,.18),
    0 0 18px rgba(180,205,235,.10);
}

.donor-gold{
  color:#ffd76b;
  text-shadow:
    0 0 10px rgba(255,215,107,.18),
    0 0 18px rgba(255,180,45,.10);
}

.donor-platinum{
  color:#c8f1ff;
  text-shadow:
    0 0 10px rgba(145,230,255,.18),
    0 0 20px rgba(110,180,255,.10);
}

.donor-diamond{
  color:#f7fbff;
  text-shadow:
    0 0 12px rgba(190,240,255,.22),
    0 0 22px rgba(180,170,255,.12);
}

/* =========================================================
   Role badge base
   ========================================================= */

.badge-role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.badge-member{
  background:rgba(255,255,255,.06);
  color:#eef2ff;
}

.badge-admin{
  color:#ffe9a6;
  background:linear-gradient(90deg, rgba(255,232,160,.18), rgba(215,171,60,.26));
  box-shadow:0 8px 22px rgba(215,171,60,.12);
  animation:badgePulseGold 2.8s ease-in-out infinite;
}

.badge-mademoiselle{
  color:#ffe8f1;
  background:linear-gradient(90deg, rgba(255,220,232,.18), rgba(245,170,205,.24));
  box-shadow:0 8px 20px rgba(255,175,210,.14);
  animation:badgePulseRoseSoft 3.4s ease-in-out infinite;
}

.badge-premium{
  color:#f3e9ff;
  background:linear-gradient(90deg, rgba(125,92,255,.24), rgba(255,105,180,.18));
  box-shadow:0 8px 22px rgba(140,110,255,.16);
  animation:badgePulseVip 2.5s ease-in-out infinite;
}

.badge-premium-donor{
  color:#fff;
  background:linear-gradient(90deg, rgba(125,92,255,.30), rgba(255,143,205,.24));
  box-shadow:0 8px 22px rgba(160,120,255,.18);
  animation:badgePulseVipDonor 2.6s ease-in-out infinite;
}

.badge-donor-supporter{
  color:#eef4ff;
  background:linear-gradient(90deg, rgba(215,228,255,.16), rgba(180,205,255,.12));
  box-shadow:0 8px 20px rgba(180,205,255,.10);
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.badge-donor-bronze{
  background:linear-gradient(90deg, #8a5a3b, #c88a63);
  color:#fff4ea;
  box-shadow:0 8px 20px rgba(200,138,99,.12);
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.badge-donor-silver{
  background:linear-gradient(90deg, #98a7bd, #dbe7ff);
  color:#102036;
  box-shadow:0 8px 20px rgba(190,210,255,.12);
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.badge-donor-gold{
  background:linear-gradient(90deg, #b8860b, #ffd866);
  color:#2a1a00;
  box-shadow:0 8px 22px rgba(255,216,102,.14);
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.badge-donor-platinum{
  background:linear-gradient(90deg, #67b7d1, #c7f1ff);
  color:#0d2430;
  box-shadow:0 8px 22px rgba(140,225,255,.14);
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.badge-donor-diamond{
  background:linear-gradient(90deg, #8ce1ff, #dca8ff);
  color:#1f1230;
  box-shadow:0 8px 24px rgba(190,200,255,.16);
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.badge-admin::after,
.badge-mademoiselle::after,
.badge-premium::after,
.badge-premium-donor::after,
.badge-donor-supporter::after,
.badge-donor-bronze::after,
.badge-donor-silver::after,
.badge-donor-gold::after,
.badge-donor-platinum::after,
.badge-donor-diamond::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -28%;
  width:28%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  transform:rotate(18deg);
  animation:badgeSweepSoft 3.2s linear infinite;
  pointer-events:none;
}

/* Optional chat role compatibility */
.role-admin{
  background:linear-gradient(90deg, rgba(255,232,160,.18), rgba(215,171,60,.26));
  color:#ffe9a6;
}

.role-mademoiselle{
  background:linear-gradient(90deg, rgba(255,220,232,.18), rgba(245,170,205,.24));
  color:#ffe8f1;
}

.role-premium{
  background:linear-gradient(90deg, rgba(125,92,255,.20), rgba(176,109,255,.22));
  color:#dcc9ff;
}

.role-member{
  background:rgba(255,255,255,.06);
  color:#dfe7ff;
}

.role-premium-donor{
  background:linear-gradient(90deg, rgba(125,92,255,.22), rgba(255,143,205,.20));
  color:#f6ecff;
  animation:badgePulseVipDonor 2.6s ease-in-out infinite;
}

.role-donor-supporter{
  background:linear-gradient(90deg, rgba(215,228,255,.16), rgba(180,205,255,.12));
  color:#eef4ff;
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.role-donor-bronze{
  background:linear-gradient(90deg, #8a5a3b, #c88a63);
  color:#fff4ea;
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.role-donor-silver{
  background:linear-gradient(90deg, #98a7bd, #dbe7ff);
  color:#102036;
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.role-donor-gold{
  background:linear-gradient(90deg, #b8860b, #ffd866);
  color:#2a1a00;
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.role-donor-platinum{
  background:linear-gradient(90deg, #67b7d1, #c7f1ff);
  color:#0d2430;
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

.role-donor-diamond{
  background:linear-gradient(90deg, #8ce1ff, #dca8ff);
  color:#1f1230;
  animation:badgePulseDonorSoft 3s ease-in-out infinite;
}

/* Legacy compatibility from old naming */
.name-admin-gold{
  background-image:linear-gradient(
    90deg,
    #fff7c6 0%,
    #f1c94a 18%,
    #fff1a3 35%,
    #c98b17 52%,
    #fff0b5 70%,
    #d6a22d 85%,
    #fff7c6 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent !important;
  animation:textShimmerGold 3.2s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,214,74,.20));
  font-weight:900;
}

.name-mademoiselle{
  background-image:linear-gradient(
    90deg,
    #fff2f7 0%,
    #ffd7e7 20%,
    #ffbfd8 40%,
    #f5a8c8 60%,
    #ffe3ee 80%,
    #fff2f7 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent !important;
  animation:textShimmerRoseSoft 4.2s linear infinite;
  filter:drop-shadow(0 0 7px rgba(255,175,210,.16));
  font-weight:900;
}

/* =========================================================
   Keyframes
   ========================================================= */

@keyframes textFlow{
  0%{ background-position:0% center; }
  100%{ background-position:200% center; }
}

@keyframes textFlowFast{
  0%{ background-position:0% center; }
  100%{ background-position:240% center; }
}

@keyframes textShimmerGold{
  0%{ background-position:0% center; }
  100%{ background-position:220% center; }
}

@keyframes textShimmerRoseSoft{
  0%{ background-position:0% center; }
  100%{ background-position:220% center; }
}

@keyframes badgeSweep{
  0%{ left:-30%; }
  100%{ left:120%; }
}

@keyframes badgeSweepSoft{
  0%{ left:-30%; }
  100%{ left:120%; }
}

@keyframes badgePulseGold{
  0%,100%{
    transform:translateY(0);
    box-shadow:0 8px 22px rgba(215,171,60,.12);
  }
  50%{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(215,171,60,.18);
  }
}

@keyframes badgePulseRoseSoft{
  0%,100%{
    transform:translateY(0);
    box-shadow:0 8px 20px rgba(255,175,210,.14);
  }
  50%{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(255,175,210,.18);
  }
}

@keyframes badgePulseVip{
  0%,100%{
    transform:translateY(0);
    box-shadow:0 8px 22px rgba(140,110,255,.16);
  }
  50%{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(140,110,255,.24);
  }
}

@keyframes badgePulseDonorSoft{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-1px) scale(1.015);
  }
}

@keyframes badgePulseVipDonor{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:0 8px 22px rgba(160,120,255,.18);
  }
  50%{
    transform:translateY(-1px) scale(1.02);
    box-shadow:0 14px 30px rgba(190,130,255,.24);
  }
}

/* =========================================================
   Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .name-effect-admin-gold,
  .name-effect-mademoiselle,
  .vip-effect-aurora,
  .vip-effect-prism,
  .vip-effect-electric,
  .vip-effect-sunset,
  .badge-admin,
  .badge-mademoiselle,
  .badge-premium,
  .badge-premium-donor,
  .badge-donor-supporter,
  .badge-donor-bronze,
  .badge-donor-silver,
  .badge-donor-gold,
  .badge-donor-platinum,
  .badge-donor-diamond,
  .role-premium-donor,
  .role-donor-supporter,
  .role-donor-bronze,
  .role-donor-silver,
  .role-donor-gold,
  .role-donor-platinum,
  .role-donor-diamond,
  .name-admin-gold,
  .name-mademoiselle{
    animation:none !important;
  }

  .badge-admin::after,
  .badge-mademoiselle::after,
  .badge-premium::after,
  .badge-premium-donor::after,
  .badge-donor-supporter::after,
  .badge-donor-bronze::after,
  .badge-donor-silver::after,
  .badge-donor-gold::after,
  .badge-donor-platinum::after,
  .badge-donor-diamond::after{
    display:none;
  }
}