/**
 * MIREKBYGG - Hero Section
 * Cinematic, immersive hero experience
 * Optimized for iOS Safari video autoplay
 */

.hero {
    position: relative;
    height: 100vh;      /* Fallback for legacy browsers */
    height: 100dvh;     /* Modern dynamic viewport */
    height: 100svh;     /* Stable viewport on iOS Safari */
    height: 100lvh;     /* Covers expanded toolbar state */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@supports (-webkit-touch-callout: none) {
    .hero {
        height: -webkit-fill-available;
    }
}

/* === BACKGROUND === */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: var(--z-behind);
}

.hero-video-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Background video element */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%) scale(1.02);
    object-fit: cover;
    object-position: center;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    /* iOS Safari compatibility */
    -webkit-transform: translate(-50%, -50%) scale(1.02) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Placeholder - now shows poster image as background */
.video-placeholder {
    position: absolute;
    inset: 0;
    /* Use poster image as fallback background */
    background: 
        linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.6) 100%),
        url('../../assets/images/mirek_bygg.webp') center/cover no-repeat;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out;
}

/* Hide the placeholder content (play button etc) by default */
.placeholder-content {
    display: none !important;
}

/* When video is ready and playing, fade it in */
.hero-background.is-video-ready .hero-video {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    -webkit-transform: translate(-50%, -50%) scale(1.06) translateZ(0);
}

/* Fade out placeholder when video is playing */
.hero-background.is-video-ready .video-placeholder {
    opacity: 0;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    pointer-events: none;
}

/* === CONTENT === */
.hero-content {
    position: relative;
    z-index: var(--z-base);
    text-align: center;
    max-width: 900px;
    padding: var(--nav-height) var(--container-padding) var(--space-16);
}

/* Badge */
.hero-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    opacity: 0;
    animation: fadeInDown var(--transition-slow) var(--ease-out) forwards;
    animation-delay: 0.5s;
}

.badge-line {
    width: 40px;
    height: 1px;
    background: var(--gradient-gold);
}

.badge-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-gold);
}

/* Title */
.hero-title {
    margin-bottom: var(--space-8);
}

.title-line {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-7xl);
    font-weight: var(--font-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    opacity: 0;
    animation: fadeInUp var(--transition-slow) var(--ease-out) forwards;
}

.title-line-1 {
    animation-delay: 0.7s;
}

.title-line-2 {
    animation-delay: 0.9s;
}

.title-line-3 {
    animation-delay: 1.1s;
}

/* Subtitle */
.hero-subtitle {
    font-size: var(--text-xl);
    font-weight: var(--font-light);
    line-height: var(--leading-relaxed);
    color: var(--color-silver);
    margin-bottom: var(--space-10);
    opacity: 0;
    animation: fadeInUp var(--transition-slow) var(--ease-out) forwards;
    animation-delay: 1.3s;
}

.subtitle-accent {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-gold);
    font-style: italic;
}

/* CTA Buttons */
.hero-cta {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    opacity: 0;
    animation: fadeInUp var(--transition-slow) var(--ease-out) forwards;
    animation-delay: 1.5s;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .title-line {
        font-size: var(--text-6xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-lg);
    }
}

@media (max-width: 768px) {
    .hero-content {
        padding-top: calc(var(--nav-height) + var(--space-8));
    }
    
    .title-line {
        font-size: var(--text-5xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
    }
    
    .hero-cta {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    /* On mobile, use smaller poster image positioning */
    .video-placeholder {
        background-position: center top;
    }
}

@media (max-width: 480px) {
    .hero-badge {
        margin-bottom: var(--space-6);
    }
    
    .badge-line {
        width: 20px;
    }
    
    .title-line {
        font-size: var(--text-4xl);
    }
    
    .hero-subtitle br {
        display: none;
    }
}

/* Viewports with limited height */
@media (max-height: 800px) and (min-width: 769px) {
    .hero {
        justify-content: flex-start;
    }

    .hero-content {
        padding-top: calc(var(--nav-height) + var(--space-6));
        padding-bottom: var(--space-10);
    }

    .title-line {
        font-size: var(--text-6xl);
    }

    .hero-subtitle {
        margin-bottom: var(--space-8);
    }
}