/* NICO HUA · Video polish r2 (2026-11-02) · preview-play.css
   r2 (Nico): while a preview plays the glyph is fully hidden – also on hover (Eiswelt previews only on hover, so
   the r1 hover-return put the glyph over the running igloo). It returns on pause, end and keyboard focus.
   Nico: „Bali läuft automatisch, zeigt aber trotzdem einen Play-Button.“
   While a muted preview runs, the play affordance is hidden (opacity --nh-pp-rest, slight scale-down);
   it returns on keyboard focus (:focus-visible inside the card) and as soon as the preview is paused or has ended.

   Hooks used (all set by the live modules already):
   - Motion films  .nh-mf .nh-mf-film.is-previewing       motion-films.js (Bali: on 'playing'; Eiswelt: on hover/focus)
   - Cinema cards  .nh-cinema .nh-cinema-screen.is-playing cinema-bridge.js (added on 'playing', removed on
                                                            pause / ended / emptied / error)
   - Optional      [data-nh-preview="playing|paused|ended"] preview-play.js – only needed so the Bali card, which keeps
                   .is-previewing after its 18 s non-looping run has ended, shows the full glyph again on the last frame.
   Only opacity / transform / visibility / transition are touched: no layout, size or position changes.
   Maus (Erklärfilm: native controls + voice while playing) keeps its overlay hidden while playing; it now fades
   instead of blinking and reappears for keyboard focus. */

.nh-mf .nh-mf-film,
.nh-cinema {
  --nh-pp-rest: 0;     /* glyph while a preview runs: hidden */
  --nh-pp-scale: .86;
  --nh-pp-dur: 360ms;
  --nh-pp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Motion films (Eiswelt, Bali) ---------- */
.nh-mf .nh-mf-film .nh-mf-play {
  transition:
    opacity var(--nh-pp-dur) var(--nh-pp-ease),
    transform var(--nh-pp-dur) var(--nh-pp-ease),
    background-color .4s ease,
    border-color .4s ease;
}
/* preview running → recede                                                  specificity 0,5,0 */
.nh-mf .nh-mf-film.is-previewing:not([data-nh-preview="paused"]):not([data-nh-preview="ended"]) .nh-mf-play {
  opacity: var(--nh-pp-rest);
  transform: scale(var(--nh-pp-scale));
}
/* stopped on the last frame (Bali, loop:false) / paused while the class is kept → full    0,6,0 */
.nh-mf .nh-mf-film[data-film].is-previewing[data-nh-preview="ended"] .nh-mf-play,
.nh-mf .nh-mf-film[data-film].is-previewing[data-nh-preview="paused"] .nh-mf-play {
  opacity: 1;
  transform: none;
}
.nh-mf .nh-mf-film[data-film].is-previewing:has(:focus-visible) .nh-mf-play {
  opacity: 1;
  transform: none;
}

/* ---------- Cinema cards (Desert, Stockcar, Matrix) ---------- */
.nh-cinema .nh-cinema-screen .nh-cinema-open,
.nh-cinema .nh-cinema-screen .nh-cinema-open > span {
  transition:
    opacity var(--nh-pp-dur) var(--nh-pp-ease),
    transform var(--nh-pp-dur) var(--nh-pp-ease),
    background-color .3s ease;
}
/* cinema.css r3 hides the glyph abruptly while playing (.nh-cinema-open opacity:0, .nh-cinema-play visibility:hidden),
   so it never comes back on hover. Replace that with the same calm recede as the motion-film cards. */
.nh-cinema[data-film]:not([data-film="maus"]) .nh-cinema-screen.is-playing .nh-cinema-open {
  opacity: 1; /* background stays 'none' from cinema.css while playing */
}
.nh-cinema[data-film]:not([data-film="maus"]) .nh-cinema-screen.is-playing .nh-cinema-open > span:not(.nh-cinema-play) {
  opacity: 0; /* the label ("FILM ANSEHEN") – visually hidden in the /motion-design collection anyway */
}
.nh-cinema[data-film]:not([data-film="maus"]) .nh-cinema-screen.is-playing .nh-cinema-play {
  visibility: visible;
  opacity: var(--nh-pp-rest);
  transform: scale(var(--nh-pp-scale));
}
.nh-cinema[data-film]:not([data-film="maus"]):has(:focus-visible) .nh-cinema-screen.is-playing .nh-cinema-open[type] > span {
  opacity: 1;
  transform: none;
}

/* ---------- Maus ---------- */
/* cinema-bridge.js keeps .nh-cinema-open at opacity:0 + pointer-events:none while playing (native controls).
   Keep the glyph rendered so the parent's opacity transition fades it instead of an instant visibility switch. */
.nh-cinema[data-film="maus"] .nh-cinema-screen.is-playing .nh-cinema-play {
  visibility: visible;
}
.nh-cinema[data-film="maus"] .nh-cinema-screen.is-playing .nh-cinema-open[type]:focus-visible {
  opacity: 1;
}

/* ---------- reduced motion: no scale, no animated transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .nh-mf .nh-mf-film .nh-mf-play,
  .nh-cinema .nh-cinema-screen .nh-cinema-open,
  .nh-cinema .nh-cinema-screen .nh-cinema-open > span {
    transition: none;
  }
  .nh-mf .nh-mf-film[data-film].is-previewing:not([data-nh-preview="paused"]):not([data-nh-preview="ended"]) .nh-mf-play,
  .nh-cinema[data-film]:not([data-film="maus"]) .nh-cinema-screen.is-playing .nh-cinema-open[type] .nh-cinema-play {
    transform: none;
  }
}