/* Fade-in animation */
.fade-in {
    animation: fadeIn 0.8s;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glossy Card Effect */
.card-glossy {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 16px; /* Increased from 12px for a softer look */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), /* Softer, more diffused shadow */
                inset 0 1px 1px rgba(255, 255, 255, 0.2), /* Inner highlight for top edge */
                inset 0 -1px 1px rgba(0, 0, 0, 0.1); /* Inner shadow for bottom edge */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border to define the edge */
    padding: 2rem; /* Standardized padding */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
    position: relative; /* Needed for potential pseudo-elements if we add more layers */
    overflow: hidden; /* Ensures pseudo-elements or content don't break rounded corners */
}

.card-glossy:hover {
    transform: translateY(-5px) scale(1.01); /* Subtle lift and scale */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.25),
                inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}

/* Glowing Text for Stats - to be applied to specific stat elements */
.stat-value-glowing {
    color: #E0E0E0; /* Base color for the text, light gray */
    text-shadow:
        0 0 5px rgba(52, 152, 219, 0.7),  /* Light blue glow - adjust color as needed */
        0 0 10px rgba(52, 152, 219, 0.5),
        0 0 15px rgba(52, 152, 219, 0.3);
    animation: pulse-glow 2s infinite alternate; /* Subtle pulsing animation */
}

@keyframes pulse-glow {
    0% {
        text-shadow:
            0 0 5px rgba(52, 152, 219, 0.6),
            0 0 10px rgba(52, 152, 219, 0.4),
            0 0 15px rgba(52, 152, 219, 0.2);
    }
    100% {
        text-shadow:
            0 0 7px rgba(52, 152, 219, 0.8),  /* Slightly stronger glow */
            0 0 15px rgba(52, 152, 219, 0.6),
            0 0 25px rgba(52, 152, 219, 0.4);
    }
}

/* Ensure the dark theme is maintained for content within the glossy card */
.card-glossy h1, .card-glossy h2, .card-glossy h3, .card-glossy p, .card-glossy span, .card-glossy div {
    color: #E0E0E0; /* Light gray for text, can be overridden by specific utility classes */
}

/* Specific styles for elements that might be dynamically added to the card */
.card-glossy .stat-label { /* Assuming labels for stats might exist */
    font-size: 0.9rem;
    color: #B0B0B0; /* Slightly dimmer than main text */
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

/* Glowing Chart Icon Effect */
.chart-icon-glow {
  /* We want the glow to be based on the icon's own color.
     Using multiple text-shadows can achieve this.
     The key is to use semi-transparent versions of 'currentColor'.
     However, 'currentColor' in text-shadow might not always yield the desired visual,
     so a bright, near-white color is often more reliable for a generic glow.
     Let's try a soft white glow that can be layered.
  */
  animation: chart-icon-pulse 2.5s infinite alternate;
  /* Add a default non-animated shadow for browsers that might struggle or if animation is turned off */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),
               0 0 12px rgba(255, 255, 255, 0.3);
}

@keyframes chart-icon-pulse {
  0% {
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.4),  /* Soft white glow */
      0 0 10px rgba(255, 255, 255, 0.2),
      0 0 15px rgba(220, 220, 255, 0.2); /* Slightly bluish white for depth */
  }
  100% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.7),
      0 0 15px rgba(255, 255, 255, 0.5),
      0 0 25px rgba(220, 220, 255, 0.3);
  }
}