/* Pre-Build 025 · Experiment B — photographic side-indicator signatures (PRIVATE STUDY).
 *
 * Pure CSS on the EXISTING announcer indicator (.mi-side). The announcer writes
 * the label with textContent, so the signature lives in ::before / ::after and
 * survives every label update without touching announcer.js.
 *
 * Opt-in only: nothing applies unless .mi (or an ancestor such as <html>) carries data-pb025-sig.
 *   data-pb025-sig="still"   photograph shown, no motion
 *   data-pb025-sig="motion"  lab-controlled motion (NOT playback state)
 * Sources come from custom properties on that .mi (absolute URLs):
 *   --pb025-a1, --pb025-a2  Side A disc: two original frames, slow crossfade
 *   --pb025-b               Side B strip: one original, shifting vertically
 * Side C is deliberately untouched.
 * prefers-reduced-motion: always still, first frame only.
 */
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="A"],
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="B"] {
  position: relative; padding-left: 6px; gap: 8px;
}
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="A"]::before,
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="A"]::after {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: #0b0c0a var(--pb025-a1, none) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .12);
}
/* second frame sits exactly over the first; only its opacity changes */
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="A"]::after {
  position: absolute; left: 6px; top: 50%; margin-top: -10px;
  background-image: var(--pb025-a2, none); opacity: 0;
}
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="B"]::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 22px; border-radius: 4px;
  background: #0b0c0a var(--pb025-b, none) 50% 0% / 100% auto no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38);
}

/* lab motion: A turns like a record (one turn / 36 s) with a 14 s crossfade; B drifts down its strip over 18 s */
.room002-page--dev024 #main :is(.mi[data-pb025-sig="motion"], [data-pb025-sig="motion"] .mi) .mi-side[data-side="A"]::before,
.room002-page--dev024 #main :is(.mi[data-pb025-sig="motion"], [data-pb025-sig="motion"] .mi) .mi-side[data-side="A"]::after {
  animation: pb025-turn 36s linear infinite;
}
.room002-page--dev024 #main :is(.mi[data-pb025-sig="motion"], [data-pb025-sig="motion"] .mi) .mi-side[data-side="A"]::after {
  animation: pb025-turn 36s linear infinite, pb025-fade 14s ease-in-out infinite alternate;
}
.room002-page--dev024 #main :is(.mi[data-pb025-sig="motion"], [data-pb025-sig="motion"] .mi) .mi-side[data-side="B"]::before {
  animation: pb025-strip 18s ease-in-out infinite alternate;
}
@keyframes pb025-turn { to { transform: rotate(360deg); } }
@keyframes pb025-fade { 0%, 30% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes pb025-strip { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }

@media (prefers-reduced-motion: reduce) {
  .room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side::before,
  .room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side::after { animation: none !important; }
  .room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-side[data-side="A"]::after { opacity: 0; }
}

/* In the room, Side B shows its label on the B card eyebrow (also written with
   textContent). The card carries data-side = the record's side, so the same
   signatures follow it: a B record gets the strip, its Side A original the disc. */
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) [data-side="B"] > .mi-b__card-top > .mi-b__card-eyebrow,
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) [data-side="A"] > .mi-b__card-top > .mi-b__card-eyebrow { position: relative; padding-left: 6px; gap: 8px; }
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) [data-side="A"] > .mi-b__card-top > .mi-b__card-eyebrow::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: #0b0c0a var(--pb025-a1, none) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .12);
}
.room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) [data-side="B"] > .mi-b__card-top > .mi-b__card-eyebrow::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 22px; border-radius: 4px;
  background: #0b0c0a var(--pb025-b, none) 50% 0% / 100% auto no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38);
}
.room002-page--dev024 #main :is(.mi[data-pb025-sig="motion"], [data-pb025-sig="motion"] .mi) [data-side="A"] > .mi-b__card-top > .mi-b__card-eyebrow::before { animation: pb025-turn 36s linear infinite; }
.room002-page--dev024 #main :is(.mi[data-pb025-sig="motion"], [data-pb025-sig="motion"] .mi) [data-side="B"] > .mi-b__card-top > .mi-b__card-eyebrow::before { animation: pb025-strip 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .room002-page--dev024 #main :is(.mi[data-pb025-sig], [data-pb025-sig] .mi) .mi-b__card-eyebrow::before { animation: none !important; }
}