/* ============================================================
   Direction A — Stage
   Single-instrument carousel. Minimal: paper, dashed floor,
   instrument, chevrons, thumbnail strip. Nothing else.
   ============================================================ */

/* ---------- Stage layout ---------- */
.carousel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  position: relative;
  padding: var(--s-4) var(--s-2) var(--s-3);
}

/* ---------- Viewport ----------
   Height is fixed at the default tier; the responsive block at
   the bottom of the file shrinks it on phones and bumps it at
   billboard. No vw-based scaling — the instrument visual sits
   at a designed size and the rest of the page makes room. */
.carousel-viewport {
  position: relative;
  width: 100%;
  height: 36rem; /* 576px → 792px @ billboard */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  /* let the browser handle vertical scrolling but reserve horizontal for our swipe-nav */
  touch-action: pan-y;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
}

.carousel-slide:not([inert]) {
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide .paper-svg {
  width: auto;
  height: 34rem; /* 544px → 748px @ billboard */
  max-width: 100%;
  overflow: visible;
}

/* ---------- Slide transitions ---------- */
.carousel-slide.exit-left {
  animation: slide-exit-left 280ms ease-in forwards;
}
.carousel-slide.exit-right {
  animation: slide-exit-right 280ms ease-in forwards;
}
.carousel-slide.enter-left {
  animation: slide-enter-left 280ms ease-out forwards;
}
.carousel-slide.enter-right {
  animation: slide-enter-right 280ms ease-out forwards;
}

@keyframes slide-exit-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-60px);
  }
}
@keyframes slide-exit-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(60px);
  }
}
@keyframes slide-enter-left {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-enter-right {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   THUMBNAIL STRIP — picture buttons, no dark container
   ============================================================ */
.thumb-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-top: 1rem;
}

.thumb {
  appearance: none;
  background: transparent;
  border: 2px solid transparent;
  padding: 6px 8px 4px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
  transition:
    transform 160ms var(--ease-press),
    background 160ms ease,
    border-color 160ms ease;
  border-radius: 4px;
}
.thumb svg {
  display: block;
  width: 4rem; /* 64px → 88px @ billboard */
  height: auto;
}
.thumb:hover {
  background: var(--cream-deep);
  transform: translateY(-3px);
}
.thumb:focus-visible {
  outline: 2px dashed var(--lavender);
  outline-offset: 3px;
}
.thumb[aria-current='true'] {
  background: var(--cream-deep);
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 3px 3px 0 0 var(--ink);
}

/* Thumb art primitives — match the paper-cut language */
.thumb svg * {
  vector-effect: non-scaling-stroke;
}
.thumb svg .thumb-fill {
  fill: var(--cream-deep);
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.thumb[aria-current='true'] svg .thumb-fill {
  fill: var(--cream);
}
.thumb svg .thumb-shadow {
  fill: var(--ink);
  opacity: 0.18;
}
.thumb svg .thumb-stand {
  stroke: var(--ink);
  stroke-width: 1.4;
}
.thumb svg .thumb-stroke {
  stroke: var(--ink);
  stroke-width: 1.2;
}
.thumb svg .thumb-cymbal {
  fill: var(--ochre);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.thumb svg .thumb-kick {
  fill: var(--offwhite);
}
.thumb svg .thumb-snare {
  fill: var(--cream);
}
.thumb svg .thumb-piano-body {
  fill: var(--lavender);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.thumb svg .thumb-piano-lid {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.thumb svg .thumb-piano-shelf {
  fill: var(--ink);
}
.thumb svg .thumb-piano-leg {
  fill: var(--ink);
}
.thumb svg .thumb-piano-keys {
  fill: var(--offwhite);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.thumb svg .thumb-piano-black {
  fill: var(--ink);
}
.thumb svg .thumb-neck {
  fill: #8c8479;
  stroke: var(--ink);
  stroke-width: 1.2;
}
.thumb svg .thumb-bass-head {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.thumb svg .thumb-bass-body {
  fill: #b3382e;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.thumb svg .thumb-pickguard {
  fill: var(--offwhite);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.thumb svg .thumb-uke-head {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.thumb svg .thumb-uke-body {
  fill: var(--ochre);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.thumb svg .thumb-soundhole {
  fill: var(--ink);
}
.thumb svg .thumb-kick-hole {
  fill: var(--lavender);
}

/* ---------- Paper-cut visual language ---------- */
.paper-svg * {
  vector-effect: non-scaling-stroke;
}
.paper-svg path,
.paper-svg rect,
.paper-svg circle,
.paper-svg ellipse,
.paper-svg line {
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.paper-shadow {
  fill: var(--ink);
  stroke: none;
  transform: translate(6px, 7px);
  opacity: 0.94;
}
.paper-shadow * {
  stroke: none;
}

/* Wide invisible hit-pads — make clicking forgiving.
   `!important` on stroke beats the .paper-svg rect selector specificity.
   pointer-events: OFF by default so inactive-slide pads can't swallow clicks
   meant for the active slide (all slides overlap in absolute positioning). */
.paper-svg .hit-pad,
.hit-pad {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: none;
  cursor: pointer;
}
.carousel-slide:not([inert]) .hit-pad {
  pointer-events: all;
}

/* ---------- DRUMS ---------- */
.drums-svg .cymbal-stand {
  stroke-width: 2.4;
}
.drums-svg .cymbal {
  fill: var(--ochre);
  stroke-width: 2.4;
}
.drums-svg .cymbal-line {
  fill: none;
  stroke-width: 1.4;
  opacity: 0.7;
}
.drums-svg .tom-body,
.drums-svg .snare-body,
.drums-svg .kick-body {
  fill: var(--cream);
  stroke-width: 2.6;
}
.drums-svg .kick-body {
  fill: var(--offwhite);
}
.drums-svg .tom-head,
.drums-svg .snare-head {
  fill: var(--cream-deep);
  stroke-width: 2.2;
}
.drums-svg .tom-band,
.drums-svg .snare-band {
  stroke-width: 1.8;
  opacity: 0.55;
}
.drums-svg .kick-hole {
  fill: var(--lavender);
  stroke-width: 2.4;
}
.drums-svg .kick-leg {
  stroke-width: 2.6;
}

.drum-part {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 160ms var(--ease-press);
}
.drum-part:focus {
  outline: none;
}
.drum-part:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 3px var(--lavender));
}
.drum-part.hit {
  animation: drum-squash 280ms var(--ease-press) 1;
}
@keyframes drum-squash {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  35% {
    transform: scale(1.08, 0.88) translateY(2px);
  }
  70% {
    transform: scale(0.98, 1.04) translateY(-1px);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
.drum-part[data-part='crash'].hit,
.drum-part[data-part='hat'].hit {
  animation: cymbal-tilt 320ms var(--ease-press) 1;
}
@keyframes cymbal-tilt {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-6deg);
  }
  60% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.ripples {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.ripples .ripple {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.drum-part.hit .ripples {
  animation: ripple-pop 360ms ease-out 1;
}
@keyframes ripple-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

/* ---------- PIANO ---------- */
.piano-svg .piano-body {
  fill: var(--lavender);
  stroke-width: 2.8;
}
.piano-svg .piano-lid {
  fill: var(--ink);
  stroke-width: 2.4;
}
.piano-svg .music-sheet {
  fill: var(--offwhite);
  stroke-width: 2;
}
.piano-svg .staff-line {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.55;
}
.piano-svg .treble-clef {
  font-family:
    'Bravura', 'Apple Symbols', 'Noto Music', 'Segoe UI Symbol', 'Times New Roman', serif;
  font-size: 56px;
  fill: var(--ink);
  stroke: none;
  opacity: 0.85;
}
.piano-svg .piano-shelf {
  fill: var(--ink);
  stroke-width: 2.2;
}
.piano-svg .piano-leg {
  fill: var(--ink);
  stroke-width: 2;
}

.piano-svg .key {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center top;
}
.piano-svg .key-white .key-rect {
  fill: var(--offwhite);
  stroke-width: 2;
}
.piano-svg .key-black .key-rect {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.piano-svg .key:focus {
  outline: none;
}
.piano-svg .key:focus-visible {
  outline: none;
  stroke: var(--lavender);
  stroke-width: 3;
}

.piano-svg .key.hit {
  animation: key-press 220ms var(--ease-press) 1;
}
@keyframes key-press {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}
.piano-svg .key-white.hit .key-rect {
  fill: var(--ochre);
}
.piano-svg .key-black.hit .key-rect {
  fill: var(--lavender);
}

/* Music note display (drawn by JS as note head + stem + name).
   Notes fade IN in place, hold, then fade UP. No slide-in motion. */
.music-note-display .note-glyph {
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: note-display 1600ms ease-out forwards;
}
.music-note-display .note-head {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1;
}
.music-note-display .note-stem {
  stroke: var(--ink);
  stroke-width: 1.8;
}
.music-note-display .note-accidental {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 10px;
  fill: var(--ink);
  stroke: none;
}
.music-note-display .note-letter {
  font-family: var(--font-display);
  font-size: 13px;
  fill: var(--brick);
  stroke: var(--ink);
  stroke-width: 0.5;
  paint-order: stroke fill;
}
@keyframes note-display {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
    transform: translateY(0);
  }
  72% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ---------- Stringed (shared) ----------
   Necks are warm grey (not ink) so the dark strings stand out against them. */
.bass-svg .bass-neck,
.uke-svg .uke-neck {
  fill: #8c8479;
  stroke-width: 2.2;
}
.bass-svg .bass-head,
.uke-svg .uke-head {
  fill: var(--ink);
  stroke-width: 2.2;
}

.fret {
  stroke: var(--cream);
  stroke-width: 1.6;
  opacity: 0.85;
}
.peg {
  fill: var(--ochre);
  stroke-width: 1.6;
}
.pickup {
  fill: var(--ink);
  stroke-width: 1.8;
}
.pickup-mm {
  stroke-width: 2;
}
.knob {
  fill: var(--cream);
  stroke-width: 1.8;
}
.bridge {
  fill: var(--ink);
  stroke-width: 1.8;
}
.bridge-saddle {
  stroke: var(--cream);
  stroke-width: 1.2;
  opacity: 0.7;
}

/* ---------- BASS — Music Man StingRay (chili red body, white pickguard) ---------- */
.bass-svg .bass-body {
  fill: #b3382e;
  stroke-width: 2.8;
}
.bass-svg .bass-pickguard {
  fill: var(--offwhite);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.bass-svg .bass-control-plate {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.bass-svg .strap-button {
  fill: var(--cream);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.bass-svg .pole-piece {
  fill: var(--cream);
  stroke: none;
}

/* ---------- UKULELE — boring brown soprano ---------- */
.uke-svg .uke-body {
  fill: var(--ochre);
  stroke-width: 2.8;
}
.uke-svg .soundhole {
  fill: var(--ink);
  stroke-width: 2;
}
.uke-svg .soundhole-rim {
  stroke: var(--ink);
  stroke-width: 1.2;
  opacity: 0.6;
}

/* Strings — soft focus, no rectangle outline */
.strings .string {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  cursor: pointer;
  stroke-linecap: round;
  transition:
    stroke-width 100ms ease,
    stroke 100ms ease;
}
.strings .string:hover {
  stroke-width: 2.4;
}
.strings .string:focus {
  outline: none;
}
.strings .string:focus-visible {
  outline: none;
  stroke: var(--lavender);
  stroke-width: 3.5;
}
.strings .string.plucked {
  animation: string-flash 600ms ease-out 1;
}
@keyframes string-flash {
  0% {
    stroke-width: 2.6;
    stroke: var(--lavender);
  }
  100% {
    stroke-width: 1.6;
    stroke: var(--ink);
  }
}

/* Strum zone — invisible drag-friendly hit area.
   `!important` beats the .paper-svg rect selector.
   pointer-events: OFF by default so inactive slides don't intercept clicks. */
.paper-svg .strum-zone,
.strum-zone {
  cursor: pointer;
  pointer-events: none;
  fill: transparent !important;
  stroke: none !important;
}
.carousel-slide:not([inert]) .strum-zone {
  pointer-events: all;
}
.strum-zone:focus {
  outline: none;
}
.strum-zone:focus-visible {
  outline: 2px dashed var(--lavender);
  outline-offset: 2px;
}

/* Floating note glyphs (ukulele) */
.note-glyphs text {
  font-family: var(--font-display);
  font-size: 22px;
  fill: var(--lavender);
  stroke: var(--ink);
  stroke-width: 1;
  paint-order: stroke fill;
}
.note-float {
  animation: note-rise 1100ms ease-out forwards;
}
@keyframes note-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-4deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(8px, -60px) rotate(8deg);
  }
}

/* ============================================================
   SELF-PLAY — stroke-redraw on slide-in (concept-10 technique)
   ============================================================ */
.carousel-slide.self-playing .sp {
  stroke-dasharray: var(--pl, 600);
  stroke-dashoffset: var(--pl, 600);
  animation: sp-redraw 700ms cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}
.carousel-slide.self-playing .sp-fade {
  opacity: 0;
  animation: sp-fadein 600ms ease-out 80ms forwards;
}
@keyframes sp-redraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sp-fadein {
  to {
    opacity: 1;
  }
}

.carousel-slide.self-playing {
  pointer-events: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .carousel-slide,
  .carousel-slide.exit-left,
  .carousel-slide.exit-right,
  .carousel-slide.enter-left,
  .carousel-slide.enter-right {
    animation: none !important;
    transition: none !important;
  }
  .carousel-slide.self-playing .sp,
  .carousel-slide.self-playing .sp-fade {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
  .carousel-slide.color-flash .paper-svg {
    animation: color-flash 320ms ease-out 1;
  }
  @keyframes color-flash {
    0% {
      filter: drop-shadow(0 0 0 var(--lavender));
    }
    50% {
      filter: drop-shadow(0 0 12px var(--lavender));
    }
    100% {
      filter: drop-shadow(0 0 0 var(--lavender));
    }
  }
  .drum-part.hit,
  .piano-svg .key.hit,
  .strings .string.plucked,
  .note-float,
  .music-note-display .note-glyph {
    animation: none !important;
  }
  .music-note-display .note-glyph {
    opacity: 1;
  }
  .drum-part.hit .tom-body,
  .drum-part.hit .snare-body,
  .drum-part.hit .kick-body,
  .drum-part.hit .cymbal {
    stroke: var(--lavender) !important;
  }
  .piano-svg .key-white.hit .key-rect {
    fill: var(--ochre) !important;
  }
  .piano-svg .key-black.hit .key-rect {
    fill: var(--lavender) !important;
  }
  .strings .string.plucked {
    stroke: var(--lavender) !important;
  }
}

/* ---------- Responsive ----------
   Phone shrinks the instrument visual to a more comfortable size
   for thumb-reach. Watch tightens spacing so the thumbnail strip
   doesn't overflow. */
@media (max-width: 640px) {
  .carousel-viewport {
    height: 26rem;
  }
  .carousel-slide .paper-svg {
    height: 24rem;
  }
  .thumb svg {
    width: 3rem;
  }
}
@media (max-width: 360px) {
  .carousel {
    gap: 0.25rem;
  }
  .thumb-strip {
    gap: 0.25rem;
  }
  .thumb {
    padding: 4px 4px 2px;
  }
}