/* Hover: a thin white marker.

   Hovering a menu number, a gallery or email link, or a video control draws a
   thin white bar in at its left edge. The text itself does not change - it
   does not grow, dim or shift - so the page reads exactly as it did, and the
   bar is what shows which thing is under the pointer. The white-to-grey change
   styles.css gives these on hover is replaced by staying white, since the bar
   is the cue now.

   Nothing moves: the bar is absolutely positioned and animated with transform
   only, so layout and spacing are untouched.

   Mouse only. A phone has no hover, and a tap would leave the last marker
   stuck on. (The menu's shadow, which is not a hover matter, is in semantics.css.) */
@media (hover: hover) and (pointer: fine) {

  /* Menu numbers */
  .menuEl { position: relative; }
  .menuEl::before {
    content: ""; position: absolute; left: 6px; top: 10px; width: 4px; height: 35px;
    background: #FFF; pointer-events: none;
    transform: scaleY(0); transition: transform 220ms cubic-bezier(.22, .8, .3, 1);
  }
  .menuEl:hover::before,
  .menuEl:has(a:focus-visible)::before { transform: scaleY(1); }
  .menuEl a { transition: color 200ms ease; }
  .menuEl a:hover { color: #FFF; }

  /* Gallery and email links: one bar beside the whole entry, title and address */
  .contentElement { position: relative; }
  .contentElement a::before {
    content: ""; position: absolute; left: -26px; top: 4px; bottom: 4px; width: 4px;
    background: #FFF; pointer-events: none;
    transform: scaleY(0); transition: transform 280ms cubic-bezier(.22, .8, .3, 1);
  }
  .contentElement a:hover::before,
  .contentElement a:focus-visible::before { transform: scaleY(1); }
  .contentElement a { transition: color 200ms ease; }
  .contentElement a:hover { color: #FFF; }

  /* PLAY and SOUND on the video page */
  .videoControls button { position: relative; transition: color 200ms ease; }
  .videoControls button::before {
    content: ""; position: absolute; left: -14px; top: 3px; bottom: 3px; width: 4px;
    background: #FFF; pointer-events: none;
    transform: scaleY(0); transition: transform 220ms cubic-bezier(.22, .8, .3, 1);
  }
  .videoControls button:hover::before,
  .videoControls button:focus-visible::before { transform: scaleY(1); }
  .videoControls button:hover { color: #FFF; }

  /* A faint shadow lets each bar hold its edge on a bright frame. It fades in
     with the bar, so nothing is painted while the bar is hidden. */
  .menuEl::before,
  .contentElement a::before,
  .videoControls button::before {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0), 0 0 9px rgba(0, 0, 0, 0);
    transition-property: transform, box-shadow;
  }
  .menuEl:hover::before,
  .menuEl:has(a:focus-visible)::before,
  .contentElement a:hover::before,
  .contentElement a:focus-visible::before,
  .videoControls button:hover::before,
  .videoControls button:focus-visible::before {
    box-shadow: 0 0 3px rgba(0, 0, 0, .65), 0 0 9px rgba(0, 0, 0, .5);
  }

  /* A narrow desktop window gets the smaller menu from styles.css; keep the
     bar proportioned to it. Below 500px the numbers sit in a row, where a
     bar to the left of each would crowd its neighbour, so it is left out. */
  @media (max-width: 700px) {
    .menuEl::before { left: 0; top: 6px; height: 28px; }
    .contentElement a::before { left: -18px; }
  }
  @media (max-width: 500px) {
    .menuEl::before { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .menuEl::before, .contentElement a::before, .videoControls button::before,
  .menuEl a, .contentElement a, .videoControls button { transition: none !important; }
}