/* MyFinance website shared styles */

:root {
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
}

body.is-menu-open {
    overflow: hidden;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 3px;
}

.app-logo-mark {
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.18);
}

.hero-surface {
    background:
        linear-gradient(rgba(79, 70, 229, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.045) 1px, transparent 1px),
        #f8faff;
    background-size: 32px 32px;
}

.product-glass {
    backdrop-filter: blur(18px);
}

.metric-line {
    position: relative;
    overflow: hidden;
}

.metric-line::after {
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.18), transparent);
    content: "";
    height: 100%;
    left: -100%;
    position: absolute;
    top: 0;
    width: 100%;
    animation: metric-scan 6s ease-in-out infinite;
}

@keyframes metric-scan {
    0%, 55% { left: -100%; }
    75%, 100% { left: 100%; }
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .metric-line::after {
        animation: none;
        display: none;
    }
}