/*
 * GOLPOOGRO - Component: Story Active Ring Styles & Animators
 * Creates modern, high-precision radial gradient borders around profiles in story lists
 */

.story-ring-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 3px;
  transition: all 0.4s var(--ease-cinematic);
}

.story-profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-primary);
  background: var(--bg-tertiary);
  transition: transform 0.3s var(--ease-cinematic);
}

.story-item:hover .story-profile-avatar {
  transform: scale(1.05);
}

/* 1. UNVIEWED STORY RING: Gorgeous blue-purple luxury gradient with pulse */
.ring-state-unviewed {
  background: linear-gradient(135deg, #3b82f6 0%, #a855f7 50%, #06b6d4 100%);
  animation: ringPulseUnviewed 3s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

/* 2. VIEWED STORY RING: Subtle low-key glassy border */
.ring-state-viewed {
  background: var(--bg-glass-border);
  box-shadow: none;
}

/* 3. LIVE STORY RING: High intensity cyan & red dual ring pulsing rapidly */
.ring-state-live {
  background: linear-gradient(135deg, #ef4444 0%, #ec4899 50%, #f43f5e 100%);
  animation: ringPulseFast 1.5s ease-in-out infinite alternate;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* 4. PREMIUM CREATOR RING: Glistening multi-colored gradient ring (Gold/Blue) */
.ring-state-premium {
  background: linear-gradient(135deg, #eab308 0%, #3b82f6 50%, #ec4899 100%);
  animation: ringPulsePremium 4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.25);
}

/* 5. FRIEND STORY RING: Energetic emerald to lime fresh green splash */
.ring-state-friend {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #84cc16 100%);
  animation: ringPulseSlow 2s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* 6. SPONSORED STORY RING: Elegant dark platinum/blue sleek contrast borders */
.ring-state-sponsored {
  background: linear-gradient(135deg, #64748b 0%, #0284c7 100%);
  border-style: dotted;
  border-width: 1.5px;
}

/* Interactive hover ring magnify */
.story-item:hover .story-ring-wrapper {
  transform: scale(1.08);
}

/* ANIMATIONS & EFFECTS */
@keyframes ringPulseUnviewed {
  0%, 100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.6);
  }
}

@keyframes ringPulsePremium {
  0%, 100% {
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.25);
  }
  50% {
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.65);
  }
}

@keyframes ringPulseFast {
  0% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.65);
    transform: scale(1.04);
  }
}

@keyframes ringPulseSlow {
  0% {
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.2);
  }
  100% {
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
  }
}