@font-face {
    font-family: "Oswald";
    src: url("../fonts/Oswald-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
}

:root {
    --bg-primary: #050505;
    --bg-secondary: #120606;
    --bg-tertiary: #1b0808;
    --text-primary: #d6b4b4;
    --text-secondary: #8f5f5f;
    --accent: #ac0606;
    --accent-soft: rgba(172, 6, 6, 0.28);
    --accent-glow: rgba(172, 6, 6, 0.16);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: "Oswald", sans-serif;
    background:
        radial-gradient(circle at 50% 32%, var(--accent-soft), transparent 34%),
        radial-gradient(circle at 50% 68%, var(--accent-glow), transparent 40%),
        linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 38%, var(--bg-primary) 100%);
    color: var(--text-primary);
}

.hero {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
    align-content: center;
}

.hero > * + * {
    margin-top: 1rem;
}

.hero__title {
    position: relative;
    display: inline-block;
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 0 22px rgba(172, 6, 6, 0.12);
}

.hero__title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(172, 6, 6, 0.05) 47%,
        rgba(172, 6, 6, 0.45) 50%,
        rgba(172, 6, 6, 0.05) 53%,
        transparent 60%
    );
    background-size: 250% 100%;
    background-position: 160% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    animation: title-sweep 16.5s linear infinite;
    pointer-events: none;
}

.hero__subtitle {
    position: relative;
    display: inline-block;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    letter-spacing: 0.35em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hero__subtitle::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.04) 47%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.04) 53%,
        transparent 60%
    );
    background-size: 250% 100%;
    background-position: 160% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    animation: subtitle-sweep 16.5s linear infinite;
    pointer-events: none;
}

@keyframes title-sweep {
    0% {
        background-position: 160% 50%;
        opacity: 0;
    }

    2% {
        opacity: 1;
    }

    33.333% {
        background-position: -160% 50%;
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        background-position: -160% 50%;
        opacity: 0;
    }
}

@keyframes subtitle-sweep {
    0% {
        background-position: 160% 50%;
        opacity: 0;
    }

    35% {
        background-position: 160% 50%;
        opacity: 0;
    }

    37% {
        opacity: 1;
    }

    56% {
        background-position: -160% 50%;
        opacity: 1;
    }

    58% {
        opacity: 0;
    }

    100% {
        background-position: -160% 50%;
        opacity: 0;
    }
}