/* === STREAMLINED VALUES PILLS ANIMATION === */

/* Base floating animation */
@keyframes floatAnimation {
  0%, 100% {
    transform: 
      translateY(var(--float-y, 0px)) 
      translateX(0px)
      rotate(0deg);
  }
  33% {
    transform: 
      translateY(calc(var(--float-y, 0px) - 15px)) 
      translateX(10px)
      rotate(-2deg);
  }
  66% {
    transform: 
      translateY(calc(var(--float-y, 0px) + 10px)) 
      translateX(-10px)
      rotate(2deg);
  }
}

@keyframes pulseIn {
  0% {
    transform: scale(0.3) rotate(180deg);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: scale(1.1) rotate(90deg);
    filter: blur(0px);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

/* Value item styling */
.value-item {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(50px) scale(0.8) rotate(-10deg);
  transition: 
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

/* Pill styling */
.value-pill {
  display: inline-block;
  padding: 16px 24px;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden; /* Added for shimmer effect */
}

/* NEW: Colored hover effect */
.value-pill:hover {
  background: linear-gradient(135deg, #1abc9c 0%, #2980b9 50%, #9b59b6 100%);
  border-color: rgba(26, 188, 156, 0.8);
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 40px rgba(26, 188, 156, 0.4);
  color: #ffffff;
}

/* NEW: Shimmer effect before element */
.value-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s;
  z-index: 1;
}

.value-pill:hover::before {
  left: 100%;
}

/* NEW: Active (click) effect */
.value-pill:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(26, 188, 156, 0.6);
}

/* NEW: Optional color variations for different pills */
.value-pill:nth-child(4n+1):hover {
  background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
  box-shadow: 0 15px 40px rgba(26, 188, 156, 0.4);
}

.value-pill:nth-child(4n+2):hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
  box-shadow: 0 15px 40px rgba(41, 128, 185, 0.4);
}

.value-pill:nth-child(4n+3):hover {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  box-shadow: 0 15px 40px rgba(155, 89, 182, 0.4);
}

.value-pill:nth-child(4n):hover {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  box-shadow: 0 15px 40px rgba(230, 126, 34, 0.4);
}

/* Visible state */
.value-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

/* Floating animation */
.value-item.floating {
  animation: floatAnimation var(--float-duration, 4s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Pulse in effect */
.value-item.pulse-in .value-pill {
  animation: pulseIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hidden state */
.value-item.hidden {
  opacity: 0;
  transform: translateY(100px) scale(0.9) rotate(15deg);
  filter: blur(5px);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .value-item {
    --float-duration: 5s !important;
  }
  
  .value-item.floating {
    animation: floatAnimation var(--float-duration, 5s) ease-in-out infinite;
  }

  /* Disable hover effects on mobile for better performance */
  .value-pill:hover {
    transform: none;
    background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  .value-item,
  .value-pill {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
  
  .value-item.floating {
    animation: none !important;
  }
  
  .value-item.visible {
    transform: none !important;
  }

  .value-pill:hover {
    transform: none !important;
  }
}

/* Enhanced backdrop blur support */
@supports (backdrop-filter: blur(10px)) {
  .value-pill {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background: linear-gradient(
      135deg, 
      rgba(17, 17, 17, 0.8) 0%, 
      rgba(26, 26, 26, 0.8) 100%
    );
  }
}

/* MODIFIED: Updated shimmer effect (now uses ::after) */
.value-pill:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 60%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  pointer-events: none;
  z-index: 2;
}

/* 3D depth enhancements */
.values-grid {
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* Add shimmer effect on hover */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}