body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    background-image: url('Imgtr/background.png'); /* */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #0d0d1a;
}

/* --- PARALLAX STARS --- */
#stars, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1; /* */
    background: transparent;
}
#stars { width: 1px; height: 1px; animation: animStar 50s linear infinite; }
#stars2 { width: 2px; height: 2px; animation: animStar 100s linear infinite; }
#stars3 { width: 3px; height: 3px; animation: animStar 150s linear infinite; }

@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

/* --- HEADER & TITLES --- */
.header-container {
    position: absolute; /* */
    top: 40px;
    left: 20px;
    width: 320px;
    z-index: 100;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.header-content { pointer-events: auto; }
.back-btn { display: inline-block; text-decoration: none; color: #fff; font-family: sans-serif; font-weight: bold; font-size: 0.9rem; margin-bottom: 8px; }
h1.country-title { font-family: 'Aileron', sans-serif; font-size: 3.5rem; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 5px; line-height: 0.9; }
.counter-wrapper { font-family: 'Aileron', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; margin-top: 5px; display: flex; align-items: baseline; gap: 8px; }

/* --- MASONRY GRID --- */
.masonry-wrapper {
    width: 94%;
    max-width: 1800px;
    margin: 0 auto;
    column-count: 5; /* */
    column-gap: 15px;
    padding-top: 40px;
    padding-bottom: 100px;
    position: relative;
    z-index: 10;
}
.photo-item {
    break-inside: avoid;
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease-out;
    cursor: zoom-in;
}
.photo-item img { width: 100%; height: auto; display: block; border-radius: 12px; transition: transform 0.5s ease; }
.photo-item:hover img { transform: scale(1.05); }
.photo-item.visible { opacity: 1; transform: translateY(0); }

/* --- LIGHTBOX --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}
.lightbox-content { max-width: 90%; max-height: 85%; border-radius: 8px; transform: scale(0.9); transition: 0.3s; }
.lightbox.active .lightbox-content { transform: scale(1); }
.close-btn { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 50px; cursor: pointer; }
/* --- FAIRY DUST CURSOR CONTAINER --- */
.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows you to click photos through the sparkles */
    z-index: 10000; /* Keeps sparkles on the very top layer */
}

.info {
  font-family: monospace;
  position: absolute;
  line-height: 20px;
  font-size: 14px;
  left: 20px;
  top: 20px;
}