::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}


.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    max-height: 400px;
}

/* Hardware Acceleration Layering */
#eceCanvas {
    /* Tells the browser this element will change constantly */
    will-change: transform, opacity; 
    /* Forces the browser to put the canvas on its own 3D GPU layer */
    transform: translateZ(0); 
    /* Ensures it never intercepts mouse clicks meant for buttons */
    pointer-events: none; 
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
@media (min-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

/* Subtle animated gradient background for the hero section to make glass pop */
.hero-bg {
    background: linear-gradient(-45deg, #f8fafc, #e2e8f0, #f1f5f9, #ffffff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
.dark .hero-bg {
    background: linear-gradient(-45deg, #020617, #0f172a, #1e293b, #020617);
    background-size: 400% 400%;
}
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}