/* Soontek drawn pictures
   Line drawings made for the subject of a page, instead of repeating product photos.
   Loaded after soontek-tuotesivu.css by the pages that use them. No script.

   Rules, the same as on the harness page (vault: wiki/mainossivujen-liike.md):
   - Every base style is the FINAL state. An animation runs from hidden into it, so
     prefers-reduced-motion, print and old browsers all show the finished drawing.
   - A drawing carries no information of its own: it is aria-hidden or has a caption,
     and the same thing is said in the text.
   Colours of the gauge states are the ones the devices use: green inside the accepted
   range, red for a fault. The base colour of an arc is set per job; here it is the
   page accent. */

.ill {
  --ill-line: rgba(255, 255, 255, .62);
  --ill-dim: rgba(255, 255, 255, .26);
  --ill-ok: #00c853;
  --ill-fault: #d50000;
  --ill-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  display: block; width: 100%; height: auto;
  fill: none; stroke: var(--ill-line); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ill .o { stroke: var(--accent); }
.ill .ok { stroke: var(--ill-ok); }
.ill .bad { stroke: var(--ill-fault); }
.ill .dim { stroke: var(--ill-dim); }
.ill .dash { stroke-dasharray: 4 5; }
.ill .f { fill: var(--accent); stroke: none; }
.ill .fw { fill: var(--ill-line); stroke: none; }
.ill .fk { fill: #000; }
.ill .fbad { fill: var(--ill-fault); stroke: none; }
.ill .butt { stroke-linecap: butt; }
.ill text { stroke: none; fill: var(--ink-2); font: 11px var(--ill-mono); letter-spacing: .14em; }
.ill text.cap { fill: #808483; font-size: 9.5px; letter-spacing: .08em; }
.ill text.num { fill: #fff; font: 700 56px "Montserrat", Arial, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ill text.lbl { fill: #fff; font: 400 13px "Montserrat", Arial, sans-serif; letter-spacing: 0; }
.ill text.o { fill: var(--accent); stroke: none; }
.ill text.mid { text-anchor: middle; } .ill text.end { text-anchor: end; }

/* A framed drawing, used where a page used to have a photograph. */
.drawing { margin: 0; border: 1px solid var(--line-soft); background: #050607; padding: 1.5rem; position: relative; }
.drawing figcaption, figure.plain figcaption { font-size: .9rem; color: var(--ink-2); padding-top: 1rem; max-width: 44rem; }
.drawing.screen { padding: clamp(.8rem, 3vw, 2rem); background: #0a0b0d; }
.drawing.screen .ill { background: #000; border-radius: 10px; outline: 1px solid rgba(255,255,255,.18); outline-offset: 6px; }
/* Wide drawings keep a readable size on a phone and scroll sideways instead of shrinking. */
.drawing.scroll { overflow-x: auto; }
.drawing.scroll .ill { min-width: 46rem; }

.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.states figure { margin: 0; border: 1px solid var(--line-soft); padding: 1.4rem 1.4rem 1.2rem; background: #050607; }
.states .ill { max-width: 13rem; margin: 0 auto; }
.states figcaption { font-size: .9rem; color: var(--ink-2); padding-top: .8rem; }
.states figcaption b { display: block; color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 900; margin-bottom: .2rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 3rem; align-items: center; margin-top: 3rem; }
.split ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.split li { padding: .7rem 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: .98rem; }
.split li b { color: #fff; font-weight: 700; }

@media (max-width: 975px) { .states { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .split .ill { max-width: 15rem; } }

/* ---- motion ----------------------------------------------------------------
   [pathLength="1"] lines draw themselves; .sweep arcs open like a gauge at power-on.
   At the top of a page this runs on load. Further down it is tied to scrolling where
   the browser can do that without script, and is simply finished where it cannot. */
@media (prefers-reduced-motion: no-preference) {
  /* .sweep and .range carry their final dash pattern in a style attribute, so they are left alone here. */
  .ill [pathLength="1"]:not(.sweep):not(.range) { stroke-dasharray: 1; }
  .ill-load [pathLength="1"]:not(.sweep):not(.range) { animation: ill-draw 1.6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * .14s + .2s); }
  .ill-load .sweep { animation: ill-sweep 1.8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * .14s + .4s); }
  .ill .pulse { animation: ill-pulse 1.6s ease-in-out infinite; }
  @supports (animation-timeline: view()) {
    .ill-view [pathLength="1"]:not(.sweep):not(.range) { animation: ill-draw linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    .ill-view .sweep { animation: ill-sweep linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes ill-draw { from { stroke-dashoffset: 1; } }
@keyframes ill-sweep { from { stroke-dasharray: 0 1; } }
@keyframes ill-pulse { 50% { opacity: .25; } }

@media print { .drawing { background: none; } }