/* === Stack Rocks panel === */
/* Slide-down audio mixer + draggable rocks. Triggered from /404/. */

#stack-rocks-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: #F1E7E8;
  color: #333333;
  border: 1px solid #333333;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),
              visibility 0s linear 0.6s;
  overflow: hidden;
  font-family: inherit;
}

#stack-rocks-panel.is-open {
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),
              visibility 0s linear 0s;
}

/* === Top bar === */
.sr_topbar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #333333;
  min-height: 4.5rem;
}

.sr_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  border-right: 1px solid #333333;
  flex-shrink: 0;
}

.sr_logo svg {
  /* Match the site nav wordmark height exactly (same clamp formula as .nav_title_heading) */
  height: clamp(1.8rem, 1.82vw, 2.2rem);
  min-height: 1.8rem;
  width: auto;
  color: #2A2A2A;
  display: block;
}

.sr_sliders {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.sr_slider_cell {
  flex: 1 1 0;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-right: 1px solid #333333;
  min-width: 0;
}

.sr_slider_label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #333333;
  white-space: nowrap;
  flex-shrink: 0;
}

.sr_slider_track_wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  height: 2rem;
  display: flex;
  align-items: center;
}

.sr_slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: #333333;
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.sr_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2px;
  height: 1rem;
  background: #333333;
  border: none;
  cursor: grab;
}

.sr_slider:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.sr_slider::-moz-range-thumb {
  width: 2px;
  height: 1rem;
  background: #333333;
  border: none;
  border-radius: 0;
  cursor: grab;
}

.sr_close {
  background: none;
  border: none;
  padding: 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #333333;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}

.sr_close:hover { background-color: rgba(0, 0, 0, 0.04); }

/* === Drag area === */
.sr_stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.sr_reset {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  z-index: 5;
  background: none;
  border: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #333333;
  cursor: pointer;
  padding: 0.5rem;
  font-family: inherit;
}

.sr_reset:hover { text-decoration: underline; }

/* === Rocks === */
.sr_rocks_row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem 0;
  pointer-events: none;
}

.sr_rock {
  position: relative;
  flex: 0 0 auto;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  transform-origin: center center;
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

/* Rocks become visible only once physics adds them to the world */
.sr_rock.is-active { opacity: 1; }

.sr_rock.is-dragging {
  cursor: grabbing;
  z-index: 100;
  transition: none;
}

.sr_rock img {
  display: block;
  max-height: clamp(55px, 10vh, 105px);
  width: auto;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Per-rock size variation (doubled per user feedback) */
.sr_rock:nth-child(1)  img { max-height: clamp(150px, 26vh, 280px); }
.sr_rock:nth-child(2)  img { max-height: clamp(90px,  14vh, 150px); }
.sr_rock:nth-child(3)  img { max-height: clamp(170px, 30vh, 330px); }
.sr_rock:nth-child(4)  img { max-height: clamp(120px, 20vh, 210px); }
.sr_rock:nth-child(5)  img { max-height: clamp(140px, 24vh, 260px); }
.sr_rock:nth-child(6)  img { max-height: clamp(100px, 16vh, 180px); }
.sr_rock:nth-child(7)  img { max-height: clamp(180px, 32vh, 350px); }
.sr_rock:nth-child(8)  img { max-height: clamp(80px,  12vh, 130px); }
.sr_rock:nth-child(9)  img { max-height: clamp(130px, 22vh, 230px); }
.sr_rock:nth-child(10) img { max-height: clamp(150px, 26vh, 280px); }
.sr_rock:nth-child(11) img { max-height: clamp(110px, 18vh, 190px); }
.sr_rock:nth-child(12) img { max-height: clamp(160px, 28vh, 300px); }
.sr_rock:nth-child(13) img { max-height: clamp(100px, 16vh, 170px); }
.sr_rock:nth-child(14) img { max-height: clamp(130px, 22vh, 240px); }

.sr_rock--free {
  position: absolute;
  z-index: 10;
}

/* === Tablet / small tablet (single-row topbar, tighter padding) === */
@media (max-width: 767px) {
  .sr_topbar { min-height: 3.5rem; }
  .sr_logo { padding: 0 0.875rem; }
  /* Mobile: match the site nav wordmark mobile height variable */
  .sr_logo svg { height: var(--vit4l-mobile-nav-wordmark-height, 1.64rem); min-height: var(--vit4l-mobile-nav-wordmark-height, 1.64rem); width: auto; }
  .sr_slider_cell { padding: 0 0.75rem; gap: 0.5rem; }
  .sr_slider_label { font-size: 0.625rem; }
  .sr_close { padding: 0 0.875rem; font-size: 0.625rem; }
  .sr_reset { font-size: 0.625rem; bottom: 0.5rem; right: 1rem; }
  .sr_rocks_row { gap: 0.25rem; padding: 0 0.5rem; }
  .sr_rock img { max-height: clamp(40px, 7vh, 75px); }
}

/* === Phone (single-row topbar; only Bamboo Flute slider) === */
@media (max-width: 519px) {
  .sr_slider_cell:nth-child(2),
  .sr_slider_cell:nth-child(3) {
    display: none;
  }
  .sr_logo { padding: 0 0.625rem; }
  .sr_close { padding: 0 0.625rem; }
  .sr_slider_cell { padding: 0 0.625rem; gap: 0.5rem; }
  .sr_slider_cell:first-child { border-right: none; }
}

/* Body lock when panel is open */
body.stack-rocks-open {
  overflow: hidden;
}