/* WEYWOT HERO v8.0 - TYPOGRAPHY TITAN */

.weywot-hero-wrapper {
    position: relative; width: 100%; height: 90vh; min-height: 600px;
    background: #000; overflow: hidden;
    /* Font domyślny z Customizera */
    font-family: var(--h-font, 'Helvetica Neue', sans-serif);
    
    /* Fallback Vars */
    --h-top: #39ff14; --h-h1: #fff; --h-desc: #ddd; --h-btn: #fff;
    --h-ov-color: #000; --h-ov-op: 0.7;
    --s-top: 14px; --s-h1: 64px; --s-desc: 18px; --s-btn: 16px;
}

/* --- CORE STRUCTURE --- */
.weywot-hero-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 1.2s ease-in-out; z-index: 1;
    display: flex; align-items: center; justify-content: center;
}
.weywot-hero-slide.active { opacity: 1; z-index: 2; }

/* TŁO */
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transform: scale(1); transition: transform 8s ease; z-index: 0;
}
.weywot-hero-slide.active .hero-bg { transform: scale(1.1); }

/* --- WARSTWY --- */
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-bottom-gradient {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, var(--h-ov-color), transparent);
    opacity: var(--h-ov-op);
}

.hero-flex {
    position: relative; z-index: 5; width: 100%; max-width: 1200px; padding: 0 20px;
    display: flex; flex-direction: column; justify-content: center; height: 100%;
}
.hero-content { max-width: 900px; } /* Szerszy dla dużych fontów */

/* --- TYPOGRAFIA (Dynamiczna) --- */
.hero-top {
    display: block; font-weight: 700; text-transform: uppercase; margin-bottom: 20px;
    font-size: var(--s-top); /* Dynamiczny rozmiar */
    color: var(--h-top);
    letter-spacing: 3px;
}

.hero-head {
    font-size: var(--s-h1); /* Dynamiczny rozmiar */
    line-height: 1.1; margin-bottom: 25px; font-weight: 800; text-transform: uppercase;
    color: var(--h-h1); text-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.hero-desc {
    font-size: var(--s-desc); /* Dynamiczny rozmiar */
    line-height: 1.6; margin-bottom: 35px; font-weight: 400;
    color: var(--h-desc);
}

.hero-btn {
    display: inline-block; padding: 18px 50px;
    font-size: var(--s-btn); /* Dynamiczny rozmiar */
    border: 2px solid var(--h-btn); color: var(--h-btn); background: var(--h-btn-bg);
    font-weight: 700; text-transform: uppercase; text-decoration: none; 
    transition: 0.3s; cursor: pointer; letter-spacing: 1px;
}
.hero-btn:hover { background: var(--h-btn); color: #000; box-shadow: 0 0 20px rgba(255,255,255,0.4); }

/* --- STYLE SPECYFICZNE (Tylko układy i tła, fonty biorą z głównego) --- */
.style-neon .hero-overlay { background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.4)); }
.style-neon .hero-flex { align-items: center; text-align: center; }
.style-neon .hero-head { text-shadow: 0 0 20px rgba(57, 255, 20, 0.3); }

.style-nasa .hero-overlay { background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.95) 100%); }
.style-nasa .hero-flex { align-items: center; text-align: center; }
.style-nasa .hero-head { letter-spacing: -2px; }

.style-classic .hero-overlay { background: rgba(0,0,0,0.6); }
.style-classic .hero-flex { align-items: flex-start; text-align: left; }
.style-classic .hero-desc { border-left: 4px solid var(--h-top); padding-left: 20px; }

.style-fashion .hero-overlay { background: rgba(20,20,20,0.3); }
.style-fashion .hero-flex { align-items: center; text-align: center; }
.style-fashion .hero-content { border: 1px solid rgba(255,255,255,0.4); padding: 40px; background: rgba(0,0,0,0.3); backdrop-filter: blur(5px); }
.style-fashion .hero-btn { border-top:0; border-left:0; border-right:0; padding: 10px 0; }

.style-glitch .hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); background-size: 4px 4px; background-image: linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px); }
.style-glitch .hero-flex { align-items: flex-end; text-align: right; padding-bottom: 100px; }
.style-glitch .hero-content { transform: skew(-10deg); border-right: 5px solid var(--h-top); padding-right: 30px; }
.style-glitch .hero-head, .style-glitch .hero-desc, .style-glitch .hero-btn { transform: skew(10deg); }

.style-gradient .hero-overlay { background: linear-gradient(135deg, rgba(63,94,251,0.7) 0%, rgba(252,70,107,0.7) 100%); }
.style-gradient .hero-flex { align-items: center; text-align: center; }
.style-gradient .hero-btn { background: #fff; color: #fc466b; border-radius: 50px; border: none; }

/* ANIMATIONS */
.anim-1, .anim-2, .anim-3, .anim-4 { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.weywot-hero-slide.active .anim-1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.weywot-hero-slide.active .anim-2 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.weywot-hero-slide.active .anim-3 { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.weywot-hero-slide.active .anim-4 { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

/* NAV & MOBILE */
.hero-nav button { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: rgba(255,255,255,0.4); font-size: 40px; cursor: pointer; transition: 0.3s; z-index: 10; }
.hero-nav button:hover { color: var(--h-top); transform: scale(1.2); }
.prev { left: 20px; } .next { right: 20px; }

@media (max-width: 768px) {
    .weywot-hero-wrapper { height: 100vh; --s-h1: 36px !important; --s-desc: 16px !important; }
    .hero-content { padding: 0 10px; }
}