/* ================= BASE ================= */
body {
  background: linear-gradient(180deg,#ffffff,#fff1f5);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
}

/* ================= PERFORMANCE ================= */
.w-32.h-32 {
  will-change: transform;
  transform: translateZ(0);
}

#track {
  will-change: transform;
  backface-visibility: hidden;
}

/* ================= GRADIENT RING ================= */
.gradient-ring {
  position: relative;
  border-radius: 9999px;
  padding: 3px;
  background: linear-gradient(135deg, #f8e7e7, #d4af37, #ffffff);
  background-size: 300% 300%;
  animation: gradientMove 6s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-ring:hover {
  transform: scale(1.05);
  transition: 0.3s ease;
}

/* ================= GLASS & GLOW ================= */
.glass {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.4);
}

.glow {
  box-shadow: 0 0 15px rgba(212,175,55,0.4);
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 10px rgba(212,175,55,0.3); }
  50% { box-shadow: 0 0 25px rgba(212,175,55,0.6); }
}

/* ================= SHIMMER SYSTEM (ONE ENGINE) ================= */
.shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.5) 50%,
    transparent 60%
  );

  animation-name: shimmerMove;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

  /* default */
  animation-duration: 4s;
  animation-delay: 0s;
}

/* ONE KEYFRAME ONLY */
@keyframes shimmerMove {
  0% {
    transform: translateX(-120%) skewX(-15deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%) skewX(-15deg);
    opacity: 0;
  }
}

/* VARIANTS */
.shimmer-logo {
  animation-duration: 4.5s;
  animation-delay: 0.8s;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%
  );
}

.shimmer-badge {
  animation-duration: 5s;
  animation-delay: 0.8s;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%
  );
}

.shimmer-cta {
  animation-duration: 4s;
  animation-delay: 0.8s;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.25) 50%,
    transparent 70%
  );
}

/* ================= BNSP BADGE ================= */
.bnsp-badge {
  position: relative;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid rgba(212,175,55,0.25);
  box-shadow: 
    0 8px 25px rgba(0,0,0,0.08),
    0 0 0 1px rgba(255,255,255,0.4) inset;

  animation: bnspGlow 4s ease-in-out infinite;
}

@keyframes bnspGlow {
  0%,100% { box-shadow: 0 0 12px rgba(184,134,11,0.18); }
  50% { box-shadow: 0 0 28px rgba(255,215,0,0.28); }
}

/* shimmer overlay badge pakai engine sama */
.bnsp-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );
  animation: shimmerMove 6s ease-in-out infinite;
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 768px) {
  .gradient-ring {
    animation: none !important;
    background-size: 100% 100%;
  }

  .glow {
    animation: none !important;
    box-shadow: 0 0 10px rgba(212,175,55,0.2);
  }

  .glass {
    backdrop-filter: none !important;
    background: rgba(255,255,255,0.8);
  }
}