/* Anime & Comic Typography System */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
    --font-comic: 'Bangers', system-ui;
    /* Big Comic Titles */
    --font-anime: 'Orbitron', 'Rajdhani', sans-serif;
    /* Anime/Mecha Buttons */
    --font-sub: 'Rajdhani', sans-serif;
    /* Subtitles */
}

/* 1. Big Comic Titles */
.font-comic-title {
    font-family: var(--font-comic) !important;
    letter-spacing: 0.05em;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
    /* Improve readability */
    line-height: 1.1;
}

/* 2. Subtitles */
.font-anime-sub {
    font-family: var(--font-sub) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 3. Universal Anime Buttons */
button,
.btn,
a.button,
a.btn,
.tf-btn {
    font-family: var(--font-anime) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 4. Typography Animations */

/* Pop In Effect for Titles */
@keyframes comicPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-comic-pop {
    animation: comicPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: inline-block;
}

/* Glitch Text Effect for Anime aesthetic */
@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(-2deg);
    }

    40% {
        transform: skew(2deg);
    }

    60% {
        transform: skew(-1deg);
    }

    80% {
        transform: skew(1deg);
    }

    100% {
        transform: skew(0deg);
    }
}

.animate-anime-glitch {
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

/* Add hover effect for buttons */
button:hover,
.btn:hover,
a.button:hover,
.tf-btn:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}