@layer pages {
    .home-video {
        position: relative;
        margin: 0;
        padding: 0;
        background: #000;
    }

    .embed-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
    }

    .embed-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
        display: block;
        background: #000;
    }

    .scroll-arrow {
        position: fixed; /* Fixed positioning to keep the arrow relative to the viewport */
        left: 50%;
        transform: translateX(-50%) rotate(45deg); /* Rotate the arrow and center it horizontally */
        border: solid white;
        opacity: 0.5; /* Set opacity to 50% */
        border-width: 0 5px 5px 0;
        display: inline-block;
        padding: 8px;
        background: none;
        animation: bounce 2s infinite; /* Add a bounce animation */
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transition for hiding */
        z-index: 10; /* Ensure the arrow is on top of other content */
    }


    .hidden {
        opacity: 0; /* Hide the arrow */
        visibility: hidden;
    }

    /* Optional: Bounce animation */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateX(-50%) translateY(0) rotate(45deg); /* Maintain the rotation */
        }
        40% {
            transform: translateX(-50%) translateY(-10px) rotate(45deg); /* Maintain the rotation */
        }
        60% {
            transform: translateX(-50%) translateY(-5px) rotate(45deg); /* Maintain the rotation */
        }
    }

    .home-tags-container {
        max-width: 1250px;
        margin: 0 auto; /* Center the container horizontally */
        text-align: center; /* Center the text/content inside the container */
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box; /* Include padding in the width calculation */
        margin-top: 110px;
        margin-bottom: 110px;
    }

    .home-tagline {
        width: 100%;
        text-transform: uppercase;
        text-align: left;
        justify-content: center;
        border: 0px solid white;
    }

    .home-tagline p {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    .home-tagline h1 {
        font-size: calc(3em + 1vw);
        font-weight: 900;
    }

    .home-intro {
        width: 100%;
        font-size: calc(1em + 0.2vw);
        text-align: left;
        justify-content: center;
        margin-bottom: 50px;
        border-left: 2px solid white;
        padding-left: 20px;
        font-style: italic; /* Make the text italic */
    }

    /* Container for the project images */
    .static-projects {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 10px;
    }

    .project-image {
        position: relative;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        z-index: 2;
        border-radius: 10px;
        overflow: hidden;
    }

    .half-width {
        width: calc((100% - 10px) / 2);
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .full-width {
        width: 100%;
        margin: 0;
        padding: 0;
        aspect-ratio: 2 / 1; /* Maintain a 2:1 aspect ratio */
        box-sizing: border-box;
    }

    .project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* Ensure the image takes up the full container */
    }

    .home-title-overlay {
        position: absolute;
        bottom: 30px;
        left: 0;
        color: white;
        background: rgba(0, 0, 0, 0.5); /* Optional: Adds a background to the text for better visibility */
        padding: 10px; /* Optional: Adds some padding around the text */
    }

    .portfolio-type {
        color: #F16056;
        font-size: calc(10pt + 0.2vw);
        text-transform: uppercase;
        margin: 0;
        padding: 0;
    }

    .portfolio-title {
        color: white;
        font-size: calc(8pt + 0.2vw);
        margin: 0;
        padding: 0;
    }
}

/* Gentle reveal for project images */
body.reveal-ready .static-projects .project-image {
    opacity: 0;
    transform: translateY(12px) scale(1.04);
    transition: opacity 500ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

body.reveal-ready .static-projects .project-image.in-view {
    opacity: 1;
    transform: none;
}

/* Staggered delays for a subtle cascade */
body.reveal-ready .static-projects .project-image:nth-child(1) {
    transition-delay: 60ms;
}

body.reveal-ready .static-projects .project-image:nth-child(2) {
    transition-delay: 120ms;
}

body.reveal-ready .static-projects .project-image:nth-child(3) {
    transition-delay: 180ms;
}

body.reveal-ready .static-projects .project-image:nth-child(4) {
    transition-delay: 240ms;
}

body.reveal-ready .static-projects .project-image:nth-child(5) {
    transition-delay: 300ms;
}

body.reveal-ready .static-projects .project-image:nth-child(6) {
    transition-delay: 360ms;
}

body.reveal-ready .static-projects .project-image:nth-child(7) {
    transition-delay: 420ms;
}

body.reveal-ready .static-projects .project-image:nth-child(8) {
    transition-delay: 480ms;
}

body.reveal-ready .static-projects .project-image:nth-child(9) {
    transition-delay: 540ms;
}

body.reveal-ready .static-projects .project-image:nth-child(10) {
    transition-delay: 600ms;
}

body.reveal-ready .static-projects .project-image:nth-child(11) {
    transition-delay: 660ms;
}

body.reveal-ready .static-projects .project-image:nth-child(12) {
    transition-delay: 720ms;
}

/* Tagline + intro gentle zoom/opacity reveal */
body.reveal-ready .home-tags-container .home-tagline,
body.reveal-ready .home-tags-container .home-intro {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 500ms ease, transform 600ms ease;
    will-change: opacity, transform;
}

body.reveal-ready .home-tags-container .home-tagline.in-view,
body.reveal-ready .home-tags-container .home-intro.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.reveal-ready .static-projects .project-image {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.more-news-button {
    text-align: center;
    display: flex;
    width: fit-content;
    align-self: center;
    margin-top: 20px;
}