/* 
 * Silk Classic Gradients Background for Values Grid 
 * Adapted from original_1_gradients_classic.html
 */

/* Prepare the value card wrapper */
.value-card {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  border-radius: 0 !important; /* Zero border radius as per brand */
  border: 1px solid var(--border-light, #e0e0e0);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
}

[data-theme="dark"] .value-card {
  border-color: var(--border-dark, #333);
}

/* Make sure inner content stays above the pseudo-elements */
.value-card > * {
  position: relative;
  z-index: 2;
}

/* 
 * LIGHT MODE (Default)
 */
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-color: oklch(0.99 0.002 55);
  background-image: 
    radial-gradient(ellipse at 80% 0%, oklch(1.0 0 0) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 40%, oklch(0.96 0.005 55) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 70%, oklch(0.94 0.007 55) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, oklch(0.97 0.004 55) 0%, transparent 50%),
    linear-gradient(135deg, oklch(0.99 0.002 55) 0%, oklch(0.94 0.005 55) 100%);
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
 * DARK MODE 
 */
.value-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-color: oklch(0.10 0.004 55);
  background-image: 
    radial-gradient(ellipse at 80% 0%, oklch(0.18 0.006 55) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 40%, oklch(0.13 0.005 55) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, oklch(0.08 0.003 55) 0%, transparent 50%),
    linear-gradient(135deg, oklch(0.12 0.004 55) 0%, oklch(0.08 0.003 55) 100%);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cross-fade transition logic */
[data-theme="dark"] .value-card::before { opacity: 0; }
[data-theme="dark"] .value-card::after { opacity: 1; }

/* 
 * ICON / ANIMATION ENHANCEMENTS
 * Making them prominent, larger, and adapting colors
 */
.value-card__icon {
  width: 64px !important; /* Increased from 40px */
  height: 64px !important; /* Increased from 40px */
  margin-bottom: 1rem !important;
  color: oklch(0.10 0.004 55) !important; /* Prominent dark color for light mode */
  opacity: 0.75 !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
}

[data-theme="dark"] .value-card__icon {
  color: oklch(0.96 0.003 55) !important; /* Prominent light color for dark mode */
}

/* Hover Animation for Icon */
.value-card:hover .value-card__icon {
  opacity: 1 !important;
  transform: scale(1.15) translateY(-4px); /* Strong scaling and lifting effect */
}

/* Enhancing Hover on the card itself */
.value-card:hover {
  border-color: oklch(0.88 0.02 65) !important;
}
[data-theme="dark"] .value-card:hover {
  box-shadow: 0 15px 35px oklch(0 0 0 / 0.4), 0 5px 15px oklch(0.88 0.02 65 / 0.1);
}
:root:not([data-theme="dark"]) .value-card:hover {
  box-shadow: 0 15px 35px oklch(0.10 0.004 55 / 0.08), 0 5px 15px oklch(0.30 0.01 55 / 0.05);
}