body {
    font-family: 'Helvetica Neue', sans-serif;
    /* background-image: url('assets/bugged-out-assets/buggedout_gif.gif'); */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/buggedout_gif.gif');
    background-color: black;
    /* White background */
    color: #333;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    touch-action: none;
    /* No perspective needed for 2D flow */
}

/* Base container */
.album-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    touch-action: none;
}
.bg{
    position: absolute;
    /* object-fit: cover; */
    z-index: -100;
}

h1 {
    position: absolute;
    z-index: 1000;
    color: #ffffff;
    letter-spacing: -1.5px;
    line-height: 0.8;
    margin-left: 0.5rem;
    text-shadow:
        0 54px 0 white,
        0 108px 0 white,
        0 162px 0 white,
        0 216px 0 white,
        0 270px 0 white,
        0 324px 0 white,
        0 378px 0 white,
        0 432px 0 white,
        0 486px 0 white,
        0 540px 0 white,
        0 594px 0 white,
        0 648px 0 white,
        0 702px 0 white,
        0 756px 0 white,
        0 810px 0 white,
        0 864px 0 white,
        0 918px 0 white,
        0 972px 0 white,
        0 1026px 0 white,
        0 1080px 0 white;
}

.out {
    font-style: italic;
}

/* Container for frames - no 3D transform needed on wrapper */
.spiral-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* Reset transforms */
    transform: none !important;
}

/* Individual Photo Frames */
.film-frame {
    position: absolute;
    width: 400px;
    /* Increased from 200px */
    height: auto;
    /* Will be positioned by JS */
    will-change: transform;
    /* Optimize for movement */
    z-index: 1;
}

/* The Photo Image */
.film-photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* Transition only transform (scale) on the image itself to avoid conflict with frame movement */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover Effect (Desktop) */
/* We scale the IMAGE, not the frame, so the frame position logic stays clean */
@media (width >=600px) {
    .film-frame:hover .film-photo {
        transform: scale(1.5);
        /* Good zoom */
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }


}

/* Zoomed state for Tap-to-Zoom (Mobile) */
.film-photo.zoomed {
    transform: scale(1.5) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    z-index: 10001;
}

.film-frame.zoomed-frame {
    z-index: 10000 !important;
}

.frame-caption {
    display: none;
}

@media (width < 600px) {

    h1 {
        text-shadow: none;
        font-size: 2rem;
    }

    .film-frame {
        width: 300px;
        /* Smaller width for mobile */
    }
    .film-photo.zoomed {
    transform: scale(1.7) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    z-index: 10001;
}

}