/* Halloween theme: loaded after style.css when private/theme.php returns 'halloween' */

:root {
    --halloween-orange: #ff8a2b;
    --halloween-purple: #8a4dff;
}

/* Backgrounds */
.hero-section,
.page-cadastro, .page-download, .page-tutorial, .page-news, .page-info,
.page-rankings, .page-store, .page-panel, .page-rules {
    background-image: url('../../img/theme/halloween-bg.jpg');
    background-image: image-set(url('../../img/theme/halloween-bg.webp') type('image/webp'), url('../../img/theme/halloween-bg.jpg') type('image/jpeg'));
    background-position: center center;
}
.store-bg-overlay {
    background: linear-gradient(rgba(15, 17, 21, 0.88), rgba(15, 17, 21, 0.94)), url('../../img/theme/halloween-bg.jpg');
    background-size: cover;
    background-position: center;
}
@media (max-width: 900px) {
    .hero-section {
        background-image: url('../../img/theme/halloween-bg-mobile.jpg');
        background-image: image-set(url('../../img/theme/halloween-bg-mobile.webp') type('image/webp'), url('../../img/theme/halloween-bg-mobile.jpg') type('image/jpeg'));
        background-position: center top;
    }
}

/* Hero: warm vignette that fades into the page below */
.hero-section .hero-overlay {
    background:
        radial-gradient(ellipse at 50% 38%, rgba(0,0,0,0) 0%, rgba(10,6,14,0.25) 45%, rgba(10,6,14,0.75) 100%),
        linear-gradient(180deg, rgba(10,6,14,0.35) 0%, rgba(10,6,14,0) 25%, rgba(10,6,14,0) 70%, #0f1115 100%);
}

/* Floating embers */
.hero-section::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 80%, rgba(255,170,80,0.9), transparent),
        radial-gradient(2px 2px at 28% 92%, rgba(255,140,60,0.8), transparent),
        radial-gradient(1.5px 1.5px at 44% 85%, rgba(255,200,120,0.9), transparent),
        radial-gradient(2px 2px at 63% 95%, rgba(255,150,70,0.8), transparent),
        radial-gradient(1.5px 1.5px at 78% 88%, rgba(255,190,110,0.9), transparent),
        radial-gradient(2px 2px at 90% 82%, rgba(255,130,50,0.8), transparent),
        radial-gradient(1.5px 1.5px at 55% 78%, rgba(200,140,255,0.7), transparent);
    background-repeat: no-repeat;
    animation: halloweenEmbers 9s linear infinite;
    opacity: 0.85;
}
@keyframes halloweenEmbers {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.85; }
    100% { transform: translateY(-70vh); opacity: 0; }
}

/* Logo: orange halo behind it + flickering glow */
.hero-section .logo-container { position: relative; }
.hero-section .logo-container::before {
    content: '';
    position: absolute; left: 50%; top: 52%; z-index: -1;
    width: 120%; height: 140%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255,138,43,0.38) 0%, rgba(138,77,255,0.16) 38%, rgba(0,0,0,0) 68%);
    filter: blur(8px);
    animation: halloweenHalo 4s ease-in-out infinite;
    pointer-events: none;
}
.hero-section .main-logo {
    filter:
        drop-shadow(0 0 2px rgba(255,220,160,0.9))
        drop-shadow(0 0 18px rgba(255,138,43,0.65))
        drop-shadow(0 0 42px rgba(138,77,255,0.35))
        drop-shadow(0 6px 14px rgba(0,0,0,0.9));
    animation: halloweenFlicker 5s ease-in-out infinite;
}
@keyframes halloweenHalo {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes halloweenFlicker {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,220,160,0.9)) drop-shadow(0 0 18px rgba(255,138,43,0.65)) drop-shadow(0 0 42px rgba(138,77,255,0.35)) drop-shadow(0 6px 14px rgba(0,0,0,0.9)); }
    48% { filter: drop-shadow(0 0 2px rgba(255,220,160,0.9)) drop-shadow(0 0 24px rgba(255,138,43,0.8)) drop-shadow(0 0 50px rgba(138,77,255,0.45)) drop-shadow(0 6px 14px rgba(0,0,0,0.9)); }
    52% { filter: drop-shadow(0 0 2px rgba(255,220,160,0.8)) drop-shadow(0 0 14px rgba(255,138,43,0.55)) drop-shadow(0 0 36px rgba(138,77,255,0.3)) drop-shadow(0 6px 14px rgba(0,0,0,0.9)); }
}
/* Hero texts stay readable over the brighter image */
.hero-section .hero-subtitle { color: #ffc46b !important; text-shadow: 0 0 12px rgba(255,138,43,0.55), 2px 2px 4px #000 !important; }
.hero-section .hero-desc { color: #e6dccf !important; }

/* Header logo with a subtle warm glow */
.nav-logo-img { filter: drop-shadow(0 0 8px rgba(255,138,43,0.45)); }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .hero-section::after, .hero-section .logo-container::before, .hero-section .main-logo { animation: none; }
}

/* Keeps the embers inside the hero */
.hero-section { overflow: hidden; }

/* Inner pages: lighter overlay so the theme shows behind the content (still dark enough to read) */
.page-cadastro::before, .page-download::before, .page-tutorial::before, .page-news::before,
.page-info::before, .page-rankings::before, .page-store::before, .page-rules::before {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,138,43,0.10) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(13,10,17,0.80) 0%, rgba(13,10,17,0.88) 35%, rgba(13,10,17,0.93) 100%);
}

/* Phones: no big logo; taller hero with texts and buttons at the bottom so the art shows on top */
@media (max-width: 768px) {
    .hero-section .logo-container { display: none; }
    .hero-section {
        min-height: 88vh; min-height: 88svh;
        align-items: flex-end;
        padding: 100px 0 40px 0;
    }
}