/* gfx.css — generováno z build/assets/gfx/tokens.json přes _gfx.export_css().
   Needituj ručně, uprav tokeny a vygeneruj znovu. Stejný designový jazyk jako PDF. */

:root {
  --gfx-accent: #FFC500;
  --gfx-accent-fg: #0D0D0D;
  --gfx-base: #F4F4F2;
  --gfx-c1: #FFCB1A;  --gfx-c2: #C8FF1A;  --gfx-c3: #FF6F1A;  --gfx-c4: #FFD443;
  --gfx-r-xs: 4px;
  --gfx-r-sm: 8px;
  --gfx-r-md: 14px;
  --gfx-r-lg: 22px;
  --gfx-r-xl: 32px;
  --gfx-r-pill: 999px;
  --gfx-sh-tight: 0 4px 14px 0px rgba(14,21,14,0.10);
  --gfx-sh-soft: 0 16px 38px -4px rgba(14,21,14,0.13);
  --gfx-sh-lift: 0 30px 72px -8px rgba(14,21,14,0.17);
  --gfx-sh-float: 0 48px 110px -12px rgba(14,21,14,0.20);
  --gfx-chrome: #F0F0F2;
  --gfx-border: #DEDEE2;
  --gfx-dot: #C8C8CE;
  --gfx-pill: #FFFFFF;
  --gfx-url: #8A8A92;
  --gfx-bar: 38px;
  --gfx-phone-body: #E8E8EC;
  --gfx-phone-border: #D2D2D8;
  --gfx-skel-bg: #DEDEDC;
  --gfx-skel-hi: #C3C3C2;
  --gfx-skel-delay: 300ms;
  --gfx-skel-shimmer: 1400ms;
}

/* ---- pozadí: mesh gradient, totéž co g.mesh() v PDF ---- */
.gfx-mesh {
  background:
    radial-gradient(60% 48% at 12% 8%,  var(--gfx-c1) 0%, transparent 62%),
    radial-gradient(52% 46% at 88% 18%, var(--gfx-c2) 0%, transparent 60%),
    radial-gradient(64% 52% at 72% 92%, var(--gfx-c3) 0%, transparent 64%),
    radial-gradient(48% 44% at 22% 86%, var(--gfx-c4) 0%, transparent 58%),
    var(--gfx-base);
}
.gfx-glow {
  background:
    radial-gradient(70% 55% at 50% 0%, var(--gfx-c1) 0%, transparent 68%),
    var(--gfx-base);
}

/* ---- zrno: ubere digitální plochost velkých ploch ---- */
.gfx-grain { position: relative; isolation: isolate; }
.gfx-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- textury ---- */
.gfx-dots { background-image: radial-gradient(currentColor .9px, transparent 1px); background-size: 22px 22px; opacity: .16; }
.gfx-grid { background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 34px 34px; opacity: .13; }
.gfx-diag { background-image: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 14px); opacity: .10; }

/* ---- rám prohlížeče: stejná stavba jako g.browser_frame() ---- */
.gfx-browser {
  position: relative; border-radius: var(--gfx-r-md); overflow: hidden;
  background: var(--gfx-chrome); border: 1px solid var(--gfx-border);
  box-shadow: var(--gfx-sh-soft); padding-top: var(--gfx-bar); line-height: 0;
}
.gfx-browser::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--gfx-bar);
  border-bottom: 1px solid var(--gfx-border); z-index: 2;
  background:
    radial-gradient(circle 5px at 16px 50%, var(--gfx-dot) 97%, transparent 100%),
    radial-gradient(circle 5px at 34px 50%, var(--gfx-dot) 97%, transparent 100%),
    radial-gradient(circle 5px at 52px 50%, var(--gfx-dot) 97%, transparent 100%),
    var(--gfx-chrome);
}
.gfx-browser::after {
  content: attr(data-url); position: absolute; top: 8px; left: 76px; right: 14px;
  height: calc(var(--gfx-bar) - 16px); border-radius: 999px; z-index: 2;
  background: var(--gfx-pill); color: var(--gfx-url);
  font: 400 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; align-items: center; padding-left: 12px; letter-spacing: .01em;
}
.gfx-browser > img, .gfx-browser > video { display: block; width: 100%; height: auto; }

/* ---- rám telefonu ---- */
.gfx-phone {
  position: relative; width: 100%; max-width: 320px; padding: 9px;
  border-radius: 38px; background: var(--gfx-phone-body);
  border: 1px solid var(--gfx-phone-border); box-shadow: var(--gfx-sh-lift); line-height: 0;
}
.gfx-phone::before {
  content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 14px; border-radius: 999px; background: #08080A; z-index: 2;
}
.gfx-phone > img { display: block; width: 100%; border-radius: 30px; }

/* ---- treatment obrázků ---- */
.gfx-shot { border-radius: var(--gfx-r-md); box-shadow: var(--gfx-sh-soft); display: block; max-width: 100%; }
.gfx-shot--lift { box-shadow: var(--gfx-sh-lift); }
.gfx-shot--float { box-shadow: var(--gfx-sh-float); }
.gfx-tilt-l { transform: perspective(1600px) rotateY(7deg) rotateX(1.5deg); }
.gfx-tilt-r { transform: perspective(1600px) rotateY(-7deg) rotateX(1.5deg); }
/* duotone: grayscale patří na <img>, ne na kontejner — jinak filtr odbarví i podklad.
   multiply přes akcent mapuje černou na černou a bílou na akcent, stejně jako g.duotone(). */
.gfx-duotone { background: var(--gfx-accent); isolation: isolate; line-height: 0; }
.gfx-duotone > img { display: block; width: 100%;
  filter: grayscale(1) contrast(1.12); mix-blend-mode: multiply; }

/* ---- skeleton loadery ----------------------------------------------------
   Pravidlo: skeleton má mít rozměry FINÁLNÍHO obsahu. Když se po načtení
   layout pohne, je skeleton horší než prázdná plocha.
   Značkování: kontejner aria-busy="true", skeletony aria-hidden="true".   */
.gfx-skel {
  display: block; position: relative; overflow: hidden;
  background: var(--gfx-skel-bg);
  border-radius: var(--gfx-r-sm);
  /* pod --gfx-skel-delay se neukáže vůbec — krátké načtení má proběhnout bez bliknutí */
  opacity: 0; animation: gfx-skel-in 1ms linear var(--gfx-skel-delay) forwards;
}
.gfx-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--gfx-skel-hi), transparent);
  animation: gfx-skel-shimmer var(--gfx-skel-shimmer) ease-in-out var(--gfx-skel-delay) infinite;
}
@keyframes gfx-skel-in { to { opacity: 1; } }
@keyframes gfx-skel-shimmer { 100% { transform: translateX(100%); } }

/* tvary se odvozují od typografie okolo, ne od pevných pixelů */
.gfx-skel-text   { height: 1em; margin: .35em 0; border-radius: var(--gfx-r-xs); }
.gfx-skel-text--short { width: 62%; }             /* poslední řádek odstavce nikdy nedoteče */
.gfx-skel-title  { height: 1.4em; width: 45%; margin: .3em 0 .7em; }
.gfx-skel-img    { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--gfx-r-md); }
.gfx-skel-avatar { width: 40px; height: 40px; border-radius: var(--gfx-r-pill); }
.gfx-skel-btn    { height: 2.6em; width: 9em; border-radius: var(--gfx-r-pill); }
[aria-busy="true"] .gfx-skel { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gfx-tilt-l, .gfx-tilt-r { transform: none; }
  /* stav zůstane vidět, jen se nehýbe */
  .gfx-skel::after { animation: none; }
}