/* Global Styles & Utilities */

/* Material Symbols Configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Scroll-Driven Animations using CSS @property and animation-timeline */

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

@keyframes count-up {
    from {
        --num: 0;
    }

    to {
        --num: var(--to);
    }
}

.scroll-counter {
    display: inline-block;
    animation: count-up 1s linear forwards;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
    counter-reset: num var(--num);
}

.scroll-counter::after {
    content: counter(num);
}