/* =====================================================================
   Neklikejte.cz – GRID // ONLINE
   Vlastní CSS jen pro to, co Tailwind neumí: clip-path, keyframes,
   mask-image, pseudo-elementy, stavy řízené z JS.
   ===================================================================== */

/* Registrovaná proměnná, aby šel animovat poloměr masky mikro-mřížky. */
@property --r {
  syntax: '<length>';
  inherits: true;
  initial-value: 180px;
}

/* ---------- Základ ---------- */
/* Pozadí je na <html>, ne na <body>: jinak by body překrylo vrstvy se z-index < 0. */
html {
  background: #05070D;
  color-scheme: dark;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }
body { min-height: 100%; }
html.is-reduced { scroll-behavior: auto; }

/* ---------- Dekorativní HUD texty ----------
   Text žije v atributu data-hud, ne v DOM – crawlery/LLM ho nečtou jako obsah.
   Dynamické hodnoty (souřadnice, BRG/DST, psací efekt) mění JS přes atribut. */
[data-hud]::before { content: attr(data-hud); }

/* ---------- Zkosené rohy (signature tvar) ---------- */
.cut    { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.cut-sm { --c: 8px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }

/* ---------- Focus (clip-path je vždy na vnitřním prvku, outline tedy není ořezán) ---------- */
:focus-visible {
  outline: 2px solid #00E5FF;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 229, 255, .25);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip-link ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 80;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

/* =====================================================================
   Pozadí: Grid World, spotlight, mikro-mřížka
   ===================================================================== */
#world {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  transform-origin: 50% 45%;
  transform: scale(1.06);
}
#grid { display: block; width: 100%; height: 100%; }

#spot,
#micro {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  --mx: -9999px;
  --my: -9999px;
}
#spot {
  z-index: -2;
  background: radial-gradient(circle 220px at var(--mx) var(--my), rgba(0, 229, 255, .10), transparent 70%);
}
#micro {
  z-index: -2;
  background-image:
    linear-gradient(rgba(0, 229, 255, .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .25) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, transparent 75%);
          mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, transparent 75%);
  transition: opacity .4s ease, --r .3s ease;
}
#micro.pressed { --r: 260px; }
#spot.on, #micro.on { opacity: 1; }
/* Touch: záblesk v místě tapu (600 ms, pak vyhasne) */
#spot.flash, #micro.flash { opacity: 1; transition-duration: .15s; }

/* Reduced motion: statická jemná síť přes celé pozadí */
html.is-reduced #spot { display: none; }
html.is-reduced #micro {
  opacity: .06;
  -webkit-mask-image: none;
          mask-image: none;
  transition: none;
}

/* =====================================================================
   Vlastní kurzor (crosshair)
   ===================================================================== */
#cursor { display: none; }
html.cursor-on #cursor {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .2s;
}
html.cursor-on #cursor.hidden-out { opacity: 0; }
/* Systémový kurzor schovat jen při aktivním vlastním kurzoru (žádná textová pole na stránce nejsou). */
html.cursor-on, html.cursor-on * { cursor: none !important; }

#cursor .c-dot,
#cursor .c-ring-pos {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
#cursor .c-dot {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #00E5FF;
}
#cursor .c-ring {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  color: rgba(0, 229, 255, .6);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .2s;
}
#cursor .c-circle {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: opacity .2s;
}
#cursor .c-tick {
  position: absolute;
  background: currentColor;
  transition: opacity .2s;
}
#cursor .t-n, #cursor .t-s { left: 13.5px; width: 1px; height: 5px; }
#cursor .t-e, #cursor .t-w { top: 13.5px; height: 1px; width: 5px; }
#cursor .t-n { top: -3px; }
#cursor .t-s { bottom: -3px; }
#cursor .t-e { right: -3px; }
#cursor .t-w { left: -3px; }

#cursor .c-br {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 0 solid currentColor;
  opacity: 0;
  transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
#cursor .br-tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; transform: translate(4px, 4px); }
#cursor .br-tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; transform: translate(-4px, 4px); }
#cursor .br-bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; transform: translate(4px, -4px); }
#cursor .br-br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; transform: translate(-4px, -4px); }

/* Nad odkazem / tlačítkem: kroužek 44px, ticky -> zaměřovací závorky, červená */
#cursor.hover .c-ring { transform: scale(1.571); color: #FF3040; }
#cursor.hover .c-circle,
#cursor.hover .c-tick { opacity: 0; }
#cursor.hover .c-br { opacity: 1; transform: none; }
#cursor.down .c-ring { transform: scale(.8); }
#cursor.hover.down .c-ring { transform: scale(1.25); }

/* =====================================================================
   Boot overlay
   ===================================================================== */
#boot { display: none; }
html.boot #boot {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #05070D;
  clip-path: inset(0 0 0 0);
  cursor: default;
}
#boot .boot-log {
  margin: 0;
  font: 400 13px/1.8 "JetBrains Mono", ui-monospace, monospace;
  color: #1A9BB0;
  white-space: pre;
}
#boot .boot-line { opacity: 0; }
#boot .boot-line.on { opacity: 1; }
#boot .boot-line:last-child.on { color: #00E5FF; }
/* Zavření do horizontální linky */
html.boot #boot.closing {
  animation: boot-close 300ms cubic-bezier(.7, 0, .3, 1) forwards;
  pointer-events: none;
}
@keyframes boot-close {
  0%   { clip-path: inset(0 0 0 0); opacity: 1; }
  70%  { clip-path: inset(calc(45% - 1px) 0 calc(55% - 1px) 0); opacity: 1; }
  100% { clip-path: inset(45% 0 55% 0); opacity: 0; }
}

/* =====================================================================
   Header, footer
   ===================================================================== */
.site-header::after,
.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .4), transparent);
}
.site-header::after { bottom: 0; }
.site-footer::before { top: 0; }

/* Status LED – pulz 2 s */
.led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFB020;
  box-shadow: 0 0 6px #FFB020;
  animation: led 2s ease-in-out infinite;
}
@keyframes led { 50% { opacity: .35; } }

.eot { animation: blink 1.2s steps(2, jump-none) infinite; }

/* =====================================================================
   Glitch (logo, H2) – spouští JS třídou .glitching (max 1x za 2 s)
   ===================================================================== */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch.glitching::before {
  opacity: 1;
  color: #FF3040;
  transform: translateX(-2px);
  animation: glitch-a 350ms steps(1, end) both;
}
.glitch.glitching::after {
  opacity: 1;
  color: #00E5FF;
  transform: translateX(2px);
  animation: glitch-b 350ms steps(1, end) both;
}
@keyframes glitch-a {
  0%   { clip-path: inset(10% 0 70% 0); }
  20%  { clip-path: inset(60% 0 12% 0); }
  40%  { clip-path: inset(30% 0 45% 0); }
  60%  { clip-path: inset(82% 0 2% 0); }
  80%  { clip-path: inset(4% 0 86% 0); }
  100% { clip-path: inset(50% 0 50% 0); }
}
@keyframes glitch-b {
  0%   { clip-path: inset(72% 0 6% 0); }
  20%  { clip-path: inset(15% 0 64% 0); }
  40%  { clip-path: inset(48% 0 30% 0); }
  60%  { clip-path: inset(2% 0 80% 0); }
  80%  { clip-path: inset(66% 0 18% 0); }
  100% { clip-path: inset(50% 0 50% 0); }
}
html.is-reduced .glitch:hover,
html.is-touch .glitch:hover { color: #00E5FF; }
html.is-reduced .glitch::before,
html.is-reduced .glitch::after { display: none; }

/* Scramble: skutečný text skrytý, animuje se jen aria-hidden kopie */
.scramble.scrambling .scr-real { opacity: 0; }
.scr-fake { position: absolute; inset: 0; color: #00E5FF; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero-text { isolation: isolate; }
/* Ztmavení pod textem. Přesah jen doleva/nahoru/dolů (doprava by způsobil
   horizontální přetečení); elipsa končí uvnitř boxu, takže nevzniká hrana. */
.hero-text::before {
  content: '';
  position: absolute;
  inset: -20% 0 -20% -15%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5, 7, 13, .85) 0%, rgba(5, 7, 13, .6) 45%, rgba(5, 7, 13, 0) 100%);
}
/* Akcent v H1: plná barva (žádný průhledný text s background-clip),
   aby kontrastní nástroje (WAVE, axe) měřily skutečnou barvu – 5.5:1 vůči void. */
.hero-grad {
  color: #FF3040;
  text-shadow: 0 0 14px rgba(255, 48, 64, .45), 0 0 32px rgba(255, 48, 64, .2);
}
@keyframes blink { 50% { opacity: .2; } }

/* HUD terč */
.target .t-outer,
.target .t-mid-ring { animation: spin 40s linear infinite; }
.target .t-mid-ring { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Scroll indikátor: svislá linka + světelný bod */
.scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  background: #16324A;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 8px;
  background: #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
  animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(-8px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}
@media (max-height: 640px) { .scroll-ind { display: none; } }

/* =====================================================================
   Tlačítka
   ===================================================================== */
.btn-primary,
.btn-outline { display: inline-block; text-decoration: none; }
.btn-primary { transition: filter .25s ease; }
.btn-primary .btn-face { position: relative; overflow: hidden; transition: transform .15s ease; }

/* Glow (drop-shadow respektuje tvar clip-path) */
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: drop-shadow(0 0 1px #00E5FF) drop-shadow(0 0 12px rgba(0, 229, 255, .55)) drop-shadow(0 0 28px rgba(0, 229, 255, .25));
}
/* Světelný pruh přejede jednou při každém najetí */
.btn-primary .btn-face::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-160%) skewX(-20deg);
  pointer-events: none;
}
.btn-primary:hover .btn-face::after { animation: sheen 600ms ease-out; }
@keyframes sheen {
  from { transform: translateX(-160%) skewX(-20deg); }
  to   { transform: translateX(330%) skewX(-20deg); }
}

.btn-outline .btn-frame { transition: filter .25s ease; }
.btn-outline .btn-fill { transition: background-color .2s ease; }
.btn-outline:hover .btn-frame,
.btn-outline:focus-visible .btn-frame {
  filter: drop-shadow(0 0 10px rgba(255, 48, 64, .5)) drop-shadow(0 0 26px rgba(255, 48, 64, .2));
}
.btn-outline:hover .btn-fill,
.btn-outline:focus-visible .btn-fill {
  /* tónování vrstvit přes neprůhlednou void, jinak prosvítá červený rámeček pod výplní */
  background-color: #05070D;
  background-image: linear-gradient(rgba(255, 48, 64, .1), rgba(255, 48, 64, .1));
}

/* :active = scale + glow (zpětná vazba na dotyk i klik) */
.btn-primary:active .btn-face,
.btn-outline:active .btn-frame { transform: scale(.97); }
.btn-primary:active { filter: drop-shadow(0 0 12px rgba(0, 229, 255, .55)); }

/* Odkaz v headeru */
.nav-link { position: relative; transition: color .2s; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: #00E5FF;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

/* =====================================================================
   Karty služeb (tilt + glow za kurzorem)
   ===================================================================== */
.tilt-scene { perspective: 900px; }
.card {
  --px: 50%;
  --py: 0%;
  position: relative;
  height: 100%;
  padding: 1px;
  /* rámeček: hrana nejvíc svítí nejblíž kurzoru */
  background: radial-gradient(360px circle at var(--px) var(--py), rgba(0, 229, 255, .95), #16324A 55%);
  transition: filter .3s ease;
}
.card.is-tilting { will-change: transform; }
.card:hover,
.card:active { filter: drop-shadow(0 0 10px rgba(0, 229, 255, .35)); }

.card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--px) var(--py), rgba(0, 229, 255, .18), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}
.card:hover .card-inner::before,
.card:active .card-inner::before { opacity: 1; }
.card-inner > * { position: relative; }
.card-icon { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.card.is-tilting .card-icon { transition: none; }

/* Spodní hrana: „nabití“ zleva doprava */
.card .charge {
  position: absolute;
  left: 0;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: #16324A;
  overflow: hidden;
}
.card .charge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms ease;
}
.card:hover .charge::after,
.card:active .charge::after { transform: scaleX(1); }

/* Touch: statický glow uprostřed horní hrany */
html.is-touch .card,
html.is-reduced .card { --px: 50% !important; --py: 0% !important; transform: none !important; }

/* SVG obrys, který se při reveal „vykreslí“ (body polygonu dopočítá JS) */
.card .outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.card .outline polygon {
  fill: none;
  stroke: #00E5FF;
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
html.js .reveal.in .card .outline polygon {
  animation: draw 700ms ease-out forwards, fade-out 600ms 900ms ease forwards;
}
@keyframes draw { from { stroke-dashoffset: 100; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* =====================================================================
   Terminálový panel + HUD rohové značky
   ===================================================================== */
.term { --px: 50%; --py: 0%; }
.term-frame {
  background: radial-gradient(420px circle at var(--px) var(--py), rgba(0, 229, 255, .8), #16324A 60%);
}
.term-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--px) var(--py), rgba(0, 229, 255, .10), transparent 60%);
}
.term-inner > * { position: relative; }
html.is-touch .term,
html.is-reduced .term { --px: 50% !important; --py: 0% !important; }

.hud-corners {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  --l: #00E5FF;
  background:
    linear-gradient(var(--l), var(--l)) left top / 12px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) left top / 1px 12px no-repeat,
    linear-gradient(var(--l), var(--l)) right top / 12px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) right top / 1px 12px no-repeat,
    linear-gradient(var(--l), var(--l)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--l), var(--l)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) right bottom / 1px 12px no-repeat;
}

/* Datové odkazy (tel / mail): caret vlevo, linka se nabije */
.data-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 0;
  text-decoration: none;
  transition: color .2s ease;
}
.data-link::before {
  content: '>';
  position: absolute;
  left: -.8em;
  color: #00E5FF;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.data-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .45rem;
  height: 1px;
  background: #00E5FF;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.data-link:hover,
.data-link:focus-visible { color: #00E5FF; }
.data-link:hover::before,
.data-link:focus-visible::before { opacity: 1; transform: none; }
.data-link:hover::after,
.data-link:focus-visible::after { transform: scaleX(1); }

/* README.md v okně konzole (všechny barvy ≥ 4.5:1 vůči deep) */
.md {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.md .md-prompt { color: #1A9BB0; }           /* cyan-dim */
.md .md-mk     { color: #66849A; }           /* faint – markdown syntaxe */
.md .md-h1     { color: #00E5FF; font-weight: 500; font-size: 1.15em; }
.md .md-h2     { color: #FF3040; font-weight: 500; }
.md .md-quote  { color: #8FA9BF; font-style: italic; }
.md .md-link {
  color: #00E5FF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* tap target: inline odkaz v textu je výjimka WCAG 2.5.8, padding zvětší plochu bez posunu řádků */
  padding: 6px 0;
}
.md .md-link:hover { color: #7FF3FF; }
.md .md-caret { animation: blink 1.2s steps(2, jump-none) infinite; }
html.is-reduced .md .md-caret { animation: none; }

/* Toast COPIED_TO_CLIPBOARD */
.toast {
  position: absolute;
  left: 0;
  top: 10px;
  margin: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: none; }

/* =====================================================================
   Reveal sekcí (jen s JS; bez JS je vše vidět)
   ===================================================================== */
html.js .reveal > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js .reveal.in > * { opacity: 1; transform: none; }

/* =====================================================================
   Reduced motion – vše hned viditelné, žádné nekonečné animace
   ===================================================================== */
html.is-reduced .reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; }
html.is-reduced .card .outline { display: none; }
html.is-reduced .target .t-outer,
html.is-reduced .target .t-mid-ring,
html.is-reduced .scroll-line::after,
html.is-reduced .eot,
html.is-reduced .led,
html.is-reduced .btn-primary:hover .btn-face::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}