/* Gold background (luxury look) */
.bg-gold {
  background: linear-gradient(
    135deg,
    #3b2a00 0%,
    #8a6b00 18%,
    #f6e27a 35%,
    #d4af37 55%,
    #fff2b2 70%,
    #b8870b 85%,
    #3b2a00 100%
  );
  background-size: 160% 160%;
  animation: goldShine 6s ease-in-out infinite;
  border-radius: 15px;

}



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









/* Pearl white background (luxury look) */
.bg-pearl {
  background: linear-gradient(
    135deg,
    #fdfefe 0%,
    #f3f5f6 18%,
    #ffffff 32%,
    #e9ecef 48%,
    #ffffff 62%,
    #f0f2f4 78%,
    #fdfefe 100%
  );
  background-size: 160% 160%;
  animation: pearlShine 6s ease-in-out infinite;
}

/* Optional: for text readability */
.bg-pearl--overlay {
  position: relative;
}
.bg-pearl--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(239, 238, 238, 0.739), transparent 50%),
    radial-gradient(circle at 80% 35%, rgba(255, 255, 255, 0.737), transparent 45%),
    linear-gradient(
      180deg,
      rgba(222, 222, 222, 0.05),
      rgba(223, 223, 223, 0.12)
    );
  pointer-events: none;
}
.bg-pearl--overlay > * {
  position: relative;
  z-index: 0;
}

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



/* Luxury blue background */
.bg-blue {
  background: linear-gradient(
    135deg,
    #eaf4ff 0%,
    #cfe4ff 18%,
    #ffffff 32%,
    #9ec5ff 48%,
    #ffffff 62%,
    #6ea8ff 78%,
    #eaf4ff 100%
  );
  background-size: 160% 160%;
  animation: blueShine 6s ease-in-out infinite;
  border-radius: 15px;
}

/* luxury shine overlay */
.bg-blue--overlay {
  position: relative;
}
.bg-blue--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 15%, rgba(140,190,255,0.25), transparent 50%),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,0.6), transparent 45%),
    linear-gradient(
      180deg,
      rgba(0,80,255,0.08),
      rgba(0,30,120,0.18)
    );
  pointer-events: none;
}
.bg-blue--overlay > * {
  position: relative;
  z-index: 0;
}

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

/* اگر motion کم بخوای */
@media (prefers-reduced-motion: reduce) {
  .bg-blue { animation: none; }
}


/* Luxury silver background */
.bg-silver {
  background: linear-gradient(
    135deg,
    #f8f9fa 0%,
    #e9ecef 15%,
    #ffffff 28%,
    #d1d5d8 45%,
    #ffffff 60%,
    #cfd4d9 78%,
    #f8f9fa 100%
  );
  background-size: 160% 160%;
  animation: silverShine 6s ease-in-out infinite;
}

/* metallic overlay */
.bg-silver--overlay {
  position: relative;
}
.bg-silver--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.7), transparent 45%),
    radial-gradient(circle at 75% 40%, rgba(180,190,200,0.35), transparent 50%),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(120,130,140,0.18)
    );
  pointer-events: none;
}
.bg-silver--overlay > * {
  position: relative;
  z-index: 0;
}

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







/* Base Style Overrides /////////////////////////////////Holographic///////////////////////////// */


/* The Shader Stuff */
.shader {
  position: relative;
  overflow: hidden;
  backface-visibility: hidden; /* Forces GPU */
}

.shader-layer {
  background: black;
  /* background-size: 100%; */
  background-position: center;
}

.specular {
  mix-blend-mode: color-dodge;
  background-attachment: fixed;
}

.mask {
  mix-blend-mode: multiply;
  /* background-image: url(sparrow_mask.png); */
}

/* Gradient Definitions */
.gradient-sparrow {
  background-image: linear-gradient(
    0deg,
    hsl(359, 60%, 40%),
    hsl(16, 60%, 45%),
    hsl(33, 60%, 50%),
    hsl(45, 60%, 55%),
    hsl(58, 60%, 60%),
    hsl(58, 60%, 65%),
    hsl(58, 60%, 70%),
    hsl(96, 60%, 65%),
    hsl(146, 60%, 60%),
    hsl(183, 60%, 55%),
    hsl(225, 60%, 50%),
    hsl(265, 60%, 45%),
    hsl(303, 60%, 40%)
  );
}

.gradient-lumon {
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 0%) 0%,
    hsl(0, 0%, 0%) 59.8%,
    hsl(221, 61%, 34%) 60%,
    hsl(197, 92%, 86%) 60.2%,
    hsl(0, 0%, 0%) 100%
  );
}

.gradient-turtle {
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 0%) 40%,
    hsl(195, 63%, 71%) 50%,
    hsl(261, 49%, 78%) 100%
  );
}

.gradient-dragonfly {
  background-image: linear-gradient(
    25deg,
    hsl(0, 0%, 33%) 30%,
    hsl(138, 26%, 83%) 45%,
    hsl(77, 5%, 72%) 65%,
    hsl(0, 0%, 33%) 70%
  );
}

.gradient-beetle {
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 0%) 10%,
    hsl(67, 61%, 83%) 45%,
    hsl(0, 0%, 0%) 80%
  );
}

.gradient-nanina {
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 0%) 0%,
    hsl(50, 100%, 88%) 30%,
    hsl(50, 100%, 88%) 70%,
    hsl(0, 0%, 0%) 90%
  );
}

.gradient-mandala {
  background-image: linear-gradient(
    30deg,
    hsl(30, 80%, 20%) 0%,
    hsl(30, 80%, 80%) 10%,
    hsl(30, 80%, 20%) 20%,
    hsl(30, 80%, 80%) 30%,
    hsl(30, 80%, 20%) 35%,
    hsl(30, 80%, 80%) 50%,
    hsl(30, 80%, 20%) 65%,
    hsl(30, 80%, 80%) 70%,
    hsl(30, 80%, 20%) 80%,
    hsl(30, 80%, 80%) 90%,
    hsl(30, 80%, 20%) 100%
  );
}

.gradient-deer {
  background-image: linear-gradient(
    -25deg,
    hsl(0, 0%, 0%) 30%,
    hsl(104, 26%, 83%) 45%,
    hsl(273, 22%, 25%) 65%,
    hsl(0, 0%, 0%) 70%
  );
}
/* Base Style Overrides /////////////////////////////////Holographic///////////////////////////// */