/* Sheet-wave — full-screen travelling pixelation + 3D flyable sound pyramid */
:root {
  --ef-type-angle: 0deg;
  --ef-type-anchor-x: 50vw;
  --ef-type-anchor-y: 50vh;
  --ef-type-cell-size: 12px;
  --ef-type-pattern: square;
}
#ef-sheet-wave {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  width: 100%; height: 100%; display: block;
  opacity: 1;
  mix-blend-mode: normal;
}
/* Let the pixel field show through the whole viewport */
body.ef-sheet-wave-on {
  background: transparent !important;
  color: var(--ef-adapt-ink, #2a2438);
  --ink: var(--ef-adapt-ink, #2a2438);
  --muted: var(--ef-adapt-muted, #5a5080);
  transition: color 1.2s ease, background 1.2s ease, border-color 1.2s ease, text-shadow 1.2s ease;
}
body.ef-sheet-wave-on > *:not(#ef-sheet-wave):not(#ef-sheet-wave-ui):not(#ef-sound-pyramid):not(.ef-hb-earth) {
  position: relative; z-index: 2;
}
body.ef-sheet-wave-on .ef-hb-earth { z-index: 0; }
body.ef-sheet-wave-on .ef-hb-earth .ef-hb-limb {
  height: 18%;
  background: linear-gradient(transparent, rgba(7,11,20,.35) 60%, rgba(7,11,20,.5));
}
/* Readable surfaces over morphing pixels */
body.ef-sheet-wave-on main,
body.ef-sheet-wave-on .card,
body.ef-sheet-wave-on footer,
body.ef-sheet-wave-on .wrap,
body.ef-sheet-wave-on #app {
  color: var(--ef-adapt-ink, #2a2438);
  transition: color 1.2s ease, background 1.2s ease, border-color 1.2s ease, text-shadow 1.2s ease;
}
body.ef-sheet-wave-on .card,
body.ef-sheet-wave-on form.card,
body.ef-sheet-wave-on .opt {
  background: var(--ef-adapt-card, rgba(255,252,255,.88)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--ef-adapt-border, rgba(255,255,255,.55)) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
body.ef-sheet-wave-on h1,
body.ef-sheet-wave-on h2,
body.ef-sheet-wave-on .lede,
body.ef-sheet-wave-on .sub,
body.ef-sheet-wave-on p,
body.ef-sheet-wave-on label,
body.ef-sheet-wave-on .notice,
body.ef-sheet-wave-on footer,
body.ef-sheet-wave-on .tier strong,
body.ef-sheet-wave-on .tier span {
  color: inherit;
  text-shadow: var(--ef-adapt-shadow, 0 1px 2px rgba(255,255,255,.35));
}
body.ef-sheet-wave-on a {
  color: var(--ef-adapt-link, #5a4a9a);
  transition: color 1.2s ease, background 1.2s ease, border-color 1.2s ease;
}
body.ef-sheet-wave-on .btn.ghost {
  color: var(--ef-adapt-ink, #2a2438);
  border-color: var(--ef-adapt-border, #c4b8e8);
  background: var(--ef-adapt-card, rgba(255,255,255,.55));
}
body.ef-sheet-wave-on.ef-adapt-dark {
  --ef-adapt-shadow: 0 1px 3px rgba(0,0,0,.55);
}
body.ef-sheet-wave-on.ef-adapt-dark h1,
body.ef-sheet-wave-on.ef-adapt-dark .lede,
body.ef-sheet-wave-on.ef-adapt-dark .sub {
  text-shadow: 0 1px 8px rgba(0,0,0,.65);
}
#ef-sheet-wave-ui {
  position: fixed; right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 40; display: flex; flex-direction: column; gap: 0.35rem;
  max-width: min(100vw - 1.5rem, 20rem);
  padding: 0.4rem;
  border-radius: 14px;
  background: var(--ef-adapt-card, rgba(255,252,255,.82));
  border: 1px solid var(--ef-adapt-border, rgba(196,184,232,.55));
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 1.2s ease, background 1.2s ease, border-color 1.2s ease;
  cursor: grab;
  touch-action: none;
}
#ef-sheet-wave-ui:active { cursor: grabbing; }
#ef-sheet-wave-ui .ef-sw-row { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
#ef-sheet-wave-ui .ef-sw-look {
  font-size: 0.62rem; color: var(--ef-adapt-muted, #5a5080);
  display: grid; gap: 0.2rem; margin-top: 0.15rem;
}
#ef-sheet-wave-ui .ef-sw-look label { display: block; margin: 0; }
#ef-sheet-wave-ui .ef-sw-look input[type="range"] { width: 100%; accent-color: #9b8cff; }
#ef-sheet-wave-ui .ef-sw-look input[type="number"],
#ef-sheet-wave-ui .ef-sw-look select {
  width: 100%; min-height: 30px; padding: .2rem .35rem; border-radius: 7px;
  border: 1px solid var(--ef-adapt-border, #c4b8e8); background: var(--ef-adapt-card, #fff9);
  color: var(--ef-adapt-ink, #2a2438); font: inherit; font-size: .68rem;
}
#ef-sheet-wave-ui .ef-sw-panel-title {
  margin-top: .3rem; padding-top: .35rem; border-top: 1px solid var(--ef-adapt-border, #c4b8e8);
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
}
#ef-sheet-wave-ui .ef-sw-offset-row { display: grid; grid-template-columns: 1fr .8fr 1fr; align-items: end; gap: .25rem; }
#ef-sheet-wave-ui .ef-sw-offset-row label { grid-column: 1 / -1; }
#ef-sheet-wave-ui #ef-sw-type-readout { font-size: .58rem; color: var(--ef-adapt-muted, #5a5080); line-height: 1.35; }
/* Adaptive type follows the measured wave/cell orientation. The anchor coordinates are
   published as px vars for integrations; text keeps a local centre origin for readability. */
/* READABILITY LAW 2026-09-06: menu/control text stays upright — never rotate with wave angle. */
#ef-sheet-wave-ui button,
#ef-sheet-wave-ui label,
#ef-sheet-wave-ui select,
#ef-sheet-wave-ui .ef-sw-drag,
#ef-sheet-wave-ui .ef-sw-panel-title,
#ef-sheet-wave-ui #ef-sw-type-readout,
#ef-sound-pyramid .ef-pyr-meters span,
#ef-sound-pyramid .ef-pyr-meters strong,
#ef-sound-pyramid .ef-pyr-sliders label,
#ef-sound-pyramid .ef-pyr-controls button,
#ef-sound-pyramid .ef-pyr-flight-hint {
  transform: none !important;
  transform-origin: 50% 50%;
}
#ef-sheet-wave-ui .ef-sw-drag {
  font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ef-adapt-muted, #8a80a8); user-select: none; margin: 0 0 0.1rem;
}
#ef-sheet-wave-ui button {
  font: inherit; font-size: 0.72rem; min-height: 36px; padding: 0.35rem 0.65rem;
  border-radius: 999px; border: 1.5px solid #c4b8e8; background: #fff9;
  color: #5a5080; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#ef-sheet-wave-ui button[aria-pressed="true"] { background: #7c6bc4; color: #fff; border-color: #7c6bc4; }

/* —— 3D flyable pyramid craft (smaller) —— */
#ef-sound-pyramid {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 18%;
  width: min(18rem, 88vw);
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: none;
  filter: drop-shadow(0 10px 22px rgba(40, 20, 80, 0.4));
  touch-action: none;
}
#ef-sound-pyramid[data-open="1"] { display: block; }
#ef-sound-pyramid[data-flight="1"] { cursor: grab; }
#ef-sound-pyramid[data-flight="1"]:active { cursor: grabbing; }

.ef-pyr-craft {
  position: relative;
  height: 8.5rem;
  perspective: 560px;
  margin: 0 auto 0.45rem;
  cursor: grab;
}
.ef-pyr-craft:active { cursor: grabbing; }
.ef-pyr-mesh {
  position: absolute;
  left: 50%; top: 55%;
  width: 7.2rem; height: 7.2rem;
  margin: -3.6rem 0 0 -3.6rem;
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 0 12px rgba(180,160,255,.65)) drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.ef-pyr-face {
  position: absolute;
  left: 50%; top: 50%;
  width: 5.6rem; height: 5rem;
  margin: -2.5rem 0 0 -2.8rem;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid rgba(255, 240, 200, 0.85);
  box-shadow: inset 0 0 22px rgba(255, 220, 140, 0.35), 0 0 16px rgba(120, 200, 255, 0.4);
}
.ef-pyr-face.f0 {
  background: linear-gradient(180deg, #fff6e0, #c4a0ff 45%, #5a3a9a);
  transform: rotateY(0deg) translateZ(1.85rem) rotateX(18deg);
}
.ef-pyr-face.f1 {
  background: linear-gradient(180deg, #e0fbff, #5ad0ff 45%, #1a5a88);
  transform: rotateY(90deg) translateZ(1.85rem) rotateX(18deg);
}
.ef-pyr-face.f2 {
  background: linear-gradient(180deg, #ffe0f2, #ff7ab8 45%, #882050);
  transform: rotateY(180deg) translateZ(1.85rem) rotateX(18deg);
}
.ef-pyr-face.f3 {
  background: linear-gradient(180deg, #e8ffe8, #6dff9a 45%, #1a6840);
  transform: rotateY(270deg) translateZ(1.85rem) rotateX(18deg);
}
.ef-pyr-base {
  position: absolute;
  left: 50%; top: 50%;
  width: 3.6rem; height: 3.6rem;
  margin: -1.8rem 0 0 -1.8rem;
  background: rgba(30, 24, 50, 0.92);
  border: 1px solid rgba(255, 230, 160, 0.55);
  transform: rotateX(90deg) translateZ(-1.55rem);
}

.ef-pyr-hud {
  background: linear-gradient(180deg, rgba(42, 36, 56, 0.94), rgba(22, 18, 36, 0.96));
  border: 1px solid rgba(196, 184, 232, 0.45);
  border-radius: 12px;
  padding: 0.45rem 0.5rem 0.5rem;
  color: #f3e9f7;
  position: relative;
}
.ef-pyr-hud canvas {
  display: block; width: 100%; height: 48px;
  border-radius: 6px; background: rgba(0,0,0,0.4);
  margin: 0 0 0.35rem;
}
.ef-pyr-meters {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.22rem 0.35rem;
  font-size: 0.58rem; margin: 0 0 0.35rem;
}
.ef-pyr-meters div {
  background: rgba(255,255,255,0.07); border-radius: 6px; padding: 0.22rem 0.35rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.ef-pyr-meters strong { display: block; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: #fff; }
.ef-pyr-controls { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.ef-pyr-controls button, .ef-pyr-close {
  font: inherit; font-size: 0.62rem; min-height: 28px; padding: 0.2rem 0.45rem;
  border-radius: 999px; border: 1px solid #c4b8e888; background: #ffffff14;
  color: #e8e0f8; cursor: pointer;
}
.ef-pyr-controls button[aria-pressed="true"] { background: #7c6bc4; border-color: #c4b8e8; }
.ef-pyr-close {
  position: absolute; top: 0.3rem; right: 0.3rem; width: 1.5rem; height: 1.5rem;
  padding: 0; border-radius: 50%; font-size: 0.85rem; line-height: 1; z-index: 2;
}
.ef-pyr-sliders label {
  display: block; font-size: 0.55rem; color: #b8aed0; margin: 0.18rem 0 0.05rem;
}
.ef-pyr-sliders input[type="range"] {
  width: 100%; accent-color: #9b8cff; height: 1.1rem;
}
.ef-pyr-flight-hint {
  font-size: 0.55rem; color: #9a90b8; margin: 0.25rem 0 0; line-height: 1.35;
}
#ef-sound-pyramid[data-flight="1"] .ef-pyr-mesh {
  /* spin driven in JS */
}
@media (prefers-reduced-motion: reduce) {
  #ef-sheet-wave { opacity: 0.45; }
}

#ef-sound-pyramid[data-dragging="1"],
#ef-sheet-wave-ui[data-dragging="1"] { opacity: 0.92; }
#ef-sound-pyramid .ef-pyr-hud { cursor: grab; touch-action: none; }
#ef-sound-pyramid .ef-pyr-hud:active { cursor: grabbing; }


/* LFO / wave panel minimise — keep main presentation clear */
#ef-sheet-wave-ui .ef-sw-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
  margin: 0 0 0.15rem;
}
#ef-sheet-wave-ui .ef-sw-chrome .ef-sw-drag { margin: 0; flex: 1; }
#ef-sheet-wave-ui .ef-sw-min {
  min-height: 32px !important; padding: 0.2rem 0.55rem !important; font-size: 0.68rem !important;
}
#ef-sheet-wave-ui[data-min="1"] {
  max-width: none; width: auto; padding: 0.3rem;
}
#ef-sheet-wave-ui[data-min="1"] .ef-sw-body { display: none !important; }
#ef-sheet-wave-ui[data-min="1"] .ef-sw-drag { display: none; }
#ef-sound-pyramid[data-hud-min="1"] .ef-pyr-hud .ef-pyr-meters,
#ef-sound-pyramid[data-hud-min="1"] .ef-pyr-hud .ef-pyr-sliders,
#ef-sound-pyramid[data-hud-min="1"] .ef-pyr-hud .ef-pyr-controls,
#ef-sound-pyramid[data-hud-min="1"] .ef-pyr-hud .ef-pyr-flight-hint,
#ef-sound-pyramid[data-hud-min="1"] .ef-pyr-hud canvas {
  display: none !important;
}
#ef-sound-pyramid[data-hud-min="1"] .ef-pyr-hud {
  padding: 0.35rem 0.5rem; min-height: 0;
}
#ef-sound-pyramid .ef-pyr-min {
  position: absolute; top: 0.35rem; right: 2.2rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid #c4b8e8;
  background: #fff9; color: #5a5080; font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer;
}

/* Adaptive theme transition guard */
@media (prefers-reduced-motion: reduce) {
  #ef-sheet-wave-ui button,
  #ef-sheet-wave-ui label,
  #ef-sheet-wave-ui .ef-sw-drag,
  #ef-sheet-wave-ui .ef-sw-panel-title,
  #ef-sound-pyramid .ef-pyr-meters span,
  #ef-sound-pyramid .ef-pyr-meters strong,
  #ef-sound-pyramid .ef-pyr-sliders label,
  #ef-sound-pyramid .ef-pyr-controls button,
  #ef-sound-pyramid .ef-pyr-flight-hint { transition: none; }
  body.ef-sheet-wave-on,
  body.ef-sheet-wave-on main,
  body.ef-sheet-wave-on .card,
  body.ef-sheet-wave-on footer,
  body.ef-sheet-wave-on .wrap,
  body.ef-sheet-wave-on #app,
  body.ef-sheet-wave-on a,
  #ef-sheet-wave-ui { transition: none; }
}