/* Further illustration studies for Monitoring (globus): new values of the `monitor` Pult axis.
   Kept in their own file so they can be built in parallel with the others. */

/* Tečková mapa (dots): the world as a grid of dim ice dots (drawn by
   illustrations-monitor.js); a soft band of light keeps scanning across them
   from west to east, and two yellow points, Finland and Japan, pulse where
   new notices come in. */
.monitor-dots {
  --dots-land: color-mix(in srgb, var(--ice) 34%, transparent);
  --dots-scan: var(--ice);
  --dots-scan-cycle: 9s;
  --dots-pulse-cycle: 2.8s;
  --dots-pulse-grow: 2.6;
}
.monitor-dots svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-monitor="dots"] .world { min-height: 0; aspect-ratio: 600 / 280; margin-left: 0; }
[data-monitor="dots"] .globe, [data-monitor="dots"] .location { display: none; }
[data-monitor="dots"] .monitor-dots { display: block; }
.dots-land { fill: var(--dots-land); }
.dots-band-clear { stop-color: var(--dots-scan); stop-opacity: 0; }
.dots-band-solid { stop-color: var(--dots-scan); }
.dots-scan { opacity: 0; }
.dots-point { fill: var(--accent); }
.dots-ring { fill: none; stroke: var(--accent); stroke-width: var(--monitor-stroke); opacity: .5; }
.dots-label-fi { left: 58.5%; top: 6%; }
.dots-label-jp { right: 2%; top: 44%; }
@media (prefers-reduced-motion: no-preference) {
  .dots-scan { opacity: .9; animation: monitor-dots-scan var(--dots-scan-cycle) linear infinite; }
  .dots-ring { transform-box: fill-box; transform-origin: center; animation: monitor-dots-pulse var(--dots-pulse-cycle) ease-out infinite; }
  .dots-pulse-later .dots-ring { animation-delay: calc(var(--dots-pulse-cycle) / 2); }
}
@keyframes monitor-dots-scan { to { transform: translateX(780px); } }
@keyframes monitor-dots-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(var(--dots-pulse-grow)); opacity: 0; } }

/* Hodiny (clocks): three clocks for three countries, each on its own local
   time (Czechia 9.10, Finland 10.10, Japan 16.10), the yellow second hands
   running together; under each clock a notice from there, the Japanese one
   just arrived. */
.monitor-clocks {
  --clock-face: color-mix(in srgb, var(--ice) 55%, transparent);
  --clock-hand: var(--ice);
  --clock-second: var(--accent);
  --clock-hand-width: 3;
  --clock-minute-width: 2;
  --clock-second-width: 1.5;
  --clock-sheet-drift: calc(var(--gap-xs) * -1);
}
.monitor-clocks svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-monitor="clocks"] .world { min-height: 0; aspect-ratio: 600 / 450; margin-left: 0; }
[data-monitor="clocks"] .globe, [data-monitor="clocks"] .location { display: none; }
[data-monitor="clocks"] .monitor-clocks { display: block; }
.clock-face { fill: none; stroke: var(--clock-face); stroke-width: var(--monitor-stroke); }
.clock-ticks { fill: none; stroke: var(--clock-face); stroke-width: var(--monitor-stroke); stroke-linecap: round; }
.clock-hour, .clock-minute { stroke: var(--clock-hand); stroke-linecap: round; }
.clock-hour { stroke-width: var(--clock-hand-width); }
.clock-minute { stroke-width: var(--clock-minute-width); }
.clock-second { stroke: var(--clock-second); stroke-width: var(--clock-second-width); stroke-linecap: round; transform-box: view-box; }
.clock-pin { fill: var(--clock-second); }
.clock-sheet rect { fill: var(--monitor-sheet); }
.clock-sheet path { fill: none; stroke: var(--monitor-sheet-line); stroke-width: 3; }
.clock-sheet .clock-sheet-mark { fill: var(--accent); }
.clock-sheet-dot { fill: var(--accent); stroke: var(--dark); stroke-width: 4; }
.clock-label { transform: translateX(-50%); }
.clock-label-cz { left: 18%; top: 57.3%; }
.clock-label-fi { left: 50%; top: 48.4%; }
.clock-label-jp { left: 82%; top: 57.3%; }
@media (prefers-reduced-motion: no-preference) {
  .clock-second { animation: monitor-clock-second 60s linear infinite; }
  .clock-sheet-new { animation: monitor-clock-arrive 6s var(--ease) infinite; }
}
@keyframes monitor-clock-second { to { transform: rotate(360deg); } }
@keyframes monitor-clock-arrive { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--clock-sheet-drift); } }

/* Razítka (stamps): opportunities do not stop at the border, so the notice
   page collects stamps from the places Turbotendr watches, like a passport.
   Ink stamps for Finland, TED and the national portal; the newest one, from
   Japan, is pressed onto the page in yellow every few seconds. */
.monitor-stamps {
  --stamp-ink: color-mix(in srgb, var(--ink) 72%, transparent);
  --stamp-border: 5px;
  --stamp-text: clamp(14px, 1.35vw, 21px);
  --stamp-track: .14em;
  --stamp-round: 6.4em;
  --stamp-cycle: 7s;
  --stamp-press: 1.35;
  --stamp-sheet-tilt: -3deg;
  --stamp-bar: 6px;
  aspect-ratio: 600 / 540;
}
[data-monitor="stamps"] .world { min-height: 0; aspect-ratio: 600 / 540; margin-left: 0; }
[data-monitor="stamps"] .globe, [data-monitor="stamps"] .location { display: none; }
[data-monitor="stamps"] .monitor-stamps { display: block; }
.stamps-sheet {
  position: absolute; left: 12%; top: 5%; width: 72%; height: 88%;
  padding: var(--gap-lg) var(--gap-md);
  display: flex; flex-direction: column; gap: var(--gap-sm);
  background: var(--monitor-sheet); border-radius: var(--radius); box-shadow: var(--shadow);
  transform: rotate(var(--stamp-sheet-tilt));
}
.stamps-sheet i { display: block; height: var(--stamp-bar); border-radius: var(--stamp-bar); background: var(--monitor-board-rule); width: 78%; }
.stamps-sheet i:first-child { height: calc(var(--stamp-bar) * 2.4); width: 58%; background: var(--monitor-board-dot); margin-bottom: var(--gap-sm); }
.stamps-sheet i:nth-child(3n) { width: 64%; }
.stamps-sheet i:nth-child(4n) { width: 86%; }
.stamp {
  position: absolute; display: flex; align-items: center; justify-content: center;
  padding: var(--gap-xs) var(--gap-sm);
  border: var(--stamp-border) double var(--stamp-ink); border-radius: var(--radius);
  color: var(--stamp-ink); font-size: var(--stamp-text); font-weight: 600; line-height: 1.2;
  letter-spacing: var(--stamp-track); text-transform: uppercase; white-space: nowrap;
  transform: rotate(var(--stamp-tilt, 0deg));
}
.stamp-round { left: 19%; top: 38%; width: var(--stamp-round); height: var(--stamp-round); padding: 0; border-radius: 50%; --stamp-tilt: -14deg; }
.stamp-oval { left: 55%; top: 24%; padding: var(--gap-xs) var(--gap-md); border-radius: 50%; --stamp-tilt: 9deg; }
.stamp-rect { left: 24%; top: 71%; --stamp-tilt: 4deg; }
.stamp-new { left: 44%; top: 55%; background: var(--accent); border-color: var(--ink); color: var(--ink); --stamp-tilt: -7deg; }
@media (prefers-reduced-motion: no-preference) {
  .stamp-new { animation: monitor-stamp-press var(--stamp-cycle) var(--ease) infinite; }
}
@keyframes monitor-stamp-press {
  0% { opacity: 0; transform: rotate(var(--stamp-tilt)) scale(var(--stamp-press)); }
  8% { opacity: 1; transform: rotate(var(--stamp-tilt)) scale(.96); }
  12%, 88% { opacity: 1; transform: rotate(var(--stamp-tilt)) scale(1); }
  100% { opacity: 0; transform: rotate(var(--stamp-tilt)) scale(1); }
}