/* =====================================================
   hero-bg.css
   Drop-in hero background system for The Witching Hour
   ===================================================== */

/* Hero section base */
.hero {
    position: relative;
    overflow: hidden;
}

/* Background image layer */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Replace with your chosen hero background image path */
    background-image: url("images/cat-full.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Darken image for readability */
    filter: brightness(0.35) contrast(1.1);
    z-index: 0;
}

/* Overlay layer: mist/fire effects with subtle animation */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 40%, rgba(196,90,44,0.15), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(139,26,26,0.18), transparent 40%);
    z-index: 0;
    background-size: 200% 200%;
    animation: overlayMove 30s linear infinite;
}

/* Hero overlay animation */
@keyframes overlayMove {
    0%   { background-position: 0% 0%, 100% 100%; }
    50%  { background-position: 5% 5%, 95% 95%; }
    100% { background-position: 0% 0%, 100% 100%; }
}

/* Ensure hero content stays above background layers */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Mobile tweaks: reduce overlay intensity and prevent overflow */
@media (max-width: 768px) {
    .hero::before {
        filter: brightness(0.45) contrast(1.05);
    }
    .hero::after {
        background:
            radial-gradient(circle at 25% 45%, rgba(196,90,44,0.08), transparent 40%),
            radial-gradient(circle at 75% 55%, rgba(139,26,26,0.10), transparent 40%);
        animation: overlayMove 45s linear infinite;
    }
}