/* The sound-system's printed poster changes in held paper poses. This layer is
   decorative only; the five one-second preparation steps remain in the UI. */
#zineEchoApp .echo-turn-sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
#zineEchoApp .echo-turn-leaf {
  position: absolute;
  min-height: 0;
  max-height: none;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: 50% 0;
  backface-visibility: hidden;
  will-change: transform;
  filter: drop-shadow(-2px 3px 1px #3b191b42) drop-shadow(-3px 7px 3px #3b191b24);
}
/* One physical sheet leaves the pile. The backing and clamps stay mounted. */
#zineEchoApp .echo-turn-leaf::before {
  background-image: var(--echo-poster-asset, var(--echo-sheet));
}
#zineEchoApp .echo-turn-leaf::after { display: none; }
#zineEchoApp .echo-turn-leaf .echo-victory-stamp { visibility: hidden; }

@keyframes echo-paper-leaf {
  /* The lower edge lifts toward the viewer around its mounted top. Held poses
     keep a paper-theatre cadence, while the incoming sheet stays readable.
     Only a real card change turns a sheet, never each countdown tick. */
  0% { transform: perspective(1200px) rotateX(0deg); }
  20% { transform: perspective(1200px) rotateX(24deg); }
  42% { transform: perspective(1200px) rotateX(48deg); }
  65% { transform: perspective(1200px) rotateX(70deg); }
  85%, 100% { transform: perspective(1200px) rotateX(89deg); }
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  #zineEchoApp[data-echo-paper-turn] .echo-turn-leaf {
    animation: echo-paper-leaf 400ms steps(1, end) both;
  }
  /* The old sheet carries the movement; the new word keeps a fixed reading spot. */
  #zineEchoApp[data-echo-motion] #echoPaper { animation: none; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #zineEchoApp .echo-turn-sheet { display: none; }
}
#zineEchoApp:is([data-echo-suspended="true"], [data-material-state="fallback"]) .echo-turn-sheet { display: none; }