/* ============================================================
   STATS DASHBOARD STYLES
   Uses global design tokens from ../css/tokens.css
   ============================================================ */

body {
    font-family: var(--font-sans);
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

/* Sidebar overlay (mobile only) */
@media (max-width: 1023px) {
    .sidebar-overlay {
        transform: translateX(-100%);
        transition: transform var(--duration-normal) var(--ease-out);
    }

    .sidebar-overlay.open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease-out);
    }

    .sidebar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Chart loading indicator */
.chart-loading {
    z-index: var(--z-dropdown);
}

.chart-loading-dot {
    width: 6px;
    height: 6px;
    background-color: var(--gray-500);
    border-radius: var(--radius-full);
    animation: chartLoadingPulse 1.2s ease-in-out infinite;
}

@keyframes chartLoadingPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Pageviews flip animation (whole number) */
.pageviews-flip {
    display: inline-block;
    transform-style: preserve-3d;
}

.pageviews-flip.flip {
    animation: pageviewsFlip 250ms linear;
}

@keyframes pageviewsFlip {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

/* Sweeping effect for martintoth.com text */
.martintoth-sweep {
    display: inline-block;
    position: relative;
    color: var(--gray-300);

    background-image: linear-gradient(
        100deg,
        var(--gray-300) 35%,
        var(--gray-100) 45%,
        var(--white) 50%,
        var(--gray-100) 55%,
        var(--gray-300) 65%
    );
    background-size: 400% 100%;
    background-position: 0% 0%;

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: thinkingSweep 6s linear infinite;
}

/* On hover, stop animation and show solid color */
.martintoth-sweep:hover {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--gray-100);
    color: var(--gray-100);
}

@keyframes thinkingSweep {
    from {
        background-position: 400% 0%;
    }
    to {
        background-position: 0% 0%;
    }
}