/* --- Perus --- */ 
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: Arial, sans-serif; background:#000; overflow:hidden; }

/* --- Tausta --- */
.gallery-background { 
  position: fixed; inset:0; 
  background: url("taustakuva.jpg") center/cover no-repeat; 
  filter: blur(12px) brightness(0.6);
  transition: background-image 0.45s ease;
  z-index: 0; 
}

/* --- Backdrop albums --- */
.backdrop { 
  position: fixed; inset: 0; 
  background: rgba(0,0,0,0.2); 
  backdrop-filter: blur(4px); 
  opacity: 0; pointer-events: none; 
  transition: opacity .45s ease; 
  z-index: 3100;
}

/* --- Topbar --- */
.topbar { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3000; width: auto; }
.topbar-inner { 
  display: flex; align-items: center; gap: 10px; 
  padding: 6px 16px; border-radius: 18px; 
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(200%); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25); 
}
.topbar-title { color:#fff; font-size:14px; font-weight:500; }

/* --- Menu Button --- */
.menu-btn { width: 28px; height: 20px; background:none; border: none; padding:0; display:flex; flex-direction: column; justify-content: space-between; cursor:pointer; z-index: 3100; }
.menu-btn span { height:2px; width:100%; border-radius:4px; background:rgba(255,255,255,0.85); transition: all .35s cubic-bezier(.4,0,.2,1); }
.menu-btn.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity:0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* --- Sidebar --- */
.sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 240px; transform: translateX(-240px); transition: transform .6s cubic-bezier(.2,.8,.2,1); z-index: 2900; display:flex; align-items:flex-start; padding-top: 100px; padding-left: 20px; background: rgba(255,255,255,0.04); backdrop-filter: blur(28px) saturate(180%); border-right: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 80px rgba(0,0,0,0.45); }
.sidebar.open { transform: translateX(0); }
.sidebar-inner { display:flex; flex-direction:column; gap:16px; width: 100%; }
.nav-item { color:#fff; text-decoration:none; font-size:16px; opacity:0.9; }

/* --- Carousel / Stage --- */
.stage { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); perspective: 1200px; z-index: 1000; }
.carousel { position: relative; width: 1200px; height: 400px; transform-style: preserve-3d; transition: transform 0.6s ease; }

/* --- Kortit --- */
.card { position: absolute; left: 50%; top: 50%; width: 280px; height: 160px; border-radius: 16px; overflow: hidden; transition: transform 0.45s ease, opacity 0.45s ease; background: #fff; pointer-events: auto; transform-origin: center center; box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.card img { display:block; width:100%; height:100%; object-fit:cover; backface-visibility: hidden; }

/* --- Info Panel --- */
.info-panel { 
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); 
  width: 280px; padding: 10px; border-radius: 16px; 
  color: #fff; 
  background: rgba(255,255,255,0.02); 
  backdrop-filter: blur(20px) saturate(200%); 
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  text-align: left; 
  transition: transform .35s ease, opacity .35s ease, filter .35s ease; 
  z-index: 3000;
}
.info-panel h2 { margin:0; font-size:16px; }
.info-panel p { margin:6px 0 4px; opacity:0.85; font-size:12px; line-height:1.35; }
.info-panel span { opacity:0.6; font-size:10px; }

/* --- Albums Overlay --- */
.albums-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3300; opacity: 0; transition: opacity .45s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.albums-overlay.open { opacity: 1; pointer-events: auto; }
.albums-inner { width: 750px; max-height: 80%; background: rgba(255,255,255,0.06); border-radius: 20px; padding: 18px; box-shadow: 0 28px 100px rgba(0,0,0,0.45); backdrop-filter: blur(28px) saturate(200%); transition: transform .6s ease, opacity .45s; transform: translateY(20px) scale(0.98); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.albums-inner::-webkit-scrollbar { display: none; }
.albums-overlay.open .albums-inner { transform: translateY(0) scale(1); }

/* --- Album Grid 4 per rivi --- */
.albums-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 16px; }
.album-box { position: relative; padding-bottom: 65%; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; cursor: pointer; transition: transform .35s ease, box-shadow .35s ease; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.album-box:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 48px rgba(0,0,0,0.55); }
.album-label { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgba(255,255,255,0.08); padding: 6px 10px; border-radius: 8px; color: #fff; font-weight:600; font-size:12px; backdrop-filter: blur(10px); text-align:center; }

/* --- Albums Overlay Header --- */
.albums-header h1 { color: #fff; }

/* --- Close button ✕ futuristinen --- */
.close-btn {
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
    transition: all 0.25s ease;
}
.close-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* --- Album Placeholder --- */
.album-placeholder { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 4000; background: rgba(0,0,0,0.85); color: #fff; }
.album-placeholder.open { display:flex; }
.album-placeholder .close-btn.big { position: absolute; right: 16px; top: 16px; padding: 6px 10px; border-radius: 10px; }

/* --- Album Images Grid --- */
.album-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 90%;
  max-height: 80%;
  overflow-y: scroll; /* scroll toimii, mutta palkkia ei näy */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 24px;
}
.album-content::-webkit-scrollbar { display: none; }

.album-content img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.album-content img:hover { transform: scale(1.05); box-shadow: 0 12px 28px rgba(0,0,0,0.45); }

/* --- Fullscreen-kuva --- */
.album-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.album-fullscreen.open { opacity: 1; pointer-events: auto; }
.album-fullscreen img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* --- Responsiivisuus --- */
@media (max-width:1000px){
  .card { width:180px; height:100px; border-radius:10px; }
  .info-panel { width:70%; bottom: 50px; padding:8px; }
  .topbar-inner { padding:2px 10px; gap:6px; border-radius:12px; }
  .topbar-title { font-size:12px; }
  .albums-inner { width:90%; padding:12px; }
  .albums-grid { grid-template-columns: repeat(2, 1fr); gap:10px; }
  .album-content { grid-template-columns: repeat(2, 1fr); }
}