/* ═══════════════════════════════════════════════
   Bandanize Landing — Refinements
   Conventional text tabs, detail-led features,
   scroll-controlled sprite frames.
   ═══════════════════════════════════════════════ */

/* ── Plain tab (text-based tablature) ── */
.plain-tab {
  border: 1px solid #30303a;
  border-radius: 5px;
  background: #121216;
  padding: 16px 17px;
  margin-top: 18px;
}

.tab-section {
  font: 11px monospace;
  color: #9595a0;
}

.plain-tab pre {
  font: 13px/1.65 monospace;
  color: #dddde4;
  margin: 12px 0;
  white-space: pre;
  overflow: hidden;
}

.text-chords {
  display: flex;
  gap: 32px;
  color: var(--lime);
  font: 12px monospace;
  margin-top: 15px;
}

.plain-tab p {
  font: 11px/1.5 monospace;
  color: #a5a5b0;
  margin-top: 7px;
}

/* Override scene positions for plain-tab layout */
.tab-highlight { top: 100px; }
.tab-highlight h4 { margin: 15px 0; }
.tab-foot { margin-top: 12px; }

/* ── Feature detail cards ── */
.feature-detail {
  height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 27px 0 29px;
  border-left: 2px solid var(--lime);
  padding: 0 18px;
  background: linear-gradient(90deg, #a3e63508, transparent);
  transition: border-color .3s, background .3s;
}

/* Repertoire detail */
.repertoire-detail > div {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #2b2b31;
  padding: 11px 0;
  font-size: 12px;
}

.repertoire-detail > div:last-child { border: 0; }
.repertoire-detail i { color: var(--lime); font-size: 10px; font-style: normal; }
.repertoire-detail b { font-weight: 500; }
.repertoire-detail span { font-size: 10px; color: #9b9ba5; margin-left: auto; }
.repertoire-detail > div:last-child span { margin-left: 0; }
.repertoire-detail > div:last-child b { margin-left: auto; color: var(--lime); }

/* Notation detail */
.notation-detail {
  border-color: var(--pink);
  background: linear-gradient(90deg, #fd87a108, transparent);
}

.notation-detail > div {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--pink);
}

.notation-detail b { font-size: 9px; font-weight: 400; color: #aaa; }

.notation-detail pre {
  margin: 20px 0 0;
  color: #c7c7d0;
  font-size: 13px;
  line-height: 1.5;
}

/* Team detail */
.team-avatars {
  display: flex;
  align-items: center;
}

.team-avatars i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #29292f;
  border: 2px solid #0b0b0c;
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
  margin-left: -5px;
  color: var(--lime);
}

.team-avatars i:nth-child(2n) {
  color: var(--pink);
  background: #352530;
}

.team-line {
  display: flex;
  gap: 16px;
  margin-top: 17px;
  align-items: center;
  font-size: 18px;
}

.team-line > b { font-weight: 500; }
.team-line > span { color: #777; }
.team-line > i { margin-left: auto; color: var(--lime); font-style: normal; }

/* Hover states */
.feature-grid article:hover .feature-detail { border-color: var(--pink); }
.feature-grid article:hover .feature-symbol { transform: none; }
.feature-grid h3 { margin-top: 0; }

/* ── Mascot sprite (scroll-driven) ── */
.mascot-sprite {
  width: 100%;
  aspect-ratio: 384/341;
  background-image: url('mascot-sequence.png');
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: 0% 0%;
  filter: drop-shadow(0 16px 18px #0005);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* ── Jam character overrides ── */
.jam-character {
  width: clamp(270px, 29vw, 410px);
  left: calc(3% + var(--jam) * 63%);
  top: 31%;
}

.jam-heading h2 > [data-copy] { color: var(--ink); }

.scroll-jam { height: 260vh; }

.motion-paused .mascot-sprite { background-position: 100% 100% !important; }
.motion-paused .jam-character { left: 56%; transform: none; }

/* ── Responsive: Tablet ── */
@media (max-width: 1000px) {
  .feature-detail { max-width: 380px; }
  .jam-character { width: 300px; left: calc(var(--jam) * (100% - 300px)); top: 33%; }
  .scroll-jam { height: 235vh; }
  .motion-paused .jam-character { left: 40%; }
}

/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
  .plain-tab { padding: 12px 10px; }
  .plain-tab pre { font-size: 10px; line-height: 1.55; margin: 10px 0; }
  .tab-section { font-size: 9px; }
  .text-chords { font-size: 10px; margin-top: 10px; gap: 25px; }
  .plain-tab p { font-size: 9px; }
  .tab-highlight { top: 110px; }
  .tab-foot { font-size: 8px; }
  .plain-tab { margin-top: 12px; }
  .feature-detail { height: 130px; margin: 24px 0; }
  .jam-character { width: 250px; left: calc(2% + var(--jam) * (96% - 250px)); top: 31%; }
  .scroll-jam { height: 220vh; }
  .motion-paused .jam-character { left: 13%; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .scroll-jam { height: auto; }
  .mascot-sprite { background-position: 100% 100% !important; }
  .jam-character { left: 55%; transform: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .jam-character { left: 13%; }
}