/* === 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;
  /* size = per-rock base height (--rh) × an inherited breakpoint multiplier
     (--rock-scale). --rh is set per rock below; --rock-scale is set on the panel
     so media queries can shrink every rock without specificity conflicts. */
  max-height: calc(var(--rh, clamp(95px, 14vh, 150px)) * var(--rock-scale, 1));
  width: auto;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Per-rock base height. Each clamp MAX stays ≤ the image's native pixel height
   so the browser never upscales (no blur). Sizes are reference-scaled. */
.sr_rock:nth-child(1)  { --rh: clamp(95px,  14vh, 150px); } /* turquoise       (native 239) */
.sr_rock:nth-child(2)  { --rh: clamp(90px,  13vh, 140px); } /* grey rounded    (445) */
.sr_rock:nth-child(3)  { --rh: clamp(95px,  14vh, 150px); } /* green moss      (232) */
.sr_rock:nth-child(4)  { --rh: clamp(100px, 15vh, 165px); } /* grey rough      (469) */
.sr_rock:nth-child(5)  { --rh: clamp(110px, 17vh, 180px); } /* coral / sponge  (437) */
.sr_rock:nth-child(6)  { --rh: clamp(95px,  14vh, 150px); } /* grey smooth     (334) */
.sr_rock:nth-child(7)  { --rh: clamp(110px, 16vh, 175px); } /* white           (319) */
.sr_rock:nth-child(8)  { --rh: clamp(100px, 15vh, 165px); } /* lapis blue      (437) */
.sr_rock:nth-child(9)  { --rh: clamp(105px, 16vh, 170px); } /* lava / pumice   (398) */
.sr_rock:nth-child(10) { --rh: clamp(80px,  11vh, 130px); } /* granite chunk   (193) */
.sr_rock:nth-child(11) { --rh: clamp(80px,  11vh, 130px); } /* cut block       (192) */
.sr_rock:nth-child(12) { --rh: clamp(110px, 16vh, 175px); } /* elongated pebble(271) */
.sr_rock:nth-child(13) { --rh: clamp(105px, 16vh, 170px); } /* tan             (366) */
.sr_rock:nth-child(14) { --rh: clamp(110px, 16vh, 180px); } /* red jasper      (437) */

.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; }
  /* Scale every rock down on tablets (inherited by .sr_rock img) */
  #stack-rocks-panel { --rock-scale: 0.55; }
}

/* === 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; }
  /* Scale every rock down further on phones */
  #stack-rocks-panel { --rock-scale: 0.45; }
}

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