/* henten.net – text nad hmlovinou z vesmir.js. Vesmír je tmavý v oboch režimoch systému.
   Bez WebGL ostane pozadie z gradientu. Len systémové písma, nič z CDN. */

:root {
  --noc: #0b0614;
  --text: #f4f0ff;
  --tlmeny: rgb(244 240 255 / .62);
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 35%, #3b1f6b 0%, #170c2e 45%, var(--noc) 80%) var(--noc);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* plátno prijíma myš aj dotyk; text nad ním ich prepúšťa */
#vesmir {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: none;
  transition: opacity 2s ease;
}
#vesmir.bezi { opacity: 1; }

.scena {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 16px;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 24px rgb(11 6 20 / .9), 0 0 4px rgb(11 6 20 / .8);
}
.scena a { pointer-events: auto; }

.nad {
  margin: 0 0 1.6em;
  font: 600 .8125rem/1 var(--mono);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--tlmeny);
}
h1 {
  max-width: 14em;
  margin: 0;
  font-size: clamp(2rem, 6.5vw, 4rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.pod {
  margin: .8em 0 0;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  font-weight: 300;
  color: rgb(244 240 255 / .85);
}
.napoveda {
  margin: 3em 0 0;
  font: .75rem/1 var(--mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tlmeny);
  animation: dych 3s ease-in-out infinite;
  transition: opacity 1.5s ease;
}
.napoveda.prec { opacity: 0 !important; animation: none; }
@keyframes dych { 50% { opacity: .35; } }

.spat { margin: 2.4em 0 0; font: .875rem/1 var(--mono); letter-spacing: .2em; }
.spat a { color: var(--text); text-underline-offset: .3em; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 2px; }

.pata {
  position: relative;
  padding: 0 16px 20px;
  text-align: center;
  font-size: .8125rem;
  color: var(--tlmeny);
  pointer-events: none;
  text-shadow: 0 0 12px rgb(11 6 20 / .9);
}
.pata dfn { font-style: normal; font-weight: 600; color: var(--text); }
/* odkaz na portfólio (/tamten/) – vyzerá ako obyčajný text, kurzor ani podčiarknutie ho neprezradia */
.pata .skryty { color: inherit; text-decoration: none; cursor: inherit; pointer-events: auto; }

/* nástup textu */
.scena > * { animation: vynor 2.4s ease both; }
.scena > .pod { animation-delay: .6s; }
.scena > .napoveda { animation: vynor 2.4s ease 1.6s both, dych 3s ease-in-out 4s infinite; }
@keyframes vynor { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  .scena > *, .scena > .napoveda { animation: none; }
}