/* === Who Da Beans v2 Styles === */
:root{
  --bg: #0b0c10;
  --fg: #f7f7f7;
  --muted: #c9c9c9;
  --accent: #ffb65e;
  --accent2: #ff7f6a;
  --card: #15161a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --header-h: 56px;
  --nav-h: 58px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 900px at 50% -10%, rgba(255,182,94,.08), transparent 40%), var(--bg);
  color: var(--fg);
  overscroll-behavior: none;
}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  height: var(--header-h);
  display:flex; align-items:center; justify-content:flex-start;
  padding: .4rem .9rem;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.15), transparent);
}
.brand{display:flex; gap:.75rem; align-items:center}
.wordmark{height:28px; width:auto; display:block}

/* Stage */
.stage{
  position:relative; width:100%;
  height: 100svh; /* occupy full viewport height */
  overflow:hidden; display:grid; place-items:center;
  isolation:isolate;
  touch-action: pan-x; /* allow horizontal gestures, suppress vertical */
  padding-top: var(--header-h);
  padding-bottom: calc(var(--nav-h) + 10px);
}
.backdrop{
  position:absolute; inset: -12vmax; z-index:0;
  filter: blur(70px) saturate(140%);
  opacity:.7;
  transform: scale(1.1);
  background: radial-gradient(1200px 900px at 55% 40%, rgba(255,182,94,.35), rgba(255,127,106,.25) 30%, #0b0c10 70%);
}
.slide{
  position:relative; z-index:1; margin:0;
  width: min(96vw, 1400px);
  height: calc(100% - 4vh); /* leave room for caption */
  display:grid; place-items:center;
}
.slide img{
  width:100%; height:100%;
  object-fit: contain; /* always fully visible */
  border-radius:18px;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  outline: 1px solid rgba(255,255,255,.06);
}
.caption{
  position:absolute; left:50%; bottom: .4rem; transform: translateX(-50%);
  max-width: 90%;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: var(--muted); font-size:.92rem;
  text-align:center;
  backdrop-filter: blur(6px);
}

/* Desktop thumbs */
.thumbs{
  position:absolute; bottom: calc(var(--nav-h) + .5rem); left:50%; transform:translateX(-50%);
  display:none; gap:.4rem; max-width:92vw; overflow:auto; padding:.2rem .3rem;
  background: rgba(0,0,0,.25);
  border-radius:999px; border:1px solid rgba(255,255,255,.06);
  z-index: 2;
}
@media (min-width: 1024px){
  .thumbs{display:flex}
}
.thumbs img{
  width:64px; height:64px; object-fit:cover; border-radius:10px; opacity:.75;
  transition: opacity .2s, transform .2s;
  cursor:pointer;
}
.thumbs img:hover{transform:translateY(-1px)}
.thumbs img.active{outline:2px solid var(--accent); opacity:1}

/* Bottom Nav Bar */
.nav-bar{
  position:fixed; left:50%; bottom:.6rem; transform:translateX(-50%);
  z-index:30;
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.pill-btn{
  appearance:none; border:0; background:#1c1d20; color:var(--fg);
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  box-shadow: var(--shadow);
  cursor:pointer; transition: transform .15s ease, background .2s ease;
  border: 1px solid rgba(255,255,255,.06);
  font-size: 1.05rem;
}
.pill-btn:hover{transform: translateY(-1px); background:#24262a}
.counter{ color: var(--muted); font-size:.9rem; padding:0 .2rem; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:50; display:none;
  background: rgba(0,0,0,.88);
}
.lightbox[aria-hidden="false"]{display:block}
.lightbox-inner{position:absolute; inset:0; display:grid; place-items:center; padding:6vh 4vw}
.lightbox img{max-width:100%; max-height:80vh; border-radius:14px; box-shadow: var(--shadow);}
.lightbox .close{position:absolute; top:1rem; right:1rem}
.lightbox-caption{
  margin-top:.7rem; display:flex; gap:.8rem; align-items:center; justify-content:center;
  flex-wrap:wrap; color:var(--muted);
}
.download{
  display:inline-block; padding:.45rem .7rem; border-radius:999px; background:#202125; color:var(--fg); text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
}

/* Footer */
.site-footer{position:relative; z-index:5; padding:.6rem 1.2rem; color:var(--muted)}
.footer-inner{display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap}
.sep{opacity:.5}
a{color:var(--fg)}
a:hover{text-decoration:underline}

/* Animations */
.fade-in{animation: fade .4s ease both}
@keyframes fade{from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none}}

/* Mobile tweaks */
@media (max-width: 600px){
  body{overflow:hidden} /* prevent vertical scrolling */
}