:root {
    --max-zoom: 1.3;
    --transition-duration: 1.2s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    /* Remove the padding that was pushing content down */
    /* scroll-behavior: smooth; */ /* Optional: uncomment if you want smooth scrolling */
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.background-section {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0;
    transition: opacity var(--transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    transform: scale(1);
    will-change: transform, opacity;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
}

.background-section.active {
    opacity: 1;
}

.background-1 {
    background-image: url('/templates/schnitzelstubntemplate/images/back1.jpg');
}

.background-2 {
    background-image: url('/templates/schnitzelstubntemplate/images/back2.jpg');
}

.content {
    position: relative;
    z-index: 1; /* Lower than nav/main/footer but higher than background */
}

.section {
    min-height: 100vh;
}

.section-2 {
    min-height: 200vh;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .background-section {
        transition: opacity 0.8s ease;
    }
    
    :root {
        --max-zoom: 1.1;
    }
}

/* Zoom sections - these are just for triggering the background effect */
.zoom-sections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: -1; /* Behind content but above background */
}

.zoom-sections .section {
    height: 100vh; /* Each section should be viewport height */
}

.zoom-sections .section-2 {
    height: 200vh; /* Second section taller for more scroll range */
}

/* Ensure content has proper spacing */
.content {
    position: relative;
    z-index: 2; /* Above both background and zoom sections */
}


/* Background container should be behind everything */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Behind zoom sections */
}