.hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 15vw, 10rem);
    line-height: 0.9; color: white;
    text-shadow: 2px 2px 0px #ff00ff, -2px -2px 0px #00f3ff;
    position: relative; z-index: 10;
    /* käyttäjän pitää voida valita teksti */
    pointer-events: auto;
    user-select: text;
}

/* SVG-otsikko (inline SVG) */
.hero-title-svg {
    position: relative;
    z-index: 10;
    display: inline-block;
    max-width: min(92vw, 1200px);
}

.hero-title-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Saavutettava mutta visuaalisesti piilotettu H1 (SVG-otsikon kanssa) */
.hero-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



.hero {
    width: 100%; margin: 0; max-width: none;
    height: 100vh; background: #000; display: flex; align-items: center;
    justify-content: center; text-align: center; position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    z-index: 20; color: white; overflow: hidden;
    isolation: isolate;
}

.hero::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    /* z-index: 5; pointer-events: none; */
}

.hero h1 {
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(4rem, 15vw, 10rem);
    line-height: 0.9; color: white; 
    text-shadow: 2px 2px 0px #ff00ff, -2px -2px 0px #00f3ff;
    position: relative; z-index: 10; pointer-events: none;
}

.slider-container { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
    overflow: hidden;
}

.slider-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    clip-path: polygon(0% 0%, 0% 0%, -20% 100%, -20% 100%);
    object-position: center top;
}

.slider-image.active { 
    z-index: 1; 
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); 
}

.slider-image.next { 
    z-index: 2; 
    animation: revealImage 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; 
}

@keyframes revealImage { 
    to { clip-path: polygon(0% 0%, 150% 0%, 130% 100%, -20% 100%); } 
}

.strips-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 10; pointer-events: none; 
}

.white-strip {
    position: absolute; top: -20%; height: 140%;
    transform: skewX(-20deg); left: -50%;
    box-shadow: 0 0 15px currentColor; 
    will-change: left;
}

.strip-moving { 
    left: 120% !important; 
    transition: left 1.5s cubic-bezier(0.4, 0.0, 0.2, 1); 
}

@media (max-width: 768px) {
    .hero { clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); }
}