/* Vrstva linky. Barvy nastavuje stránka proměnnými --linka a --akcent. */
.linka-vrstva { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; overflow: visible; }
.linka-vrstva .pas { fill: var(--linka); }
.linka-vrstva .kresba-akcent { fill: var(--akcent); transition: opacity 260ms ease-out; }

/* Pero nad papírem (LINKA2.znacka): měkký stín, světlo a hrot. Polohu, výšku nad papírem a protažení
   nastavuje skript; tady tvar, barvy a dýchání. Stín jsou tři překrývající se měkké kapky, které se
   pomalu přelévají, takže obrys není nikdy kruh. Stín násobí barvy pod sebou (text pod ním zůstane
   černý, nad tmavou fotkou ho ale není vidět). Světlo je kulaté kolem hrotu a barvy pod sebou
   zesvětluje; skript ho spolu se světlým lemem hrotu rozsvítí jen nad tmavou fotkou (měří jas pod
   perem), nad textem by zesvětlilo písmo. Vzhled ladí proměnné --pero-*: výchozí hodnoty jsou tady,
   ladicí panel prototypu (ladeni-pera.js) je přepisuje na :root. Výchozí hodnoty = vzhled C (ADR-006). */
:root {
  --pero-stin: 46px;        /* průměr stínu ve vzduchu */
  --pero-sytost: 30%;       /* sytost stínu uprostřed; v polovině poloměru je zhruba poloviční */
  --pero-svetlo: 0.55;      /* síla světla (0 až 1), tj. jak je pero vidět nad tmavou fotkou */
  --pero-dech: 4.2s;        /* tempo dýchání */
  --pero-dech-min: 0.96;
  --pero-dech-max: 1.04;
  --pero-hrot: 5px;
  --pero-lem: 1.5px;        /* světlý lem hrotu ve vzduchu (nad tmavou fotkou), na papíře zmizí */
}
.pero-aura, .pero-svetlo, .pero-hrot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 520ms ease; will-change: transform; }
.pero-aura { z-index: 6; mix-blend-mode: multiply; }
.pero-svetlo { z-index: 6; mix-blend-mode: screen; }
.pero-hrot { z-index: 7; }
.pero-aura.viditelne, .pero-svetlo.viditelne, .pero-hrot.viditelne { opacity: 1; }
.pero-aura.skok, .pero-svetlo.skok, .pero-hrot.skok { opacity: 0; transition: none; }
.pero-natah { position: absolute; left: 0; top: 0; }
.pero-dech { position: absolute; left: calc(var(--pero-stin) / -2); top: calc(var(--pero-stin) / -2); width: var(--pero-stin); height: var(--pero-stin); animation: pero-dech var(--pero-dech) ease-in-out infinite; }
.pero-dech i {
  position: absolute; inset: 8.33%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--linka) var(--pero-sytost), transparent), color-mix(in srgb, var(--linka) calc(var(--pero-sytost) * 0.48), transparent) 50%, transparent);
}
.pero-svetlo .pero-dech { opacity: var(--pero-svetlo); }
.pero-svetlo .pero-dech i { background: radial-gradient(closest-side, rgb(196 208 255 / 0.62), rgb(196 208 255 / 0.26) 50%, transparent); }
.pero-dech i:nth-child(1) { animation: pero-kapka1 6.3s ease-in-out infinite; }
.pero-dech i:nth-child(2) { animation: pero-kapka2 7.9s ease-in-out infinite; }
.pero-dech i:nth-child(3) { animation: pero-kapka3 5.4s ease-in-out infinite; }
@keyframes pero-dech { 0%, 100% { transform: scale(var(--pero-dech-min)); } 50% { transform: scale(var(--pero-dech-max)); } }
/* Posuny kapek v procentech jejich velikosti, aby se přelévaly stejně u malého i velkého stínu. */
@keyframes pero-kapka1 { 0%, 100% { transform: translate(-10%, 5%) scale(0.9); } 33% { transform: translate(6.7%, -8.3%) scale(1.04); } 66% { transform: translate(5%, 10%) scale(0.86); } }
@keyframes pero-kapka2 { 0%, 100% { transform: translate(10%, -3.3%) scale(0.98); } 40% { transform: translate(-8.3%, 6.7%) scale(0.84); } 75% { transform: translate(-5%, -10%) scale(1.02); } }
@keyframes pero-kapka3 { 0%, 100% { transform: translate(0, -10%) scale(0.86); } 30% { transform: translate(-10%, 3.3%) scale(1); } 70% { transform: translate(10%, 6.7%) scale(0.92); } }
.pero-hrot-telo { position: absolute; left: 0; top: 0; }
.pero-hrot i { position: absolute; border-radius: 50%; }
.pero-hrot .bod { left: calc(var(--pero-hrot) / -2); top: calc(var(--pero-hrot) / -2); width: var(--pero-hrot); height: var(--pero-hrot); background: var(--linka); }
.pero-hrot .lem { --d: calc(var(--pero-hrot) + 2 * var(--pero-lem)); left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d); background: rgb(255 255 255 / 0.92); }
@media (prefers-reduced-motion: reduce) { .pero-aura, .pero-svetlo, .pero-hrot { display: none; } }

/* Přepínač tahu pro porovnání profilů (na výsledném webu nebude). */
.ovladani {
  position: fixed; left: 14px; bottom: 14px; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 7px 9px; border-radius: 10px; background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 6px 24px rgb(20 24 40 / 0.1);
  font: 12px/1.2 system-ui, sans-serif; color: #50545C;
}
.ovladani b { font-weight: 600; color: #1B1D22; }
.ovladani a { color: #1B1D22; }
.ovladani a[aria-current="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ovladani button { font: inherit; color: #1B1D22; background: transparent; cursor: pointer; border: 1px solid #D9DBE0; border-radius: 999px; padding: 3px 9px; }
.ovladani button[aria-pressed="true"] { background: #1B1D22; border-color: #1B1D22; color: #F7F7F5; }