/* ────────────────────────────────────────────────────────────────────
   VETO · the page's sign for "this way". Since 2026-10-19 the "Käsin" of napit-6 (before it "Yksi veto").
   A ring in the hero loop's fine pen, a little over one round and uneven, and inside it a hand-drawn arrow head.
   Under the cursor the pen goes round the ring again and draws the arrow its stem, a disc fills the ring and the
   arrow turns to the opposite colour; the ring is drawn towards the cursor (the magnet), the words a third as far.
   Markup: <i class="veto" aria-hidden="true"></i> after the words of a link; veto.js draws it and wraps the words.
   Size: --d (the ring, default 1.5em); --sw the pen in the drawing's units (60 across), thicker for small rings.
   --vasta (the arrow on the filled disc) is set by veto.js from the link's own colour.
   ──────────────────────────────────────────────────────────────────── */
.veto{--d:1.5em; position:relative; display:inline-block; flex:none; width:var(--d); height:var(--d); margin-right:calc(var(--d) * .08); font-style:normal;
  translate:var(--mx,0px) var(--my,0px); transition:translate .7s cubic-bezier(.2,1.6,.3,1)}
.veto svg{position:absolute; left:50%; top:50%; width:125%; height:125%; max-width:none; translate:-50% -50%; overflow:visible; pointer-events:none}
/* no non-scaling-stroke: with it Chrome measures the dashes on screen and cuts the end of the line */
.veto path{fill:none; stroke:currentColor; stroke-width:var(--sw,.95); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0}
.veto .veto-levy{fill:currentColor; stroke:none; transform-box:fill-box; transform-origin:center; scale:0; transition:scale .55s cubic-bezier(.2,.7,.2,1)}
.veto .veto-varsi{stroke-dashoffset:1; transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1) .1s, stroke .35s}
.veto .veto-karki{translate:-3.5px 0; transition:translate .55s cubic-bezier(.2,.7,.2,1) .1s, stroke .35s}
.vetaa:hover .veto .veto-rengas{animation:veto-piirra 1s cubic-bezier(.2,.7,.2,1)}
.vetaa:hover .veto .veto-levy{scale:1}
.vetaa:hover .veto .veto-varsi{stroke-dashoffset:0}
.vetaa:hover .veto .veto-karki{translate:0 0}
.vetaa:hover .veto .veto-varsi,.vetaa:hover .veto .veto-karki{stroke:var(--vasta,#efedeb)}
@keyframes veto-piirra{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
/* on a touch screen (veto.js: .odottaa) the ring waits undrawn until the sign is in view; then the pen draws it
   and gives the arrow its stem (.piirtyy), since a finger has no hover to show it */
.veto.odottaa .veto-rengas{stroke-dashoffset:1}
.veto.odottaa .veto-karki{opacity:0}
.veto.piirtyy .veto-rengas{stroke-dashoffset:0; transition:stroke-dashoffset 1.1s cubic-bezier(.45,.1,.3,1) .2s}
.veto.piirtyy .veto-varsi{stroke-dashoffset:0; transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1) 1.1s}
.veto.piirtyy .veto-karki{opacity:1; translate:0 0; transition:opacity .3s ease 1.2s, translate .55s cubic-bezier(.2,.7,.2,1) 1.1s}
.veto-s{display:inline-block; translate:calc(var(--mx,0px) * .35) calc(var(--my,0px) * .35); transition:translate .7s cubic-bezier(.2,1.6,.3,1)}
.veto-liikkuu .veto,.veto-liikkuu .veto-s{transition-duration:.18s; transition-timing-function:ease-out}
@media (prefers-reduced-motion:reduce){
  .veto,.veto-s{translate:none; transition:none}
  .vetaa:hover .veto path{animation:none}
}