/* BACKGROUND */
#background {
    position: fixed;
    inset: 0;
    z-index: 0;

    /* gradient overlay + image */
    background-image: 
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)),
        url('/background.jpg');

    /* image positioning */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* BODY / WALL */
html, body{
    margin:0; padding:0; height:100%; font-family:system-ui,sans-serif; overflow-x:hidden; background:#000;
}
.wall{
    position: relative; z-index:1;
    display:flex; flex-direction:column; justify-content:center;
    gap:10vh; padding:4vh 0;
}

/* ROWS & TRACKS */
.row{ display:flex; overflow:hidden; position:relative; height:25vh; }
.track{
    display:flex; gap:40px; width:max-content; will-change:transform;
}
.track-0{ animation: scroll-left 150s linear infinite; }
.track-1{ animation: scroll-right 170s linear infinite; }
.track-2{ animation: scroll-left 130s linear infinite; }

@keyframes scroll-left{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes scroll-right{0%{transform:translateX(-50%);} 100%{transform:translateX(0);} }

/* ITEM / BLOB */
.item{
    flex:0 0 auto;
    width:180px; height:20vh;
    background-size:cover; background-position:center;
    border-radius:40% 60% 55% 45% / 55% 40% 60% 45%;
}
/* Blob varianten */
.blob-1 { animation: blob1 18s ease-in-out infinite alternate; }
.blob-2 { animation: blob2 22s ease-in-out infinite alternate; }
.blob-3 { animation: blob3 20s ease-in-out infinite alternate; }
.blob-4 { animation: blob4 25s ease-in-out infinite alternate; }

@keyframes blob1 {
  0%{border-radius:40% 60% 55% 45% / 55% 40% 60% 45%;}
  100%{border-radius:60% 40% 45% 55% / 40% 55% 45% 60%;}
}

@keyframes blob2 {
  0%{border-radius:50% 50% 70% 30% / 30% 60% 40% 70%;}
  100%{border-radius:30% 70% 40% 60% / 60% 30% 70% 40%;}
}

@keyframes blob3 {
  0%{border-radius:60% 40% 30% 70% / 50% 60% 40% 50%;}
  100%{border-radius:40% 60% 70% 30% / 60% 40% 50% 60%;}
}

@keyframes blob4 {
  0%{border-radius:45% 55% 65% 35% / 35% 65% 45% 55%;}
  100%{border-radius:65% 35% 45% 55% / 55% 45% 65% 35%;}
}
@keyframes blobMorph{
    0%{border-radius:40% 60% 55% 45% / 55% 40% 60% 45%;}
    50%{border-radius:60% 40% 45% 55% / 40% 55% 45% 60%;}
    100%{border-radius:45% 55% 60% 40% / 60% 45% 40% 55%;}
}

/* LIGHTBOX */
#lightbox{
    position:fixed; inset:0; background:rgba(0,0,0,.85);
    display:flex; justify-content:center; align-items:center;
    opacity:0; pointer-events:none; transition:opacity .3s; z-index:9999;
}
#lightbox.show{opacity:1; pointer-events:auto;}
#lightbox img{max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 0 40px rgba(0,0,0,.8);}

/* MOBIEL */
@media(max-width:768px){
    .item{width:120px;height:15vh; animation:blobMorph 25s ease-in-out infinite alternate;}
    .track{gap:20px;}
    .wall{gap:8vh;}
}

.visitor-counter{
    position:fixed;
    bottom:20px;
    right:20px;
    color:#fff;
    font-size:14px;
    opacity:.7;
    z-index:9999;
    background:rgba(0,0,0,0.5);
    padding:6px 10px;
    border-radius:20px;
    backdrop-filter:blur(5px);
}