/********************************************
* Main Viewport Background
* Creates the primary background layer that fills
* the entire viewport and stays fixed during scroll
********************************************/
.viewport-background {
    /* Fixed positioning ensures background stays in place while content scrolls */
    position: fixed;
    /* Negative z-index places this behind all other content layers */
    z-index: -2;
    /* Use viewport units to guarantee full screen coverage */
    height: 100vh;
    /* Full viewport height */
    width: 100vw;
    /* Full viewport width */
    /* Background image settings for proper scaling and tiling */
    background-size: auto 100vh;
    /* Maintain image width ratio while scaling height to viewport */
    background-position: center;
    /* Center the background image in the viewport */
    background-repeat: repeat-x;
    /* Only repeat the background horizontally */ }

/********************************************
* Viewport Background Blur Effect
* Creates a semi-transparent overlay with blur
* that covers the entire viewport background
********************************************/
.viewport-background::before {
    /* Required for pseudo-element to render properly */
    content: '';
    /* Match parent's fixed positioning for consistent scrolling */
    position: fixed;
    /* Ensure overlay covers entire viewport */
    width: 100%;
    height: 100%;
    /* Create semi-transparent dark overlay for depth */
    background: rgba(0, 0, 0, 0.2);
    /* Apply blur effect with cross-browser support */
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    /* Safari support */
    /* Prevent overlay from interfering with user interactions */
    pointer-events: none; }

/********************************************
* Background Image Assignments
* Sets the background images for different sections
* using CSS variables for easy updating
********************************************/
.viewport-background {
    /* Main background image from CSS variable */
    background-image: var(--background-image); }

.content-background, .header-background-container {
    /* Darker variant of background for content areas */
    background-image: var(--background-dark-image); }

/********************************************
* Content and Header Base Layout
* Establishes core positioning and structure
* for main content and header containers
********************************************/
.content-container, .header {
    /* Center containers horizontally */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Set up vertical flex layout */
    align-content: center;
    /* Allow content to flow outside container if needed */
    overflow: unset;
    /* Use dynamic width from CSS variable */
    width: var(--content-after-padding); }

.content-container {
    height: 100%; }

/********************************************
* Background Elements Base Styling
* Common properties for content and header
* background elements
********************************************/
.content-background, .header-background {
    /* Keep backgrounds fixed during scroll */
    position: fixed;
    /* Maintain aspect ratio while filling viewport height */
    background-size: auto 100vh;
    /* Prevent background image from repeating */
    background-repeat: no-repeat; }

/********************************************
* Main Content Background
* Specific styling for the content area's
* background layer with inset shadows
********************************************/
.content-background {
    /* Position behind content but above viewport background */
    z-index: -1;
    /* Full viewport height coverage */
    height: 100vh;
    /* Center horizontally */
    left: 50%;
    transform: translateX(-50%);
    /* Maintain specific aspect ratio for layout consistency */
    aspect-ratio: 768 / 1080;
    /* Center background image */
    background-position: center;
    /* Add inset shadows on both sides */
    box-shadow: 15px 0 10px -20px rgba(255, 255, 255, 0.45) inset, -15px 0 10px -20px rgba(255, 255, 255, 0.45) inset; }

/********************************************
* Content Area Styling
* Defines the main content area dimensions
* and spacing
********************************************/
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Ensure minimum height from CSS variable */
    min-height: var(--content-min-height);
    /* Add vertical padding only */
    padding: var(--inner-content-padding-height) 0; }

/********************************************
* Header Background Configuration
* Sets up the header's background layer
* dimensions and positioning
********************************************/
.header-background {
    /* Dynamic height calculation */
    height: calc(var(--header-height));
    /* Full width coverage */
    width: 100%;
    /* Create positioning context for children */
    position: relative; }


/********************************************
* Header Background Container
* Wrapper for header background with specific
* styling and positioning
********************************************/
.header-background-container {
    /* Use flexbox for alignment */
    display: flex;
    align-items: start;
    /* Position background image at top */
    background-position: top;
    /* Maintain aspect ratio while filling viewport height */
    background-size: auto 100vh;
    /* Prevent background image from repeating */
    background-repeat: no-repeat;
    /* Allow height to adjust to content */
    height: fit-content;
    /* Add top padding from CSS variable */
    padding-top: calc(var(--content-padding-height)); }

/********************************************
* Header Placeholder
* Creates space for fixed header to prevent
* content overlap
********************************************/
.header-placeholder-container {
    /* Match header's top padding */
    padding-top: calc(var(--content-padding-height)); }

/********************************************
* Fixed Header Styling
* Configures the fixed header that stays
* at top during scroll
********************************************/
.header {
    /* Force fixed positioning with highest specificity */
    position: fixed !important;
    /* Hide overflow content */
    overflow: hidden;
    /* Set width from CSS variable */
    width: var(--content-after-padding);
    /* Calculate total height including padding */
    height: calc(var(--header-height) + var(--content-padding-height)); }

/********************************************
* Header Backdrop
* Styling for header's backdrop element
********************************************/
.header-backdrop {
    /* Adjust height to content */
    height: fit-content;
    /* Add top padding */
    padding-top: calc(var(--content-padding-height));
    /* Round width calculation to nearest pixel */
    width: 100%;
    /* Position at top */
    top: 0;
    /* Remove box shadow */
    box-shadow: none !important;
    /* Use flexbox with top alignment */
    display: flex;
    align-items: start; }

/********************************************
* Mobile/Tablet Landscape View
* Adjustments for wide but short viewports
********************************************/
@media (min-aspect-ratio: 16/9) and (max-height: 540px) {
    /* Adjust container widths and remove padding */
    .content-container, .header {
        padding: 0 0;
        max-width: unset;
        min-width: unset;
        width: 80%; }
    /* Add specific top padding to content container */
    .content-container {
        padding-top: 80px; }
    /* Configure background for landscape view */
    .content-background, .header {
        width: 80%;
        background: var(--background-dark-image) top/auto 100vh repeat-x; }
    /* Set fixed header height */
    .header, .header-backdrop {
        height: 80px; }
    /* Adjust minimum content height */
    .content {
        min-height: calc(100vh - 150px); } }

/********************************************
* Portrait Mode Adjustments
* Modifications for narrow viewport ratios
********************************************/
@media (max-aspect-ratio: 768/1080) {
    /* Remove width constraints on header elements */
    .header, .header-backdrop,
    .header-background-container, header-placeholder-container {
        max-width: unset;
        min-width: unset; }
    /* Full width content container */
    .content-container {
        width: 100%; }
    /* Add horizontal and vertical padding to content */
    .content {
        padding: 0 var(--inner-content-padding-width);
        margin-bottom: 10px; } }