/* svejcar.cloud – HUD theme v2 (čisté CSS, bez externích fontů/skriptů kvůli CSP) */
:root{
  --bg:#080a0d; --panel:#10141a; --panel2:#161b22; --line:#252e38; --line2:#3a4552;
  --text:#dde4eb; --muted:#8a95a3; --dim:#56616e;
  --orange:#ff9a1f; --cyan:#4fd2ff;
  --font:"Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;
  --zc:var(--orange);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;overflow-x:hidden;
  background-color:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5;
  background-image:
    radial-gradient(ellipse at 50% 42%,rgba(79,210,255,.08),transparent 58%),
    radial-gradient(ellipse at 15% 100%,rgba(255,154,31,.06),transparent 45%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
/* jemné řádkování obrazovky + putující skenovací linka */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
body::after{content:"";position:fixed;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:49;
  background:linear-gradient(180deg,transparent,rgba(79,210,255,.05) 85%,rgba(79,210,255,.12));
  animation:sweep 9s linear infinite}
@keyframes sweep{from{transform:translateY(-120px)}to{transform:translateY(100vh)}}

a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- horní a spodní lišta ---------- */
.bar{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 1.25rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,154,31,.10),transparent 30%,transparent 70%,rgba(79,210,255,.08));
  animation:fadein .8s ease-out both;
}
.bar.bottom{border-bottom:0;border-top:1px solid var(--line);animation-delay:.9s}
.bar b{color:var(--orange);font-weight:600}
.bar .c{color:var(--cyan)}
.bar::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:30%;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);animation:runner 6s ease-in-out infinite}
.bar.bottom::after{top:-1px;bottom:auto;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation-delay:3s}
@keyframes runner{0%{transform:translateX(-100%)}100%{transform:translateX(430%)}}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px var(--orange);margin-right:.55rem;vertical-align:middle;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.ticks{display:inline-flex;align-items:flex-end;gap:3px;height:12px;vertical-align:middle;margin-left:.6rem}
.ticks i{width:4px;height:12px;background:var(--orange);transform-origin:bottom;animation:eq 1.4s ease-in-out infinite}
.ticks i:nth-child(2){animation-delay:-.2s}.ticks i:nth-child(3){animation-delay:-.5s}
.ticks i:nth-child(4){animation-delay:-.8s}.ticks i:nth-child(5){animation-delay:-.3s}
.ticks i:nth-child(6){animation-delay:-1s;background:var(--line2)}.ticks i:nth-child(7){animation-delay:-.6s;background:var(--line2)}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- panel se zkosenými rohy ---------- */
.panel{
  position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.panel::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--zc);box-shadow:0 0 12px var(--zc);transition:width .4s}
.panel::after{content:"";position:absolute;right:0;bottom:0;width:40%;height:1px;background:linear-gradient(90deg,transparent,var(--zc))}
/* rohové závorky */
.frame{position:absolute;inset:10px;pointer-events:none}
.frame::before,.frame::after{content:"";position:absolute;width:18px;height:18px;border-color:var(--zc);border-style:solid;opacity:.55;transition:all .35s}
.frame::before{left:0;bottom:0;border-width:0 0 1px 1px;left:22px;bottom:0}
.frame::after{right:0;top:0;border-width:1px 1px 0 0;right:22px;top:0}
/* skenovací paprsek uvnitř panelu */
.scan{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;opacity:.6;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--zc) 9%,transparent));
  animation:pscan 7s ease-in-out infinite}
@keyframes pscan{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.label em{font-style:normal;color:var(--zc)}

/* ---------- tlačítko (rovnoběžník) ---------- */
.btn{
  position:relative;isolation:isolate;display:inline-block;padding:.65rem 1.7rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--zc);transition:color .2s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--zc);
  transform:skewX(-16deg);background:transparent;transition:background .2s,box-shadow .2s;
}
.btn::after{content:"›";margin-left:.6rem;display:inline-block;transition:transform .25s}

/* ---------- reaktor kolem ikony ---------- */
.reactor{position:relative;width:10rem;height:10rem;display:grid;place-items:center}
.reactor::before,.reactor::after{content:"";position:absolute;border-radius:50%}
.reactor::before{inset:0;border:2px solid rgba(255,255,255,.07);border-top-color:var(--zc);border-right-color:var(--zc);
  filter:drop-shadow(0 0 6px var(--zc));animation:spin 14s linear infinite}
.reactor::after{inset:16px;border:1px dashed var(--line2);animation:spin 26s linear infinite reverse}
.reactor .ring-ticks{position:absolute;inset:-14px;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(var(--zc) 0 1.4deg,transparent 1.4deg 10deg);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64% 67%,transparent 68%);
          mask:radial-gradient(circle,transparent 63%,#000 64% 67%,transparent 68%);
  animation:spin 60s linear infinite reverse}
.reactor .arc{position:absolute;inset:30px;border-radius:50%;border:2px solid transparent;
  border-left-color:var(--zc);opacity:.7;animation:spin 5s cubic-bezier(.6,.1,.4,.9) infinite}
.reactor .core{position:absolute;width:5rem;height:5rem;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--zc) 30%,transparent),transparent 70%);
  animation:pulse 3.2s ease-in-out infinite}
.reactor svg{position:relative;width:3rem;height:3rem;color:var(--zc);filter:drop-shadow(0 0 8px var(--zc))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.15);opacity:1}}

/* ---------- landing: dvě poloviny ---------- */
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:1.25rem}
a.zone{
  overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.1rem;
  min-height:62vh;padding:3rem 1.5rem;text-decoration:none;text-align:center;
  transition:border-color .3s,background .3s;animation:boot .9s cubic-bezier(.2,.8,.2,1) both;
}
a.zone.int{animation-delay:.15s}
a.zone.pub{--zc:var(--cyan);animation-delay:.35s}
@keyframes boot{
  0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px) brightness(2)}
  60%{opacity:1;filter:blur(0) brightness(1.3)}
  100%{opacity:1;transform:none;filter:none}
}
.zone .label{animation:type 1s steps(26) .9s both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.zone h1{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 0 18px color-mix(in srgb,var(--zc) 25%,transparent);animation:flicker 1.2s linear .6s both}
@keyframes flicker{0%{opacity:0}10%{opacity:.8}15%{opacity:.1}25%{opacity:1}30%{opacity:.4}40%,100%{opacity:1}}
.zone p{color:var(--muted);max-width:24rem}

/* hover / fokus */
a.zone:hover,a.zone:focus-visible{border-color:var(--zc);background:linear-gradient(180deg,#1a2129,var(--panel))}
a.zone:focus-visible{outline:none}
a.zone:hover::before,a.zone:focus-visible::before{width:45%}
a.zone:hover .frame::before,a.zone:hover .frame::after,
a.zone:focus-visible .frame::before,a.zone:focus-visible .frame::after{width:34px;height:34px;opacity:1}
a.zone:hover .btn,a.zone:focus-visible .btn{color:var(--bg)}
a.zone:hover .btn::before,a.zone:focus-visible .btn::before{background:var(--zc);box-shadow:0 0 22px var(--zc)}
a.zone:hover .btn::after,a.zone:focus-visible .btn::after{transform:translateX(4px)}
a.zone:hover .reactor::before,a.zone:focus-visible .reactor::before{animation-duration:3s}
a.zone:hover .reactor .arc,a.zone:focus-visible .reactor .arc{animation-duration:1.6s}
a.zone:hover .scan,a.zone:focus-visible .scan{animation-duration:2.2s;opacity:1}

/* středová osa mezi polovinami (jen desktop) */
.axis{position:absolute;top:1.25rem;bottom:1.25rem;left:50%;width:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent)}
.axis::before{content:"";position:absolute;left:-2px;width:5px;height:60px;border-radius:3px;
  background:linear-gradient(180deg,transparent,var(--orange),var(--cyan),transparent);animation:axis 5s ease-in-out infinite alternate}
@keyframes axis{from{top:5%}to{top:85%}}

/* ---------- podstránky ---------- */
.page{position:relative;z-index:1;max-width:64rem;width:100%;margin:0 auto;padding:2.5rem 1.25rem;animation:fadein .8s ease-out .2s both}
.page h1{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:.4rem 0 .3rem;
  text-shadow:0 0 18px color-mix(in srgb,var(--zc) 25%,transparent)}
.page .sub{color:var(--muted);margin-bottom:2rem}
.page>.label{display:block;animation:type 1s steps(26) .5s both}
.back{margin:0 0 2rem .4rem}
.back::after{content:none}
.back:hover,.back:focus-visible{color:var(--bg)}
.back:hover::before,.back:focus-visible::before{background:var(--zc);box-shadow:0 0 18px var(--zc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
a.card{display:block;overflow:hidden;padding:1.4rem 1.25rem;text-decoration:none;transition:border-color .25s,transform .25s;animation:boot .7s cubic-bezier(.2,.8,.2,1) both}
a.card:hover,a.card:focus-visible{border-color:var(--zc);transform:translateY(-3px)}
a.card:hover::before{width:60%}
.card h2{font-size:1.1rem;font-weight:600;letter-spacing:.08em;margin:.35rem 0}
.card p{color:var(--muted);font-size:.95rem}
.empty{overflow:hidden;padding:2.5rem 1.5rem;text-align:center;color:var(--muted);animation:boot .8s cubic-bezier(.2,.8,.2,1) .4s both}
.empty .label{display:block;margin-bottom:.5rem}

@keyframes fadein{from{opacity:0}to{opacity:1}}

@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .axis{display:none}
  a.zone{min-height:44vh}
  .bar .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}