/* Splash Section */
#splash {
    background-color: #fff;
}

.splash-column {
    position: relative;
    display: flex;
    align-items: center; /* Center the images vertically */
    justify-content: center;
    padding: calc(var(--gutter) * 2);
}

.splash-white-column {
    background-color: #fff;
    grid-column: 1;
    grid-row: 1 / -1;  /* Full height */
}

.splash-video-wrapper {
    grid-column: 2 / 4;  /* Spans columns 2 and 3 */
    grid-row: 1 / -1;    /* Full height */
    position: relative;
    overflow: hidden;
}

.splash-text-column {
    grid-row: 1 / -1;    /* Full height */
    background-color: transparent;
    pointer-events: none;
}

.splash-text-column:nth-of-type(3) {
    grid-column: 2;  /* STATES in column 2 */
}

.splash-text-column:nth-of-type(4) {
    grid-column: 3;  /* Tagline in column 3 */
    padding: calc(var(--gutter) * 2) var(--gutter); /* Reduce horizontal padding for tagline */
}

.splash-text {
    position: relative;
    z-index: 2;
    font-size: var(--font-size-h1);
    font-weight: 700;
    opacity: 0; /* Hidden by default, animated by JS */
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.splash-white-column .splash-text {
    color: #000;
}

.splash-image {
    position: relative;
    z-index: 2;
    /* Remove max-width and max-height - JS will set explicit dimensions */
    /* width and height will be set by JS */
    object-fit: contain;
    opacity: 0; /* Hidden by default, animated by JS */
}

.splash-pleasure-image {
    filter: brightness(0); /* Keep black tint */
    /* JS will size this as the anchor */
}

.splash-tagline {
    position: absolute;
    z-index: 2;
    font-size: var(--font-splash-tagline);
    font-weight: 700;
    opacity: 0;
    color: var(--color-text);
    letter-spacing: 0.05em;
    /* Center between column 3 start (32.7%) and viewport edge (100%) */
    text-align: center;  /* Center-align text within element */
    white-space: nowrap;  /* Prevent line wrapping */
    /* Initial position (JS will override with precise alignment) */
    top: 50%;
}

/* Poster image - visible by default */
.splash-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    opacity: 1;
    /* No transition - just stay visible, video will fade on top */
}

.splash-video-poster.hidden {
    /* Keep visible, video will cover it */
    opacity: 1;
    pointer-events: none;
}

/* Video - hidden by default, fades in on top of poster */
.splash-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0ms;
    /* Force GPU compositing for smoother playback */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.splash-video.visible {
    opacity: 1;
}