/* Spoločný základ: reset, prepínač dizajnu, kresbičky, papierové zrno */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
[hidden]{display:none!important}

/* Všetky kresbičky sú obrysové a preberajú farbu textu */
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* Zrno papiera – prekrytie celej stránky */
main::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:var(--grain,.3);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Prepínač ---------- */
.switch-bar{
  position:sticky;top:0;z-index:100;display:flex;justify-content:center;gap:10px;padding:10px 16px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.segment{display:inline-flex;padding:3px;border-radius:999px;background:rgba(0,0,0,.07);font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.segment button{
  display:flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;color:#555;
  padding:8px 16px;border-radius:999px;font:inherit;transition:background .2s,color .2s,box-shadow .2s;
}
.segment button i{width:9px;height:9px;border-radius:50%;background:var(--dot);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.segment button[aria-checked="true"]{background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.segment button:focus-visible{outline:2px solid #111;outline-offset:2px}

/* ---------- Prepínač jazyka (súčasť stránky, farbu preberá z dizajnu) ---------- */
.lang{display:flex;align-items:center;gap:6px;font:600 .75rem/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em}
.lang span{opacity:.4}
.lang button{border:0;background:none;padding:6px 2px;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;opacity:.5;transition:opacity .2s}
.lang button:hover{opacity:.8}
.lang button[aria-checked="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.lang button:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Skrytie neaktívneho dizajnu ešte pred spustením JS */
html[data-style="atrament"] [data-style-view="puder"],
html[data-style="puder"] [data-style-view="atrament"]{display:none}

/* ---------- Animácie pri príchode do obrazu ----------
   Zapína ich trieda html.anim (nastaví ju hlavička, ak používateľ nemá obmedzený pohyb).
   JS pridá .is-in, keď prvok vojde do obrazu – každá animácia prebehne raz. */
html.anim [data-anim="draw"]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1)}
html.anim [data-anim="draw"].is-in{stroke-dashoffset:0}

/* Čiary s vector-effect:non-scaling-stroke (rámiky, čiara programu) sa s pathLength rozpadnú
   na čiarky – tie sa preto odkryjú postupne zľava doprava, resp. zhora nadol */
html.anim [data-anim^="wipe"]{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.65,0,.35,1)}
html.anim [data-anim="wipe-down"]{clip-path:inset(0 0 100% 0)}
html.anim [data-anim^="wipe"].is-in{clip-path:inset(-10px)}

/* translate/scale namiesto transform, aby sa neprepísalo naklonenie nadpisov */
html.anim [data-anim="rise"]{opacity:0;translate:0 28px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.7,.2,1)}
html.anim [data-anim="rise"].is-in{opacity:1;translate:0 0}

html.anim [data-anim="pop"]{scale:0;transition:scale .5s 1.4s cubic-bezier(.3,1.7,.5,1)}
html.anim [data-anim="pop"].is-in{scale:1}