/**
 * Elite+ - Additional Micro-interactions & Visual Polish
 * Fine-tuned details for a premium feel
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gradient button shimmer */
.btn-primary {
  background-size: 200% auto;
  background-position: left center;
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  background-position: right center;
}

/* Button press feedback */
.btn:active {
  transform: scale(0.97) translateY(1px);
}

/* Disabled button fade */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none !important;
}

.btn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card hover enhancement - no shine sweep */
.card:hover {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nav item magnetic effect */
.nav-item {
  position: relative;
  z-index: 1;
}

.nav-item:hover {
  z-index: 2;
}

/* Active indicator slide */
.nav-item.active::before {
  animation: slideGrow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideGrow {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 60%;
    opacity: 1;
  }
}

/* Nav badge pulse on new items */
.nav-badge.new {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Input glow animation */
input:focus,
textarea:focus,
select:focus {
  animation: inputGlow 0.3s ease-out forwards;
}

@keyframes inputGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }
}

/* Placeholder animation */
input::placeholder,
textarea::placeholder {
  transition: all 0.3s ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.5;
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICON ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Icon breathing animation */
.icon-breathe {
  animation: iconBreathe 3s ease-in-out infinite;
}

@keyframes iconBreathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Icon spin on hover */
.icon-spin-hover:hover {
  animation: spin 0.5s ease-in-out;
}

/* Icon bounce on interaction */
.icon-bounce-click:active {
  animation: bounce 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAT BOX POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat value shimmer */
.hero-stat-value,
.stat-value {
  position: relative;
  display: inline-block;
}

.hero-stat-value::after,
.stat-value::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: shimmerText 3s infinite;
  animation-delay: 1s;
}

@keyframes shimmerText {
  0%, 90% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Stat box hover lift with shadow */
.hero-stat:hover {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACHIEVEMENT CARD POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Achievement unlock glow */
.achievement-card.unlocked {
  position: relative;
}

.achievement-card.unlocked::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: inherit;
  opacity: 0.3;
  filter: blur(8px);
  z-index: -1;
  animation: achievementGlow 2s ease-in-out infinite;
}

@keyframes achievementGlow {
  0%, 100% {
    opacity: 0.3;
    filter: blur(8px);
  }
  50% {
    opacity: 0.5;
    filter: blur(12px);
  }
}

/* Achievement icon pop on hover */
.achievement-card:hover .ach-icon {
  animation: iconPop 0.4s ease;
}

@keyframes iconPop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE & TAG POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Badge subtle glow */
.badge {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.badge:hover {
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

/* PRO badge special effects - unified golden style */
.pro-badge,
.nav-badge.pro {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pro-badge:hover,
.nav-badge.pro:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal backdrop blur enhancement */
.modal {
  backdrop-filter: blur(12px) saturate(150%);
}

/* Modal content shadow layers */
.modal-content {
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Modal close button hover */
.modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: rotate(90deg) scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dropdown shadow and border */
.dropdown-menu {
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Dropdown item slide effect */
.dropdown-item {
  position: relative;
}

.dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 70%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.2s ease;
}

.dropdown-item:hover::before {
  width: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Progress bar shine */
.progress-bar-fill {
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShine 2s infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE & CHECKBOX POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Checkbox check animation */
input[type="checkbox"]:checked {
  animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkPop {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Toggle switch slide with glow */
.toggle-switch:checked {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIP POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tooltip shadow and border */
.tooltip {
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Tooltip arrow */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVATAR POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Avatar border glow */
.user-avatar,
.avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 20px rgba(99, 102, 241, 0.2);
}

.user-avatar:hover,
.avatar:hover {
  box-shadow: 0 0 0 2px var(--surface), 0 0 30px rgba(99, 102, 241, 0.4);
}

/* Avatar status indicator pulse */
.avatar-status {
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING SPINNER POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Spinner with gradient */
.spinner {
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-right-color: var(--purple);
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

/* Pulse loader */
.pulse-loader {
  display: flex;
  gap: 8px;
}

.pulse-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulseLoader 1.4s ease-in-out infinite;
}

.pulse-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.pulse-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulseLoader {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Animated scrollbar thumb */
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXT SELECTION POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

::-moz-selection {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINK UNDERLINE ANIMATION
   ═══════════════════════════════════════════════════════════════════════════ */

a:not(.btn):not(.nav-item) {
  position: relative;
  display: inline-block;
}

a:not(.btn):not(.nav-item)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a:not(.btn):not(.nav-item):hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* GPU acceleration for smooth animations */
.card,
.btn,
.nav-item,
.hero-stat,
.achievement-card,
.modal-content {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Remove will-change after animation */
.card:not(:hover),
.btn:not(:hover),
.nav-item:not(:hover) {
  will-change: auto;
}