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

@keyframes pearl-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.iridescent-bg {
  background: linear-gradient(
    135deg,
    rgba(255, 182, 193, 0.2),
    rgba(176, 224, 230, 0.2),
    rgba(221, 160, 221, 0.2),
    rgba(152, 251, 152, 0.2),
    rgba(255, 218, 185, 0.2)
  );
  background-size: 400% 400%;
  animation: iridescent-shift 15s ease infinite;
}

.iridescent-border {
  position: relative;
  background: var(--primary-white);
}

.iridescent-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    45deg,
    rgba(255, 182, 193, 0.5),
    rgba(176, 224, 230, 0.5),
    rgba(221, 160, 221, 0.5),
    rgba(152, 251, 152, 0.5),
    rgba(255, 218, 185, 0.5)
  );
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: iridescent-shift 10s ease infinite;
}

.pearl-sheen {
  position: relative;
  overflow: hidden;
}

.pearl-sheen::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: pearl-shimmer 3s ease-in-out infinite;
}

.holographic-text {
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #4ecdc4,
    #ffe66d,
    #a8e6cf,
    #ff6b6b
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: iridescent-shift 5s ease infinite;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.soft-iridescent {
  background: linear-gradient(
    135deg,
    rgba(255, 182, 193, 0.15),
    rgba(176, 224, 230, 0.15)
  );
  transition: all 0.3s ease;
}

.soft-iridescent:hover {
  background: linear-gradient(
    135deg,
    rgba(176, 224, 230, 0.2),
    rgba(221, 160, 221, 0.2)
  );
}

.filter-tag {
  background: var(--primary-white);
  border: 2px solid var(--light-gray);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.filter-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(176, 224, 230, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.filter-tag:hover::before {
  left: 100%;
}

.filter-tag.active {
  background: linear-gradient(
    135deg,
    rgba(176, 224, 230, 0.3),
    rgba(255, 182, 193, 0.3)
  );
  border-color: transparent;
}

.tag-local { background: linear-gradient(135deg, rgba(152, 251, 152, 0.2), rgba(144, 238, 144, 0.2)); }
.tag-usa { background: linear-gradient(135deg, rgba(173, 216, 230, 0.2), rgba(135, 206, 250, 0.2)); }
.tag-world { background: linear-gradient(135deg, rgba(221, 160, 221, 0.2), rgba(218, 112, 214, 0.2)); }
.tag-team { background: linear-gradient(135deg, rgba(255, 218, 185, 0.2), rgba(255, 228, 196, 0.2)); }
.tag-fun { background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(255, 192, 203, 0.2)); }

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 182, 193, 0.18) 0%,
    rgba(176, 224, 230, 0.18) 25%,
    rgba(221, 160, 221, 0.18) 50%,
    rgba(152, 251, 152, 0.18) 75%,
    rgba(255, 218, 185, 0.18) 100%
  );
  background-size: 400% 400%;
  animation: iridescent-shift 20s ease infinite;
  pointer-events: none;
  z-index: 1;
}

.feature-card {
  background: var(--primary-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--forest-green),
    var(--forest-green-light),
    var(--forest-green)
  );
  background-size: 200% 100%;
  animation: iridescent-shift 8s ease infinite;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(176, 224, 230, 0.2);
}