/* ═══════════════════════════════════════════════
   바밤바 나이트클럽 — "DRUM BEAT" THEME
   Fiesta Orange #ff6b35 + Midnight Blue #0f0f2d
   Class prefix: bb-
   ═══════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
.bb-body{
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  background:#0f0f2d;
  color:#e8e0d8;
  line-height:1.75;
  overflow-x:hidden;
}

/* ── FIRST BEAT header ── */
.bb-pulse-header{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:radial-gradient(ellipse at center,#1a1a45 0%,#0f0f2d 70%);
}
.bb-pulse-ring{
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(255,107,53,.15);
  animation:bb-pulse 3s ease-out infinite;
}
.bb-ring-1{width:300px;height:300px;animation-delay:0s}
.bb-ring-2{width:500px;height:500px;animation-delay:1s}
.bb-ring-3{width:700px;height:700px;animation-delay:2s}
@keyframes bb-pulse{
  0%{transform:scale(.8);opacity:.6}
  100%{transform:scale(1.4);opacity:0}
}
.bb-header-core{position:relative;z-index:2;padding:2rem}
.bb-bpm-tag{
  display:inline-block;
  background:#ff6b35;
  color:#0f0f2d;
  font-weight:800;
  font-size:.85rem;
  padding:.35rem 1.2rem;
  border-radius:2rem;
  letter-spacing:.15em;
  margin-bottom:1.5rem;
}
.bb-main-title{
  font-size:clamp(2.2rem,6vw,4.5rem);
  font-weight:900;
  color:#fff;
  text-shadow:0 0 60px rgba(255,107,53,.3);
  margin-bottom:.75rem;
}
.bb-sub-beat{
  font-size:clamp(1rem,2.5vw,1.4rem);
  color:#ff6b35;
  font-weight:600;
  line-height:1.6;
  margin-bottom:2rem;
}
.bb-heartbeat-line{
  width:120px;
  height:3px;
  background:linear-gradient(90deg,transparent,#ff6b35,transparent);
  margin:0 auto 1.5rem;
  animation:bb-beat 1.2s ease-in-out infinite;
}
@keyframes bb-beat{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(1.5)}
}
.bb-location-stamp{
  font-size:.95rem;
  color:#8a8aab;
  letter-spacing:.05em;
}

/* ── Section common ── */
.bb-section-kick{
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:900;
  color:#ff6b35;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:.5rem;
}
.bb-section-subtitle{
  text-align:center;
  font-size:1.05rem;
  color:#b0a8c0;
  margin-bottom:2.5rem;
}
.bb-beat-border{
  height:4px;
  background:repeating-linear-gradient(90deg,#ff6b35 0,#ff6b35 20px,transparent 20px,transparent 40px);
  margin:0;
}

/* ── RHYTHM SECTION ── */
.bb-rhythm-section{
  padding:4rem 1.5rem;
  max-width:1100px;
  margin:0 auto;
}
.bb-drum-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
  margin-top:1rem;
  margin-bottom:2rem;
}
.bb-drum-pad{
  border:3px solid;
  border-radius:12px;
  padding:2rem 1.5rem;
  transition:transform .2s,box-shadow .2s;
}
.bb-drum-pad:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,107,53,.2)}
.bb-pad-kick{border-color:#ff6b35;background:rgba(255,107,53,.06)}
.bb-pad-snare{border-color:#ffa040;background:rgba(255,160,64,.06)}
.bb-pad-hihat{border-color:#ffcc00;background:rgba(255,204,0,.06)}
.bb-pad-tom{border-color:#ff8560;background:rgba(255,133,96,.06)}
.bb-pad-label{
  display:inline-block;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.2em;
  padding:.2rem .8rem;
  border-radius:1rem;
  background:#ff6b35;
  color:#0f0f2d;
  margin-bottom:.75rem;
}
.bb-pad-title{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:.75rem}
.bb-pad-desc{font-size:.92rem;color:#c5bdd0;line-height:1.8}

/* ── TEMPO CHANGES ── */
.bb-tempo-section{
  padding:4rem 1.5rem;
  background:linear-gradient(180deg,#0f0f2d 0%,#151540 100%);
}
.bb-tempo-split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  max-width:900px;
  margin:0 auto;
}
.bb-tempo-card{
  padding:2rem;
  border-radius:16px;
}
.bb-tempo-slow{
  background:linear-gradient(135deg,rgba(255,107,53,.08),rgba(255,107,53,.02));
  border-left:5px solid #ff6b35;
}
.bb-tempo-fast{
  background:linear-gradient(135deg,rgba(255,204,0,.08),rgba(255,204,0,.02));
  border-left:5px solid #ffcc00;
}
.bb-tempo-bpm{
  font-size:.8rem;
  font-weight:800;
  color:#ff6b35;
  letter-spacing:.15em;
  margin-bottom:.75rem;
}
.bb-tempo-title{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:1rem}
.bb-tempo-list{list-style:none;padding:0}
.bb-tempo-list li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:.6rem;
  font-size:.92rem;
  color:#c5bdd0;
}
.bb-tempo-list li::before{
  content:'♪';
  position:absolute;
  left:0;
  color:#ff6b35;
}

/* ── SOLO TIME ── */
.bb-solo-section{
  position:relative;
  padding:4rem 1.5rem;
  max-width:800px;
  margin:0 auto;
  text-align:center;
}
.bb-solo-spotlight{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,107,53,.12),transparent 70%);
  pointer-events:none;
}
.bb-solo-card{
  background:rgba(255,255,255,.04);
  border:2px solid rgba(255,107,53,.25);
  border-radius:16px;
  padding:2rem;
  margin-bottom:2rem;
}
.bb-solo-heading{font-size:1.15rem;font-weight:800;color:#ff6b35;margin-bottom:1rem}
.bb-solo-text{font-size:.95rem;color:#c5bdd0;line-height:1.9;text-align:left}
.bb-solo-highlights{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.bb-highlight-chip{
  background:#ff6b35;
  color:#0f0f2d;
  font-size:.82rem;
  font-weight:700;
  padding:.4rem 1rem;
  border-radius:2rem;
}

/* ── THE BRIDGE ── */
.bb-bridge-section{
  padding:4rem 1.5rem;
  background:#0d0d28;
}
.bb-bridge-timeline{
  max-width:700px;
  margin:0 auto;
  position:relative;
  padding-left:3rem;
}
.bb-bridge-timeline::before{
  content:'';
  position:absolute;
  left:1rem;top:0;bottom:0;
  width:3px;
  background:linear-gradient(to bottom,#ff6b35,#ffcc00,#ff6b35);
}
.bb-bridge-node{
  position:relative;
  margin-bottom:2.5rem;
}
.bb-node-time{
  position:absolute;
  left:-3rem;
  top:.2rem;
  width:2.5rem;
  text-align:center;
  font-size:.75rem;
  font-weight:800;
  color:#ff6b35;
  background:#0d0d28;
  padding:.2rem 0;
}
.bb-node-content{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,107,53,.2);
  border-radius:10px;
  padding:1.5rem;
}
.bb-node-content h3{font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:.5rem}
.bb-node-content p{font-size:.9rem;color:#b0a8c0;line-height:1.8}

/* ── ENCORE FAQ ── */
.bb-encore-section{
  padding:4rem 1.5rem;
  max-width:800px;
  margin:0 auto;
}
.bb-encore-list{margin-top:1rem}
.bb-encore-item{
  border:2px solid rgba(255,107,53,.2);
  border-radius:10px;
  margin-bottom:1rem;
  overflow:hidden;
  transition:border-color .3s;
}
.bb-encore-item:hover{border-color:#ff6b35}
.bb-encore-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 1.5rem;
  background:rgba(255,107,53,.05);
  border:none;
  color:#fff;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.bb-encore-icon{
  font-size:1.4rem;
  color:#ff6b35;
  transition:transform .3s;
  flex-shrink:0;
  margin-left:1rem;
}
.bb-encore-item.active .bb-encore-icon{transform:rotate(45deg)}
.bb-encore-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease,padding .3s;
}
.bb-encore-item.active .bb-encore-answer{max-height:600px;padding:0 1.5rem 1.5rem}
.bb-encore-answer p{font-size:.92rem;color:#b0a8c0;line-height:1.85}

/* ── CTA FOOTER ── */
.bb-cta-footer{
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg,transparent,#0f0f2d 30%);
  padding:2rem 1.5rem 1.5rem;
  text-align:center;
  z-index:99;
}
.bb-cta-inner{max-width:600px;margin:0 auto}
.bb-cta-text{font-size:.9rem;color:#8a8aab;margin-bottom:.75rem}
.bb-cta-button{
  display:inline-block;
  background:#ff6b35;
  color:#0f0f2d;
  font-size:1.05rem;
  font-weight:800;
  padding:.9rem 2.5rem;
  border-radius:50px;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.bb-cta-button:hover{
  transform:scale(1.05);
  box-shadow:0 4px 25px rgba(255,107,53,.4);
}

@media(max-width:600px){
  .bb-pulse-header{min-height:80vh}
  .bb-drum-grid{grid-template-columns:1fr}
  .bb-tempo-split{grid-template-columns:1fr}
}