/* logo.css — v0.122: the MediaWatch'd logo and its glitch (js/logo.js).
   Its own file so the app, /explore and the 404 page all share it. */

/* ============================================================
   v0.122 — THE LOGO: [icon] [Media] [Watch'd / Play'd] (js/logo.js)
   Both icons share one cell and both words share one cell; the one not
   showing is invisible but keeps its space, so the logo is always as wide as
   "MediaWatch'd" and the "M" never moves while it glitches. Size it with the
   container's font-size; the colour is the accent.
   ============================================================ */
.mw-logo { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; color: var(--accent);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; vertical-align: middle; }
.mw-logo-icon { display: grid; place-items: center; width: 1.1em; margin-right: .35em; }
/* the film strip and controller from the owner's reference drawing (outline, 24×24) */
.mw-logo-icon > svg { width: .95em; height: .95em; display: block; }
.mw-logo-icon > svg, .mw-logo-word > .mw-w { grid-area: 1 / 1; visibility: hidden; }
.mw-logo-icon > svg.is-on, .mw-logo-word > .mw-w.is-on { visibility: visible; }
.mw-logo-word { display: grid; justify-items: start; }
.mw-w { position: relative; }
.mw-w::before, .mw-w::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
/* glitching: RGB split + slices + jitter (red #ff2e63, cyan #1fe4ff) */
.mw-glitch .mw-w.is-on { animation: mw-jit .22s steps(2, end) infinite; }
.mw-glitch .mw-w.is-on::before { opacity: .95; color: #ff2e63; animation: mw-slice-a .28s steps(1, end) infinite; }
.mw-glitch .mw-w.is-on::after  { opacity: .95; color: #1fe4ff; animation: mw-slice-b .24s steps(1, end) infinite; }
.mw-glitch .mw-logo-icon > svg.is-on { animation: mw-jit .22s steps(2, end) infinite; filter: drop-shadow(-.06em 0 0 #ff2e63) drop-shadow(.06em 0 0 #1fe4ff); }
@keyframes mw-jit {
  0%   { transform: translate(0, 0);          clip-path: inset(0 0 0 0); }
  25%  { transform: translate(-.03em, .01em); clip-path: inset(12% 0 30% 0); }
  50%  { transform: translate(.04em, -.01em); clip-path: inset(0 0 0 0); }
  75%  { transform: translate(-.02em, 0);     clip-path: inset(48% 0 6% 0); }
  100% { transform: translate(0, 0);          clip-path: inset(0 0 0 0); } }
@keyframes mw-slice-a {
  0%   { clip-path: inset(8% 0 72% 0);  transform: translate(-.07em, 0); }
  20%  { clip-path: inset(56% 0 22% 0); transform: translate(.05em, 0); }
  40%  { clip-path: inset(82% 0 4% 0);  transform: translate(-.03em, 0); }
  60%  { clip-path: inset(30% 0 48% 0); transform: translate(.08em, 0); }
  80%  { clip-path: inset(0 0 86% 0);   transform: translate(-.05em, 0); }
  100% { clip-path: inset(64% 0 14% 0); transform: translate(.02em, 0); } }
@keyframes mw-slice-b {
  0%   { clip-path: inset(70% 0 10% 0); transform: translate(.06em, 0); }
  25%  { clip-path: inset(18% 0 60% 0); transform: translate(-.07em, 0); }
  50%  { clip-path: inset(42% 0 36% 0); transform: translate(.03em, 0); }
  75%  { clip-path: inset(4% 0 80% 0);  transform: translate(-.04em, 0); }
  100% { clip-path: inset(88% 0 2% 0);  transform: translate(.05em, 0); } }
@media (prefers-reduced-motion: reduce) {
  .mw-glitch .mw-w.is-on, .mw-glitch .mw-logo-icon > svg.is-on, .mw-glitch .mw-w.is-on::before, .mw-glitch .mw-w.is-on::after { animation: none; filter: none; }
  .mw-glitch .mw-w.is-on::before, .mw-glitch .mw-w.is-on::after { opacity: 0; }
}