/* masonry-gallery.css */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.parent-of-masonry-gallery-container {
    position: relative;
    box-sizing: border-box;
}

.masonry-gallery-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.masonry-gallery {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    /* MODIFIED: Removed 'display: grid' and 'gap' to prevent conflict with Masonry JS */
}

.masonry-item {
    box-sizing: content-box;
    position: relative;
    padding: 0;
    z-index: 1;
    border-radius: 1%;
}

.masonry-image {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    border-radius: 1%;
    padding: 3px;
    box-sizing: border-box;
    object-fit: cover;
    /* MODIFIED: Initially hide image and set transition for fade-in effect */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.masonry-image-wrap {
    box-sizing: content-box;
    position: relative;
    padding: 0;
    z-index: 1;
    border-radius: 1%;
    overflow: hidden; 
}
.quarter-circle {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-color: rgba(240, 240, 243, 1);
    border-radius: 50%;
    opacity: 0;
    transform-origin: center;
    z-index: -1;
}

.quarter-circle.top-left {
    top: -50%;
    left: -50%;
    clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
}

.quarter-circle.bottom-right {
    bottom: -50%;
    right: -50%;
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
}

.masonry-title {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 ;
    width: 100% ;
    background-color: white;
    color: black;
    padding: 8px;
    font-size: 6.5vh;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    white-space: nowrap;
    z-index: 100!important;
    overflow:hidden;
}
.masonry-title.land-in {
    bottom: 0;
    opacity: 1;
    transform: translate(0, 100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    background-color: white;
    color: black;
    padding: 8px;
    font-size: 5.5vw;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    z-index: 100!important;
    overflow:hidden;
}


@keyframes slideInTitle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        position: absolute !important;
        bottom: 0 !important;
        z-index: 100;
        transform: translate(0, 0);
    }
}

@keyframes slideOutTitle {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.masonry-item.animating {
    z-index: 100;
    
}
.masonry-title.animate-in {
    animation: slideInTitle 0.8s ease forwards;
}

.masonry-title.animate-out {
    animation: slideOutTitle 0.8s ease forwards;
}

.masonry-image-wrap.animating {
    z-index: 100;
    transition: transform 0.8s ease;
}

.masonry-image-wrap.animating .masonry-image {
    opacity: 1;
   
}

.masonry-image-wrap.animating .quarter-circle {
    opacity: 1;
    animation: spin 2s linear 1;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    1% {
        transform: rotate(90deg);
    }
    99% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* ++ ADDED: Styles for the Skeleton Loading Effect ++ */
.masonry-image-wrap .skeleton-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.masonry-image.loaded {
    opacity: 1; /* This fades the image in once it's loaded */
}
/* -- End of Added Styles -- */


@media (orientation: portrait) {
    .masonry-gallery {
        /* MODIFIED: Removed 'grid-template-columns' */
    }
}

@media (orientation: landscape) {
    .quarter-circle {
        display: none;
    }
}