/* Resume Button with Dynamic Gradient */
.resume-gradient-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  
  /* Dynamic gradient using theme colors */
  background: linear-gradient(
    135deg,
    var(--ui-color-primary-600) 0%,
    var(--ui-color-primary-500) 50%,
    color-mix(in srgb, var(--ui-color-primary-500) 80%, #ec4899 20%) 100%
  );
  
  /* Glow effect */
  box-shadow: 
    0 0 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
    0 10px 25px color-mix(in srgb, var(--ui-color-primary-600) 30%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

.resume-gradient-button:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 40px color-mix(in srgb, var(--ui-color-primary-500) 60%, transparent),
    0 0 60px color-mix(in srgb, var(--ui-color-primary-400) 40%, transparent),
    0 15px 35px color-mix(in srgb, var(--ui-color-primary-600) 40%, transparent),
    0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Shine effect on hover */
.resume-gradient-button::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.5s ease;
}

.resume-gradient-button:hover::before {
  left: 100%;
}

/* Dark mode adjustments */
.dark .resume-gradient-button {
  background: linear-gradient(
    135deg,
    var(--ui-color-primary-500) 0%,
    var(--ui-color-primary-600) 50%,
    color-mix(in srgb, var(--ui-color-primary-600) 80%, #ec4899 20%) 100%
  );
  
  box-shadow: 
    0 0 35px color-mix(in srgb, var(--ui-color-primary-400) 50%, transparent),
    0 10px 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .resume-gradient-button:hover {
  box-shadow: 
    0 0 50px color-mix(in srgb, var(--ui-color-primary-400) 70%, transparent),
    0 0 80px color-mix(in srgb, var(--ui-color-primary-300) 50%, transparent),
    0 15px 40px color-mix(in srgb, var(--ui-color-primary-500) 50%, transparent),
    0 6px 20px rgba(0, 0, 0, 0.4);
}