/**
 * Card Component with Edge Glow
 * Theme-aware cards with animated edge glow effects
 * Optimized for performance on low-end devices
 */

.card {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 0deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-2), var(--grad-1));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  /* Reduced blur and saturation for better performance */
  filter: blur(4px) saturate(1.1);
  animation: edgeFlow 8s linear infinite;
  opacity: 0.7;
}

@keyframes edgeFlow {
  to {
    transform: rotate(1turn);
  }
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 25px -10px color-mix(in oklab, var(--accent) 35%, transparent),
    0 2px 0 0 color-mix(in oklab, var(--accent-2) 40%, transparent);
}

/* Performance optimization: disable animations for reduced motion or low-end devices */
@media (prefers-reduced-motion: reduce) {
  .card::before {
    animation: none;
    filter: blur(2px) saturate(1.05);
  }
}

/* Static fallback for very low-end devices */
@media (max-width: 480px) and (max-height: 800px) {
  .card::before {
    animation: none;
    filter: none;
    background: linear-gradient(45deg, var(--grad-1), var(--grad-3));
  }
}