/* ==========================================================================
   Interests: the page agent's styles. The opening (a shelf of joys in 3D
   type), the piano, and the rhythm between the four galleries.
   The galleries style themselves (photos/, songs/, dishes/, film/); this file
   only frames them through .joy-band.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   The opening: an orchid wall. The poster and the canvas share one frame
   (object-fit: contain in CSS, the same "contain" camera in three.js), so the
   hand-off between them is invisible.
   --------------------------------------------------------------------------- */
.joy-open {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: var(--orchid);
  color: var(--ink-fixed);
  overflow: clip;
}
.joy-open__poster,
.joy-open__gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.joy-open__poster img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.joy-open__gl {
  opacity: 0;
  touch-action: pan-y;
  transition: opacity 320ms var(--ease-out);
}
.joy-open.is-live .joy-open__gl { opacity: 1; }
.joy-open.is-handed .joy-open__poster { visibility: hidden; }
.joy-open.is-pointing .joy-open__gl { cursor: pointer; }
/* the page's one WebGL canvas, wherever it is: laid out at its drawing
   buffer's size (piano/studio.js), cropped by the host to the scene's part */
.joy-gl { display: block; width: 100%; height: 100%; }
.joy-open__gl, .piano__gl { overflow: hidden; }

/* ---------------------------------------------------------------------------
   The piano
   --------------------------------------------------------------------------- */
.piano {
  position: relative;
  background: var(--paper);
  color: var(--ink-fixed);
}
.piano__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
}
.piano__poster,
.piano__gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.piano__poster picture { display: block; width: 100%; height: 100%; }
.piano__poster img { width: 100%; height: 100%; object-fit: contain; }
.piano__gl {
  opacity: 0;
  touch-action: pan-y;
  transition: opacity 320ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.piano.is-live .piano__gl { opacity: 1; }
.piano.is-handed .piano__poster { visibility: hidden; }
.piano__gl:focus { outline: none; }
.piano__gl:focus-visible { outline: none; }

/* Letters on the keys: only while the piano has keyboard focus */
.piano__letters { position: absolute; inset: 0; pointer-events: none; }
.piano__letters span {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  font: 700 10.5px/1 var(--font-body);
  background: var(--ink-fixed); color: #fff;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.piano__letters span.is-black { background: var(--paper); color: var(--ink-fixed); }
.piano.is-keyboard .piano__letters span { opacity: 1; }

.piano__shift {
  position: absolute; left: 50%; bottom: 52px; z-index: 2;
  display: flex; gap: 12px;
  transform: translateX(-50%);
}
.piano__step {
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ink-fixed); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(74, 11, 53, .6);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) ease-out;
}
.piano__step:hover { transform: translateY(-2px); }
.piano__step:active { transform: translateY(1px); }
.piano__step[disabled] { opacity: .35; cursor: default; transform: none; }
.piano__step svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------
   Rhythm: a stack of coloured sheets. After the opening, each section rises
   over the one before it on rounded top corners, so the colour underneath
   shows at the corners and the page reads as one stack of joys instead of
   straight cuts. Each sheet is its own stacking context, so nothing inside a
   gallery can paint over the next one. (The galleries style their own
   sections; .joy-band is the page agent's frame around them.)
   --------------------------------------------------------------------------- */
:root { --sheet-r: clamp(26px, 2.9vw, 50px); }
.joy-band,
.piano {
  position: relative;
  margin-top: calc(-1 * var(--sheet-r));
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  overflow: clip;
  isolation: isolate;
  box-shadow: 0 -8px 26px -20px rgba(74, 11, 53, .38);
}
.joy-band { display: flow-root; }
/* off screen, a sheet isn't laid out or painted at all (it keeps its last size) */
.joy-band,
.piano { content-visibility: auto; contain-intrinsic-size: auto 880px; }
.joy-band--photos { z-index: 1; }
.piano { z-index: 2; }
.joy-band--songs { z-index: 3; }
.joy-band--dishes { z-index: 4; }
.joy-band--film { z-index: 5; }
/* the opening stays under the first sheet */
.joy-open { z-index: 0; }

/* Touch and portrait: the 3D piano above, a strip of finger-sized keys below
   it (each key here goes down on the 3D piano too), then the octave arrows,
   all inside one screen, clear of the next sheet's rounded top. */
.piano.has-strip .piano__stage { height: calc(100svh - 310px - var(--sheet-r)); min-height: 360px; }
.piano.has-strip .piano__shift,
.piano.is-2d .piano__shift { position: static; transform: none; justify-content: center; padding: 14px 0 calc(40px + var(--sheet-r)); }
.piano__strip { padding: 0 var(--gutter); }
.piano.is-2d .piano__stage { height: calc(100svh - 330px - var(--sheet-r)); min-height: 320px; }
.piano.is-2d .piano__poster { visibility: visible; inset: calc(var(--chrome-h) - 8px) 0 0; height: auto; }
/* poster renders (QA only): the stage takes the poster's exact reference size */
html[data-poster-mode="piano-tall"] .piano__stage { width: 402px; height: 560px; min-height: 0; }

/* ---------------------------------------------------------------------------
   The 2D keys (piano/keys2d.js)
   --------------------------------------------------------------------------- */
.keys2d {
  position: relative;
  max-width: 1100px; margin-inline: auto;
  padding: 12px 10px 10px;
  border-radius: 22px;
  /* lacquer: a soft sheen from the light above, the same orchid as the 3D case */
  background: linear-gradient(180deg, #e0509d 0%, #cf2f80 22%, #b8236f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(74, 11, 53, .25), 0 22px 40px -22px rgba(74, 11, 53, .6);
}
.keys2d__bed {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--whites), minmax(0, 1fr)); gap: 3px;
  height: 152px;
  padding-top: 6px;
  border-top: 5px solid #1c1830;           /* the felt strip behind the keys */
  border-radius: 3px;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.k2 {
  position: relative; padding: 0; border: 0; margin: 0;
  cursor: pointer;
  transition: transform 70ms var(--ease-out), box-shadow 70ms var(--ease-out), background-color 70ms ease-out;
}
.k2--w {
  height: 100%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #f6ecdd 0%, #fffaf2 14%, #fbf4e8 100%);
  box-shadow: inset 0 -6px 0 #e8dcc8, 0 2px 0 rgba(28, 24, 48, .16);
}
.k2--w.is-down { transform: translateY(2px); background: #f1e6d4; box-shadow: inset 0 -2px 0 #e2d4bd, 0 0 0 rgba(28, 24, 48, 0); }
.k2--b {
  position: absolute; top: 6px; z-index: 2;
  left: calc(var(--at) / var(--whites) * 100% - 100% / var(--whites) * .3);
  width: calc(100% / var(--whites) * .6);
  height: 60%;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #120e1f 0%, #2a2343 62%, #1c1830 100%);
  box-shadow: inset 0 -6px 0 #0d0a17, inset 1px 0 0 rgba(255, 255, 255, .09), 0 3px 4px rgba(28, 24, 48, .3);
}
.k2--b::before { content: ""; position: absolute; inset: 0 -9px -4px; }   /* a 44 px target */
.k2--b.is-down { transform: translateY(2px); box-shadow: inset 0 -2px 0 #0d0a17, inset 1px 0 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(28, 24, 48, .3); }
.k2:focus-visible { outline: 2px solid var(--ink-fixed); outline-offset: -4px; }
.k2--b:focus-visible { outline-color: #fff; }