/* ============================================================================
   Holly · coming soon
   Jednovariantní teaser. Světlo je J · Ionosféra, zadrátované — barvy rampy
   jsou přímo v SVG gradientu v index.html, mlhoviny a záře tady, hvězdné
   pole ve script.js.
   ============================================================================ */

:root{
  --c-void:#04050A;
  --c-space-4:#191E2A;
  --c-text-1:#EEF1F6; --c-text-2:#9AA3B5; --c-text-3:#5F677A;

  --bg-void:var(--c-void);
  --text-primary:var(--c-text-1);
  --text-secondary:var(--c-text-2);
  --text-tertiary:var(--c-text-3);
  --focus-ring:#8AA8FF;

  /* J · Ionosféra — mlhoviny na pozadí a záře pod lomítky */
  --neb-1:rgba(59,79,232,.10);
  --neb-2:rgba(30,122,207,.075);
  --neb-3:rgba(14,147,174,.055);
  --slash-glow-1:rgba(90,190,225,.55);
  --slash-glow-2:rgba(59,79,232,.32);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-void); color:var(--text-primary);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- prostor ---------- */
.nebula{position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 38% at 22% 18%, var(--neb-1), transparent 70%),
    radial-gradient(40% 34% at 76% 30%, var(--neb-2), transparent 72%),
    radial-gradient(52% 40% at 58% 82%, var(--neb-3), transparent 74%);
  filter:blur(18px);
  animation:drift 90s ease-in-out infinite alternate}
@keyframes drift{
  from{transform:translate3d(-1.4%,-.9%,0) scale(1)}
  to{transform:translate3d(1.6%,1.2%,0) scale(1.05)}
}
#stars{position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.vignette{position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, transparent 38%, rgba(4,5,10,.78) 100%)}

/* ---------- scéna ---------- */
.scene{position:relative; z-index:3; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(34px,7vh,72px);
  padding:8vh clamp(20px,5vw,24px) 104px;
  text-align:center}

/* ---------- logo ----------
   Gradient je na lomítkách. Písmena i dvojtečka jsou tlumené na #D6DBE6,
   aby jediné světlo v obraze bylo to barevné. Záře je vědomě slabá —
   lomítka jsou dvě velké šikmé plochy, silnější stopa by z loga udělala
   svítící cedulku.                                                         */
.beacon{position:relative; display:flex; align-items:center; justify-content:center}
.logo{position:relative; z-index:2; height:clamp(21px,3.2vw,33px); width:auto; display:block}
.logo .slash{filter:drop-shadow(0 0 3px var(--slash-glow-1))
                    drop-shadow(0 0 7px var(--slash-glow-2))}
.logo .word{fill:#D6DBE6}

/* ---------- text ---------- */
h1{font-family:Archivo,"Arial Narrow",Arial,sans-serif; margin:0;
  font-size:clamp(30px,5.6vw,60px); font-weight:800; font-stretch:82%;
  line-height:1.04; letter-spacing:-.025em; text-wrap:balance; max-width:16ch}
h1 .l2{display:block; color:var(--text-secondary)}
.after{font-size:clamp(15px,1.9vw,18px); color:var(--text-secondary); margin:0}
.meta{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text-tertiary); margin:0}

.whisper{position:fixed; z-index:3; left:0; right:0;
  bottom:max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  margin:0; padding:0 20px; text-align:center;
  font-size:12px; letter-spacing:.04em; color:var(--text-tertiary)}
.whisper a{display:inline-block; padding:8px 12px; color:inherit; text-decoration:none;
  transition:color .2s ease}
.whisper a:hover{color:var(--text-secondary)}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:4px}

/* ---------- pomalé prosvitání ----------
   Obsah je viditelný ve výchozím stavu. Skryje se jen když JS potvrdí, že běží. */
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes wake{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
html.js .beacon{animation:wake 2.6s cubic-bezier(.16,.8,.3,1) both}
html.js .r1{animation:rise 2s cubic-bezier(.16,.8,.3,1) 1.1s both}
html.js .r2{animation:rise 2s cubic-bezier(.16,.8,.3,1) 2.1s both}
html.js .r3{animation:rise 2s cubic-bezier(.16,.8,.3,1) 3.1s both}
html.js .r4{animation:rise 2.4s cubic-bezier(.16,.8,.3,1) 4.2s both}

/* ---------- nízké viewporty ----------
   Telefon na ležato a malé notebooky: sevřít mezery, ať se scéna nemusí
   rolovat. Titulek se drží na dvou řádcích, takže stačí ubrat vzduch. */
@media (max-height:600px){
  .scene{gap:clamp(20px,4.5vh,40px); padding:6vh clamp(20px,5vw,24px) 76px}
  h1{font-size:clamp(26px,4.6vh,44px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html.js .beacon,html.js .r1,html.js .r2,html.js .r3,html.js .r4{opacity:1; transform:none}
}