/* parallax.css - Unified parallax system for Serenity Jets & Drones
 * Used across all content pages for consistent hero sections and parallax effects
 */

/* Core parallax container */
.parallax-container {
    position: relative;
    width: 100%;
    height: 75vh;
    /* Standardized to 75vh as required */
    overflow: hidden;
}

/* Parallax layers */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.parallax-hero {
    position: relative;
    height: 65vh !important;
    overflow: hidden;
}

.parallax-hero .parallax-layer.overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-hero .hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    text-align: center;
    padding: 2rem;
    margin: 0 auto;
}


.parallax-container.content-hero {
    height: 60vh;
    /* Slightly shorter than homepage */
}

.parallax-container.content-hero .parallax-content {
    margin: 0 auto;
    /* Center the content vertically and horizontally */
}

/* Background layer with image */
.parallax-layer.background {
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform-origin: center center;
}

/* Overlay with gradient for text readability */
.parallax-layer.overlay {
    background: linear-gradient(180deg, rgba(10, 20, 35, 0.7) 0%, rgba(10, 20, 35, 0.5) 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centering content vertically in the hero section */
    align-items: center;
    text-align: center;
    padding: 2rem;
    /* Standard padding */
}

/* Content within parallax hero sections */
.parallax-content {
    z-index: 3;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    /* Centered horizontally */
    text-align: center;
}

.parallax-content h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.parallax-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: var(--color-platinum);
}

/* Parallax hero with video background */
.parallax-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .parallax-container {
        height: 60vh;
    }

    .parallax-content h1 {
        font-size: 2.5rem;
    }

    .parallax-content p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .parallax-container {
        height: 50vh;
    }

    .parallax-content h1 {
        font-size: 2rem;
    }

    .parallax-content p {
        font-size: 1rem;
    }
}

/* parallax.css - Unified parallax system for Serenity Jets & Drones
 * Used across all content pages for consistent hero sections and parallax effects
 */

/* Core parallax container */
.parallax-container {
    position: relative;
    width: 100%;
    height: 75vh;
    /* Standardized to 75vh as required */
    overflow: hidden;
}

/* Parallax layers */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

/* Background layer with image */
.parallax-layer.background {
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform-origin: center center;
}

/* Overlay with gradient for text readability */
.parallax-layer.overlay {
    background: linear-gradient(180deg, rgba(10, 20, 35, 0.7) 0%, rgba(10, 20, 35, 0.5) 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centering content vertically in the hero section */
    align-items: center;
    text-align: center;
    padding: 2rem;
    /* Standard padding */
}

/* Content within parallax hero sections */
.parallax-content {
    z-index: 3;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    /* Centered horizontally */
    text-align: center;
}

.parallax-content h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.parallax-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: var(--color-platinum);
}

/* Parallax hero with video background */
.parallax-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .parallax-container {
        height: 60vh;
    }

    .parallax-content h1 {
        font-size: 2.5rem;
    }

    .parallax-content p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .parallax-container {
        height: 50vh;
    }
    .parallax-content h1 {
        font-size: 2rem;
    }

    .parallax-content p {
        font-size: 1rem;
    }
}

/* === HERO SEPARATION STYLES === */

/* Static overlay that stays with the video - no parallax */
.parallax-layer.overlay-static {
    background: linear-gradient(180deg, rgba(10, 20, 35, 0.4) 0%, rgba(10, 20, 35, 0.2) 100%);
    z-index: 2;
    pointer-events: none; /* Allow clicks to pass through to content */
}

/* Content wrapper that gets parallax effect */
.parallax-layer.content-wrapper {
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    gap: 2rem; /* Add spacing between hero content and form */
}