/* ==========================================
   Reset
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    background: #111;
    font-family: Arial, Helvetica, sans-serif;
    color: white;

}

/* ==========================================
   Fonts Family
========================================== */

h1 {
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
}

p {
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
}

button {
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
}

span {
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
}
#previewTitle {
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
}


/* ==========================================
   Hero Heading
========================================== */

.hero {

    min-height: 5vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px 20px;

}

.hero h1 {

    font-size: clamp(1.7rem, 8vw, 5rem);

    font-weight: 700;

    letter-spacing: -2px;


}

.hero p {

    margin-top: 10px;

    font-size: 1.3rem;

    color: rgba(255, 255, 255, .7);

    max-width: 700px;

    line-height: 1.8;

}


/* ==========================================
   Pinterest Style Gallery
========================================== */

.gallery {

    column-count: 4;
    column-gap: 15px;
    padding: 0.1px;

}

.wallpaper {

    position: relative;
    margin-bottom: 15px;
    break-inside: avoid;

}

.wallpaper img {

    width: 100%;
    border-radius: 18px;
    display: block;
    transition: .3s;

}

.wallpaper:hover img {

    transform: scale(1.03);

}

/* ==========================================
   Preview Download Button
========================================== */

#previewDownload {

    margin-top: 20px;

    padding: 14px 40px;

    border: none;

    border-radius: 50px;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    color: white;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

#previewDownload:hover {

    transform: scale(1.05);

    background: rgba(249, 249, 249, 0.48);

}


/* ==========================================
   Floating Categories
========================================== */

.floating-bar {

    position: fixed;

    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) scale(.96);


    width: clamp(300px, 90vw, 400px);


    padding: 12px 10px;

    border-radius: 35px;

    background: rgba(138, 138, 138, .15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    border: 1px solid rgba(255, 255, 255, .1);

    overflow: hidden;
    cursor: pointer;
    z-index: 100;

    clip-path: inset(0 28% 0 28% round 35px);

    transition:
        transform 0.95s cubic-bezier(.22, 1, .36, 1),

        clip-path 0.95s cubic-bezier(.22, 1, .36, 1);
}

.bar-title {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    font-size: clamp(.95rem, 4vw, 1.3rem);

    white-space: nowrap;
}

.tag-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    margin-top: 0;

    max-height: 0;

    opacity: 0;

    transform: translateY(-10px);

    overflow: hidden;

    transition:
        max-height 1s ease,
        opacity 1s ease,
        transform 1s ease,
        margin-top 1s ease;

}

.floating-bar.open {

    transform: translateX(-50%) scale(1);
    clip-path: inset(0 0 0 0 round 35px);

}

.floating-bar.open .tag-list {

    max-height: 100px;

    margin-top: 18px;

    opacity: 1;

    transform: translateY(0);

}

.tag {

    border: none;
    padding: 10px 18px;
    border-radius: 30px;

    background: rgba(255, 255, 255, .15);

    color: white;

    cursor: pointer;

    transform: translateY(12px);

    opacity: 0;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background 0.3s,
        color 0.3s;

}

.floating-bar.open .tag {

    transform: translateY(0);

    opacity: 1;

}

.floating-bar.closing .tag-list {

    opacity: 0;
    transform: translateY(30px);


    max-height: 0;

    margin-top: 0;

}

.floating-bar.closing {

    transform: translateX(-50%) scale(0.9);

}

.tag:nth-child(1) {
    transition-delay: .05s;
}

.tag:nth-child(2) {
    transition-delay: .10s;
}

.tag:nth-child(3) {
    transition-delay: .15s;
}

.tag:nth-child(4) {
    transition-delay: .20s;
}

.tag:nth-child(5) {
    transition-delay: .25s;
}

.tag:hover {

    background: white;

    color: black;

}

.tag.active {

    background: white;

    color: black;

}


/* ==========================================
   Popup
========================================== */

.popup {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(.5);

    padding: 20px 35px;

    border-radius: 40px;

    background: rgba(255, 255, 255, .15);

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, .25);

    opacity: 0;

    transition: .3s;

    pointer-events: none;

}

.popup.show {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

}


/* ==========================================
   Image Preview
========================================== */

.image-preview {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(0, 0, 0, .35);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    opacity: 0;

    pointer-events: none;

    transition: .3s;

    z-index: 999;

}

.image-preview.show {

    opacity: 1;

    pointer-events: auto;

}

.image-preview img {

    max-width: 100%;
    max-height: 75vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    transform: scale(.8);

    transition: .3s;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);

}

.image-preview.show img {

    transform: scale(1);

}


/* ==========================================
   Image name popup
========================================== */

.preview-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    max-width: 90vw;

    max-height: 90vh;

}

#previewTitle {

    margin-top: 18px;

    color: white;

    font-size: clamp(1rem, 5vw, 5rem);

    font-weight: 500;

}


/* ==========================================
   Responsive
========================================== */

@media(max-width:1200px) {

    .gallery {

        column-count: 3;

    }

}

@media(max-width:768px) {

    .gallery {

        column-count: 2;

    }

}

@media(max-width:500px) {

    .gallery {

        column-count: 2;

    }

}

@media(max-width:300px) {

    .gallery {

        column-count: 1;

    }

}