/**
 * SWARCS ENGINEERING - HERO KINETIC ENGINE
 * (c) 2006-2026 Software Architectures and Solutions d.o.o. Novi Sad.
 * All Rights Reserved.
 *
 * MOTION PHILOSOPHY:
 * - Hardware-accelerated 'Ken Burns' effect for visual depth.
 * - Fluid typography scaling via CSS clamp function.
 * - Strategic z-index layering for UI integrity.
 */

/*
 * PRIMARY VIEWPORT CONTAINER
 * Absolute boundary for high-impact landing content.
 */
.hero-slider {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 480px;
    background: var(--bg-black);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/*
 * SLIDE STATE CONTROLLER
 * Visibility toggled via hero-slider.js integration.
 */
.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

/*
 * KEN BURNS DYNAMICS
 * Fast Zoom & Translation to simulate architectural perspective.
 */
@keyframes kenBurnsFast {
    0% {
        transform: scale(1.1) translateY(-40px);
    }
    100% {
        transform: scale(1.25) translateY(40px);
    }
}

.slide.active .slide-bg {
    animation: kenBurnsFast 7s ease-in-out forwards;
}

.slide-bg {
    position: absolute;
    /* Buffer zone: Exceeds container to prevent gaps during Y-translation */
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center center;
    will-change: transform;
}

.hero-slider .overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

.text-layer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
    width: 100%;
    max-width: 900px;
}

/*
 * HERO TYPOGRAPHY
 * Optimized for high-contrast branding on cinematic backgrounds.
 */
.emphasis-text {
    font-family: 'Neurochrome', sans-serif;
    font-size: clamp(30px, 6vw, 64px);
    color: var(--text-primary);
    margin-bottom: 15px;
    text-shadow: 4px 6px 8px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

.desc-text {
    font-family: 'Neuropolitical', sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    color: var(--text-primary);
    line-height: 1.6;
    /* High-legibility outline for complex background stabilization */
    text-shadow: var(--ts-hero-outline);
}

/*
 * NAVIGATION OVERLAYS
 * Tactical triggers for manual slide sequencing.
 */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.1);
    font-size: 3.5rem;
    cursor: pointer;
    transition: color 0.3s;
    padding: 20px;
}

.arrow:hover {
    color: rgba(255, 255, 255, 0.7);
}

.prev { left: 10px; }
.next { right: 10px; }