:root {
    --dkbrown: #351e0f;
    --mdbrown: #512727;
    --ltbrown: #fff5EA;
    --orange: #db8e31;
    --yellow: #f7c35a;
}

/* Reset and Layout */
body, html {
margin: 0;
padding: 0;
width: 100%;
background-color: var(--dkbrown); /* Fallback color based on assets */
}

.hero-container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.hero-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}

/* Animations */
@keyframes slideLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

@keyframes slideRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Sequencing & Special Effects */
.bg-layer {
z-index: 1;
}

.left-arm {
z-index: 2;
opacity: 0;
animation: slideLeft 1200ms ease-in-out forwards;
animation-delay: 400ms;
}

.right-arm {
z-index: 3;
opacity: 0;
animation: slideRight 1200ms ease-in-out forwards;
animation-delay: 400ms;
}

.shadow-layer {
z-index: 4;
opacity: 0;
animation: fadeIn 3600ms ease forwards;
animation-delay: 1600ms;
}

.splash-layer {
z-index: 5;
opacity: 0;
animation: fadeIn 400ms forwards;
animation-delay: 1550ms;
mix-blend-mode: multiply;
}

.award-ribbon {
position: absolute;
top: 0;
right: 80px;
z-index: 10;
filter: drop-shadow(0 4px 8px rgba(231, 118, 0, .4));
}

.vw-100 {
    display: block;
    width: 100vw;
}

.video-container {
    position: relative;
    width: 100vw;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .award-ribbon {
        right: 20px;
        width: 33.3vw;
    }

    .card-section:not(.hero-scroll-wrapper) {
        height: auto;
        display: block;
    }

    .card-section:not(.hero-scroll-wrapper) .card-content {
        height: auto;
        display: block;
    }

    .card-section:not(.hero-scroll-wrapper) .card-content img.vw-100 {
        height: auto;
        width: 100vw;
        display: block; /* Ensure no inline spacing below image */
    }
}

/* Scroll Trigger Styles */
.hero-scroll-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.hero-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    /*max-width: 800px;*/
    text-align: center;
    color: white;
    font-family: 'League Gothic', sans-serif;
    font-size: 48px;
    line-height: 1.1em;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    /* Improve readability with league gothic text spacing */
    letter-spacing: 0.01em;
}

@media screen and (max-width: 599px) {
    .hero-text-overlay {
        width: 90%;
        font-size: 36px;
        line-height: 1.2em;
        letter-spacing: 0.02em;
    }
}

/* Stacked Cards Transitions */

.card-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adding background color so cards obscure the ones behind them */
    background-color: #f7c35a;
    overflow: hidden;
    /* Optional shadow for depth */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
    /* Ensure cards render on top of previous ones, specifically the hero */
    z-index: 10;
}

/* Ensure the very first section (hero) doesn't have a top shadow */
.hero-scroll-wrapper.card-section {
    box-shadow: none;
    z-index: 1;
}

.card-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center top; /* Scale from top */
}

.card-content img.vw-100 {
    width: 100%;
    height: 100vh; /* Fill card */
    object-fit: cover; /* Cover the whole card */
}

.video-card {
    background-color: var(--dkbrown); /* Fallback */
    position: relative;
    overflow: hidden;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Under content but over section bg */
}

.video-card .card-content {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Over the background image */
}