@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Jersey+25+Charted&family=Silkscreen:wght@400;700&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: transparent;
    color: rgb(255, 255, 255);
    position: relative;
    caret-color: transparent;
    overflow: hidden;
    font-family: 'Cinzel', serif;
}






.film-strip {
    --s: 1.43835616438356vh; /* control the size */
    --c: #14141486;
    --img-width: calc(24 * var(--s));
    --img-height: calc(18 * var(--s));
    --img-margin: calc(2 * var(--s));
    --gap: calc(4 * var(--s)); /* Gap between images */

    width: 186.986301369863vh;
    height: calc(18 * var(--s));

    background: 
        conic-gradient(at 50% var(--s), var(--c) 75%, #0000 0) 
        0 0/calc(2 * var(--s)) calc(100% - var(--s)) padding-box;
    
    border: calc(.7 * var(--s)) solid var(--c);
    box-sizing: content-box;
    z-index: 9999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translate(3.785515320334262vw, 36.78082191780822vh);
    overflow: hidden;
}

.film-strip::after {
    content: '';
    position: absolute;
    top: var(--img-margin);
    left: var(--img-margin);
    right: var(--img-margin);
    bottom: var(--img-margin);
    background: url('image.jpg') 0 50%/var(--img-width) var(--img-height) space;
    filter: invert(100%);
}




/* Splash Page Styles */
#landing-page {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1.0); /* Adjust the scale value as needed */
}






.circle-container {
    display: flex;
    position: absolute;
    width: 80vw;
    height: 80vw;
    max-width: 600px;
    max-height: 600px;
    min-width: 200px; /* Ensures it doesn't get too small */
    min-height: 200px; /* Ensures it doesn't get too small */
    
}

.semi-circle-group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* Adjusted semi-circle styling */
.semi-circle {
    width: 40vw; /* Consistent width for both left and right */
    height: 80vw; /* Consistent height for both left and right */
    max-width: 300px;
    max-height: 600px;
    position: absolute;
    top: 0;
    background-color: #090909;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Adjusted shadow for symmetry */
}

.semi-circle.left {
    border-radius: 40vw 0 0 40vw;
    left: 0;
    box-shadow: -10px 0 15px rgba(0, 0, 0, 0.5);
}

.semi-circle.right {
    border-radius: 0 40vw 40vw 0;
    right: 0;
    box-shadow: 10px 0 15px rgba(0, 0, 0, 0.5);
}






.circle {
    display: flex;
    width: 35vw; /* Responsive width */
    height: 35vw; /* Keep it a circle with equal width and height */
    min-width: 350px; /* Minimum width to ensure it's not too small */
    min-height: 350px; /* Minimum height to ensure it's not too small */
    border-radius: 50%;
    border: 2vw solid rgb(11, 11, 11); /* Scaled border */
    background-color: transparent;
    position: fixed; /* Fixed positioning to ensure it stays in the viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}



.cutout-circle {
    display: flex;
    width: 2vw; /* Responsive width */
    padding-bottom: 2vw; /* Maintain circular shape */
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    box-shadow: inset 0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.3); /* Scaled shadow */
}














.half-circle-group {
    display: flex;
    justify-content: center; /* Space between the two half-circles */
    align-items: center;
    height: 450px; /* 1.5 times the previous height */
    position: absolute; /* Use absolute positioning */
    width: 945px; /* 1.5 times the previous combined width */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for the width and height */
    z-index: 20202;
}

.half-circle {
    display: flex;
    width: 450px; /* 1.5 times the previous width */
    height: 225px; /* 1.5 times the previous height */
    background-color: none;
    border-top-left-radius: 240px;  /* 225px of height + 15px of border */
    border-top-right-radius: 240px; /* 225px of height + 15px of border */
    border: 22.5px solid rgb(10, 10, 10); /* 1.5 times the previous border thickness */
    border-bottom: 0; /* No bottom border for a half-circle effect */
    position: relative;
    transition: all 1.5s ease-in-out;
}

.half-circle.left {
    left: 11.9%; /* Adjust left positioning for the scaled-up size */
    transform: rotate(-90deg); /* Rotate for the left half-circle */
    
}

.half-circle.right {
    right: 11.9%; /* Adjust right positioning for the scaled-up size */
    transform: rotate(90deg); /* Rotate for the right half-circle */
    
}







.cutout-square {
    display: flex;
    width: 16vw; /* Base width for scaling */
    height: 11vw; /* Base height for scaling */
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.3); /* Scaled shadow */
    z-index: 50;
    animation: flickerOnLoad 2s forwards;
}

.border-square {
    display: flex;
    width: 17vw; /* Match the width of the .cutout-square */
    height: 13vw; /* Match the height of the .cutout-square */
    background-color: transparent;
    border: 1.5vw solid rgb(18, 18, 18); /* Scaled border relative to the container */
    border-radius: 0vw; /* Border radius scales with the container */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1600; /* Ensure it’s above the .cutout-square but below the image */
}

.cutout-square img {
    display: flex;
    object-fit: cover;
    width: 100%; /* Scale with a slight reduction to fit within the border */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
    border-radius: 0.1vw; /* Scaled border radius */
    filter: invert(100%) opacity(75%) brightness(1) contrast(1) sepia(0%) saturate(12) sepia(0%);
    box-shadow: none; /* Scaled shadow */
    position: relative;
    z-index: 150; /* Ensure it’s above the .border-square */
}













.bottom-rectangle {
    display: flex;
    width: 20vw; /* Responsive width */
    height: 60vw; /* Responsive height */
    background-color: #080808;
    position: absolute;
    bottom: -30vw; /* Adjusted bottom position */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 6vw 1.5vw rgba(0, 0, 0, 0.5); /* Scaled shadow */
    z-index: -10;
}





















/* Media Queries for Smaller Screens */
@media (max-width: 768px) {
    .circle-container {
        max-width: 600px;
        max-height: 600px;
        min-width: 200px; /* Ensures it doesn't get too small */
        min-height: 200px; /* Ensures it doesn't get too small */
    }

    .semi-circle {
        min-width: 150px;
        min-height: 300px;
        max-width: 300px;
        max-height: 600px;
    }

    .circle {
        min-width: 350px; /* Minimum width to ensure it's not too small */
        min-height: 350px;
        max-width: 400px;
        max-height: 400px;
    }

    .cutout-square {
        min-width: 105px;
        min-height: 75px;
        max-width: 300px;
        max-height: 220px;
    }

    .border-square {
        min-width: inherit; /* Inherit from cutout-square */
        min-height: inherit;
        max-width: inherit;
        max-height: inherit;
    }

    .half-circle-group {
        min-width: 350px; /* Minimum width to ensure it's not too small */
        min-height: 350px;
        max-width: 630px;
        max-height: 300px;
    }

    .half-circle {
        min-width: 200px;
        min-height: 100px;
        max-width: 300px;
        max-height: 150px;
    }

    .bottom-rectangle {
        min-width: 100px;
        min-height: 300px;
        max-width: 300px;
        max-height: 900px;
    }
}



















/* Splash Page Styles */
@keyframes fadeOutMoveLeft {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-20vw); }
}

@keyframes fadeOutMoveRight {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(20vw); }
}

@keyframes fadeOutMoveDown {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20vh); }
}

@keyframes fadeOutMoveRotateLeft {
    0% { 
        opacity: 1; 
        transform: rotate(-90deg) translateY(-50%);
        left: 11.9%;
    }
    100% { 
        opacity: 0; 
        transform: rotate(-90deg) translateY(-50%);
        left: -100%; /* Move it completely off-screen to the left */
    }
}

@keyframes fadeOutMoveRotateRight {
    0% { 
        opacity: 1; 
        transform: rotate(90deg) translateY(-50%);
        right: 11.9%;
    }
    100% { 
        opacity: 0; 
        transform: rotate(90deg) translateY(-50%);
        right: -100%; /* Move it completely off-screen to the right */
    }
}

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

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

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

@keyframes fadeOutFilmStrip {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.fade-out-film-strip {
    animation: fadeOutFilmStrip 1.5s forwards;
}

@keyframes flickerOnLoad {
    0% { background-color: rgba(255, 255, 255, 0); }
    21% { background-color: rgba(255, 255, 255, 0.358); }
    34% { background-color: rgba(255, 255, 255, 0); }
    55% { background-color: rgba(255, 255, 255, 0.5813); }
    89% { background-color: rgba(255, 255, 255, 0); }
    100% { background-color: rgba(255, 255, 255, 1); }
}



.fade-out-left {
    animation: fadeOutMoveLeft 1.5s forwards;
}

.fade-out-right {
    animation: fadeOutMoveRight 1.5s forwards;
}

.fade-out-down {
    animation: fadeOutMoveDown 1.5s forwards;
}

.fade-out {
    animation: fadeOut 1.5s forwards;
}

.fade-out-half-circle-left {
    animation: fadeOutMoveRotateLeft 1.5s forwards;
}

.fade-out-half-circle-right {
    animation: fadeOutMoveRotateRight 1.5s forwards;
}

.fade-out-circle {
    animation: fadeOutCircle 1.5s forwards;
}

.fade-out-background {
    animation: fadeOutBackground 1.5s forwards;
}

/* New Fade-In Animation for Main Application */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1.5s forwards;
}