@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
    --gold: #f4c430;
    --crimson: #c41e3a;
}

.tail-container {
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.heading-font {
    font-family: 'Playfair Display', serif;
}

.relative {
    height: 450px;
}

.relative img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.hero-bg {
    background: linear-gradient(rgba(10, 0, 0, 0.7), rgba(30, 0, 0, 0.9)),
                url('../images/hero-bg.jpg') center/cover no-repeat;
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 25px -5px rgb(194 30 58 / 0.4);
}

.explicit-img {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.explicit-img:hover {
    transform: scale(1.12);
    filter: contrast(1.25) saturate(1.6);
}

.neon-text {
    text-shadow:
        0 0 15px #f4c430,
        0 0 30px #c41e3a;
}

.live-dot {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.mobile-hero-text {
    font-size: 2.25rem;
    line-height: 1.05;
}

@media (min-width: 640px) {
    .mobile-hero-text {
        font-size: 3.5rem;
    }
}