@import "tailwindcss";

@font-face {
    font-family: 'RT-Dyans-Basic';
    src: url('../fonts/RTDyansBasic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@theme {
    --font-sans: "RT-Dyans-Basic", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Oswald", sans-serif;
    --color-primary-bg: #0B0B0B;
    --color-secondary-bg: #111111;
    --color-primary-text: #F5F5F5;
    --color-muted-text: #B8B8B8;
    --color-accent-red: #C4001A;
    --color-danger-red: #FF2A3C;
}

@layer base {
    body {
        background-color: var(--color-primary-bg);
        color: var(--color-primary-text);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0.02em;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-display);
        text-transform: uppercase;
        letter-spacing: normal;
        line-height: 1.1;
        margin: 0;
        font-weight: 700;
    }

    h5,
    h6 {
        font-family: var(--font-sans);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--color-primary-bg);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(196, 0, 26, 0.5);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent-red);
}

.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.transfer-card {
    will-change: transform, opacity, filter;
    transform-origin: center center;
    backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {

    .reveal-on-scroll,
    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}