/* The two marks on the phone's right edge (Chris, 1 Nov; drawn by edge-marks.js). Only transform and opacity move, on small
   layers of their own, so neither costs a repaint of the page while it moves. */

/* Poseidon's trident, thrust through the screen's edge: the Desk's navigator handle (nav.js). The button keeps its size and
   its touch; the drawing never takes one. */
.nav-handle .mark-trident {
  position: absolute; right: 0; top: 0; width: 36px; height: 104px; overflow: visible; pointer-events: none;
  transition: transform 0.22s cubic-bezier(.2, .9, .3, 1.3), opacity 0.2s;
}
.mark-trident .tri-glint { transform: skewX(-18deg) translateX(74px); }
.mark-trident .tri-drop { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
/* Pressed: thrust a little further in. Nothing glows behind it (Chris, 1 Nov): the forged metal alone, its dark edge line
   keeping it apart from the page. */
.nav-handle:active .mark-trident { transform: translateX(-5px); }
/* Drawn in, it is the standing trident (nav-trident.css) that moves: this one goes at once, under it, and comes back once that has lain down. */
html.nav-open .nav-handle .mark-trident { opacity: 0; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Now and then (every 8 s, edge-marks.js) a glint runs along the metal and a drop of sea water gathers at the middle point and
     falls: one pass of 3.7 s while `tri-on` is set, still in between. As a loop it repainted the masked metal at every frame, about
     a tenth of a phone's time (Chris, 2 Nov: "the app is very slow"). */
  .mark-trident.tri-on .tri-glint { animation: tri-glint 3.7s ease-in-out both; }
  .mark-trident.tri-on .tri-drop { animation: tri-drop 3.7s ease-in both; }
}
@keyframes tri-glint { 0% { transform: skewX(-18deg) translateX(0); } 34.6%, 100% { transform: skewX(-18deg) translateX(74px); } }
@keyframes tri-drop {
  0%, 38.9% { opacity: 0; transform: scale(0.2); }
  64.9% { opacity: 0.95; transform: scale(1); }
  82.2% { opacity: 0.95; transform: translateY(1px) scale(0.95, 1.15); }
  100% { opacity: 0; transform: translateY(12px) scale(0.7, 1.3); }
}

/* Zeus's bolt: a session's scroll thumb (work.js). At rest it glows still; while the thread moves its forks and core flicker. */
.mark-bolt { position: absolute; inset: 0; pointer-events: none; }
.mark-bolt svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.mark-bolt .bolt-flash { opacity: 0; will-change: opacity; }
.work-rail.moving .bolt-flash { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .work-rail.moving .bolt-flash { animation: bolt-flash 0.42s steps(1) infinite; }
}
@keyframes bolt-flash { 0% { opacity: 1; } 14% { opacity: 0.2; } 24% { opacity: 0.95; } 48% { opacity: 0.1; } 60% { opacity: 1; } 82% { opacity: 0.45; } }