/* ETAPA 01 — CAIXA DE MÚSICA
   Registros, textos e áreas de ação usam os componentes compartilhados do protocolo.
   Este arquivo cobre apenas a caixa (.s1-*), que não tem equivalente nas demais etapas.

   Estrutura:
   .s1-music  → raiz; guarda as variáveis (--s1-open: 0 fechada … 1 gaveta aberta)
   .s1-scene  → cena com perspectiva; a gaveta sai em direção a quem olha
   .s1-case   → corpo da caixa: tampa, cilindro de quatro rodas, base com a chave
   .s1-drawer → gaveta em 3D (frente, piso, paredes) com a pasta dentro            */

#stageView .s1-music {
  --s1-wood-hi: #4d2815;
  --s1-wood: #2f170c;
  --s1-wood-lo: #1b0d07;
  --s1-brass-hi: #ecd29a;
  --s1-brass: #b08a50;
  --s1-brass-lo: #5f4224;
  --s1-ink: #2a190b;
  --s1-slot: 24px;
  --s1-r: 83.6px;
  --s1-step: 16.3636deg;
  --s1-front-h: 46px;
  --s1-rail: 12px;
  --s1-depth: 232px;
  --s1-pull: 176px;
  --s1-open: 0;
  position: relative;
  width: min(100%, 384px);
  margin: 34px auto 12px;
  -webkit-tap-highlight-color: transparent;
}

#stageView .s1-scene {
  position: relative;
  padding-bottom: calc(var(--s1-open) * 132px);
  perspective: 2600px;
  perspective-origin: 50% -1300px;
  transform-style: preserve-3d;
}
#stageView .s1-body {
  position: relative;
  transform-style: preserve-3d;
}
/* A gaveta é só cenário: não deve capturar toques destinados às rodas e à chave. */
#stageView .s1-drawer,
#stageView .s1-cavity { pointer-events: none; }

/* ---------- Corpo ---------- */
#stageView .s1-case {
  position: relative;
  border-radius: 20px 20px 4px 4px;
  background:
    repeating-linear-gradient(93deg, rgba(255, 190, 120, .035) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, var(--s1-wood-lo), var(--s1-wood-hi) 9%, var(--s1-wood) 50%, var(--s1-wood-hi) 91%, var(--s1-wood-lo));
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 160, .28),
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    0 8px 12px -8px rgba(0, 0, 0, .7);
}

#stageView .s1-lid {
  position: relative;
  height: 36px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(255, 214, 160, .1), transparent 55%, rgba(0, 0, 0, .35));
  border-bottom: 3px solid var(--s1-brass-lo);
  box-shadow: 0 1px 0 rgba(255, 220, 160, .25);
}
#stageView .s1-lid::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 15%;
  right: 15%;
  height: 11px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--s1-wood-hi), var(--s1-wood));
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .3), inset 0 0 0 1px rgba(0, 0, 0, .5);
}
#stageView .s1-lid::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 210, 154, .5), transparent);
}

#stageView .s1-front {
  position: relative;
  padding: 16px clamp(10px, 3.4vw, 16px) 12px;
  /* rebites de latão nos quatro cantos da frente */
  background:
    radial-gradient(circle at 7px 7px, #e6c98c 0 1.6px, #6d4d27 2.1px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, #e6c98c 0 1.6px, #6d4d27 2.1px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #e6c98c 0 1.6px, #6d4d27 2.1px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #e6c98c 0 1.6px, #6d4d27 2.1px, transparent 2.6px);
}
#stageView .s1-front::before {
  content: "";
  position: absolute;
  top: 4px; right: 4px; bottom: 4px; left: 4px; /* inset, compatível com Safari antigo */
  border: 1px solid rgba(236, 210, 154, .16);
  border-radius: 8px;
  pointer-events: none;
}

/* ---------- Cilindro e rodas ---------- */
#stageView .s1-cylinder {
  position: relative;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #9a6f3a, #4a2c14 12%, #22120a 88%, #7c5629);
  box-shadow:
    0 0 0 1px #0b0502,
    0 2px 0 rgba(255, 224, 170, .14),
    inset 0 1px 0 rgba(255, 228, 176, .4);
}
#stageView .s1-wheels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 9px;
  background: #070302;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, .95);
}
#stageView .s1-wheel {
  position: relative;
  height: 116px;
  overflow: hidden;
  border-radius: 5px;
  background: #0b0503;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* Safari: faz o recorte arredondado valer também para filhos em 3D */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  cursor: ns-resize;
  transition: box-shadow .45s ease;
}
/* Luz do cilindro: escurece as bordas e acende a faixa de leitura. */
#stageView .s1-wheel::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 12%, transparent 88%, rgba(0, 0, 0, .55)),
    linear-gradient(180deg,
      rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .5) 17%, rgba(0, 0, 0, .06) 36%,
      rgba(255, 238, 196, .13) 50%, rgba(0, 0, 0, .06) 64%,
      rgba(0, 0, 0, .5) 83%, rgba(0, 0, 0, .9) 100%);
}
#stageView .s1-wheel-window {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  perspective: 340px;
  outline: none;
}
#stageView .s1-wheel-window:focus-visible { box-shadow: inset 0 0 0 2px var(--s1-brass-hi); }
#stageView .s1-wheel-drum {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--s1-r) * -1));
  transition: transform .26s cubic-bezier(.2, .8, .25, 1);
}
#stageView .s1-face {
  position: absolute;
  left: 0;
  top: calc(var(--s1-slot) / -2);
  width: 100%;
  height: var(--s1-slot);
  display: grid;
  place-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * var(--s1-step) * -1)) translateZ(var(--s1-r));
  background:
    radial-gradient(circle at 11% 50%, rgba(36, 22, 9, .6) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 89% 50%, rgba(36, 22, 9, .6) 0 1.3px, transparent 1.8px),
    linear-gradient(180deg, #c7a15c, #b38f52 50%, #a07d43);
  box-shadow: inset 0 -1px 0 rgba(30, 17, 6, .6), inset 0 1px 0 rgba(255, 233, 180, .25);
  color: var(--s1-ink);
  font: 700 clamp(15px, 4.7vw, 20px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 236, 190, .45), 0 -1px 0 rgba(0, 0, 0, .25);
  font-variant-numeric: lining-nums;
}

/* Setas gravadas no latão, no topo e na base de cada roda. */
#stageView .s1-wheel-step {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 30%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--s1-brass-hi);
  cursor: pointer;
}
#stageView .s1-step-up { top: 0; }
#stageView .s1-step-down { bottom: 0; }
#stageView .s1-wheel-step span {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  opacity: .42;
  transition: opacity .15s ease;
}
#stageView .s1-step-up span { top: 6px; transform: translateX(-50%) rotate(45deg); }
#stageView .s1-step-down span { bottom: 6px; transform: translateX(-50%) rotate(225deg); }
#stageView .s1-wheel-step:hover span,
#stageView .s1-wheel-step:focus-visible span { opacity: 1; }
#stageView .s1-wheel-step:focus-visible { outline: 1px solid rgba(236, 210, 154, .6); outline-offset: -3px; }
#stageView .s1-wheel-step:disabled { cursor: default; }
#stageView .s1-wheel-step:disabled span { opacity: .2; }

/* Marcas de leitura nas laterais do cilindro. */
#stageView .s1-reading {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 0;
  height: 0;
  margin-top: -6px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
#stageView .s1-reading-l { left: -1px; border-left: 8px solid var(--s1-brass-hi); }
#stageView .s1-reading-r { right: -1px; border-right: 8px solid var(--s1-brass-hi); }

/* Roda assentada no encaixe. */
#stageView .s1-wheel.is-set { box-shadow: 0 0 0 1px rgba(240, 210, 150, .95), 0 0 16px rgba(228, 178, 92, .5); }

/* Cilindro sem leitura (caixa já aberta): latão liso com os pinos. */
#stageView .s1-wheels-quiet .s1-wheel { cursor: default; }
#stageView .s1-wheels-quiet .s1-wheel-window {
  background:
    radial-gradient(circle at 18% 22%, rgba(36, 22, 9, .55) 0 1.4px, transparent 1.9px) 0 0 / 14px 17px,
    radial-gradient(circle at 70% 64%, rgba(36, 22, 9, .55) 0 1.4px, transparent 1.9px) 0 0 / 17px 14px,
    linear-gradient(180deg, #b79256, #a07d43);
}
#stageView .s1-music[data-state="open"] .s1-wheels { opacity: .78; }

/* ---------- Base: placa gravada e chave de corda ---------- */
#stageView .s1-base {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  padding: 0 clamp(10px, 3.6vw, 18px);
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .5));
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .2), inset 0 2px 0 rgba(0, 0, 0, .45);
}
#stageView .s1-plate {
  position: relative;
  width: 72px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d7b472, #a98443 55%, #86642f);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .35), 0 1px 0 rgba(0, 0, 0, .6);
}
#stageView .s1-plate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--s1-ink);
  box-shadow: 0 1px 0 rgba(255, 236, 190, .5);
}
#stageView .s1-plate::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--s1-ink) 0 34%, transparent 34% 66%, var(--s1-ink) 66%);
  opacity: .75;
}
#stageView .s1-key-label {
  margin-left: auto;
  margin-right: 2px;
  color: var(--s1-brass);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .8;
}
#stageView .s1-key {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  margin: -6px -2px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .7));
}
#stageView .s1-key-art {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--k, 0deg));
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1);
  animation: s1-key-nudge 7s ease-in-out 2.5s infinite;
}
#stageView .s1-key.is-snap .s1-key-art { transition: transform .09s ease-out; animation: none; }
#stageView .s1-key:hover .s1-key-art { animation: none; }
#stageView .s1-key:focus-visible { outline: 1px solid rgba(236, 210, 154, .7); outline-offset: 2px; }
#stageView .s1-key:disabled { cursor: default; }
@keyframes s1-key-nudge {
  0%, 88%, 100% { transform: rotate(var(--k, 0deg)); }
  93% { transform: rotate(calc(var(--k, 0deg) - 22deg)); }
}

/* ---------- Gaveta ---------- */
#stageView .s1-cavity {
  position: relative;
  height: calc(var(--s1-front-h) + var(--s1-rail));
  border-radius: 0 0 5px 5px;
  /* sem isto o fundo escuro seria achatado para o plano da frente e cobriria a gaveta */
  transform-style: preserve-3d;
}
#stageView .s1-post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, var(--s1-wood-lo), var(--s1-wood-hi), var(--s1-wood));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
}
#stageView .s1-post-l { left: 0; border-radius: 0 0 0 5px; }
#stageView .s1-post-r { right: 0; border-radius: 0 0 5px 0; }
#stageView .s1-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--s1-rail);
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, var(--s1-brass-lo) 0 2px, var(--s1-wood) 2px, var(--s1-wood-lo));
  box-shadow: 0 16px 22px -6px rgba(0, 0, 0, .8);
}
#stageView .s1-cavity-back {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 0;
  bottom: var(--s1-rail);
  background: #050202;
  transform: translateZ(calc(var(--s1-depth) * -1 - 6px));
}

#stageView .s1-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s1-rail);
  height: var(--s1-front-h);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--s1-open) * var(--s1-pull)));
}
#stageView .s1-d-front {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(92deg, rgba(255, 190, 120, .04) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #5a3019, var(--s1-wood-hi) 18%, var(--s1-wood) 100%);
  border-top: 3px solid var(--s1-brass);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 0 0 4px rgba(236, 210, 154, .09),
    0 10px 16px rgba(0, 0, 0, .55);
}
#stageView .s1-d-inlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -42%) rotate(45deg);
  background: linear-gradient(135deg, #1b0e07, #3b2110);
  box-shadow: 0 0 0 2px var(--s1-brass), 0 0 0 3px rgba(0, 0, 0, .5);
}
#stageView .s1-d-pull {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, #e3c383, #8a6a36);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .7);
}
#stageView .s1-d-wall {
  position: absolute;
  background: linear-gradient(180deg, #2a1209, #0f0603);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
#stageView .s1-d-wall-l,
#stageView .s1-d-wall-r {
  top: 0;
  width: var(--s1-depth);
  height: calc(var(--s1-front-h) - 8px);
  transform-origin: 0 0;
  transform: rotateY(90deg);
}
#stageView .s1-d-wall-l { left: 8px; }
#stageView .s1-d-wall-r { left: calc(100% - 8px); }
#stageView .s1-d-wall-b {
  left: 8px;
  right: 8px;
  top: 0;
  height: calc(var(--s1-front-h) - 8px);
  transform: translateZ(calc(var(--s1-depth) * -1));
}
#stageView .s1-d-floor {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(var(--s1-front-h) - 8px);
  height: var(--s1-depth);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--s1-depth) * -1)) rotateX(90deg);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 24%),
    radial-gradient(ellipse at 50% 68%, rgba(150, 78, 58, .42) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 55%, #3a1519 0%, #1b080b 60%, #0c0405 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}

/* ---------- Pasta ---------- */
#stageView .s1-folder {
  position: absolute;
  left: 50%;
  bottom: 17%;
  height: 76%;
  aspect-ratio: 3 / 4;
  transform: translateX(-50%) rotate(-3deg);
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .75));
}
#stageView .s1-folder-art { display: block; width: 100%; height: 100%; }
/* Safari antigo (sem aspect-ratio): a largura vem da proporção do próprio SVG. */
@supports not (aspect-ratio: 3 / 4) {
  #stageView .s1-folder { width: auto; }
  #stageView .s1-folder-art { width: auto; }
}
#stageView .s1-music[data-state="open"] .s1-folder { animation: s1-folder-in 1.1s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes s1-folder-in {
  from { opacity: 0; transform: translateX(-50%) translateY(26px) rotate(-8deg) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) rotate(-3deg); }
}

/* ---------- Estados ---------- */
#stageView .s1-music.is-jammed .s1-case { animation: s1-jam .55s ease-out; }
@keyframes s1-jam {
  0%, 100% { transform: none; }
  18% { transform: translateX(-3px) rotate(-.25deg); }
  40% { transform: translateX(3px) rotate(.25deg); }
  62% { transform: translateX(-2px); }
  82% { transform: translateX(1px); }
}

@media (max-width: 430px) {
  #stageView .s1-music { margin-top: 30px; }
  #stageView .s1-wheel { height: 112px; }
  #stageView .s1-key-label { font-size: 9px; letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  #stageView .s1-wheel-drum,
  #stageView .s1-key-art,
  #stageView .s1-wheel,
  #stageView .s1-key-art,
  #stageView .s1-music.is-jammed .s1-case,
  #stageView .s1-music[data-state="open"] .s1-folder { animation: none; }
}

#stageView .s1-key-label[hidden] { display: none; }
#stageView .s1-key-still { cursor: default; margin-left: auto; }
#stageView .s1-key-still .s1-key-art { animation: none; transition: none; }

#stageView .s1-key-label[hidden] + .s1-key { margin-left: auto; }