@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

@font-face { font-family: "Nightmare BC"; src: url("fonts/nightmare-cz.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

:root {
  --ink: #0e0e12;
  --ink-sky: #13131b;
  --ink-deep: #050507;
  --bone: #e9e4d6;
  --bone-dim: #aaa494;
  --moon: #f0c75e;
  --ghost: #9d92c9;
  --line: #2c2c38;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: antialiased; }
::selection { background: var(--moon); color: var(--ink); }
a { color: var(--moon); text-underline-offset: 3px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 2px dashed var(--moon); outline-offset: 3px; }
svg { display: block; }

.hero { position: relative; min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 2rem; overflow: hidden; background: linear-gradient(var(--ink-sky), var(--ink) 85%); user-select: none; -webkit-user-select: none; }
.intro { position: relative; z-index: 1; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 10vw, 6.5rem); line-height: 1.05; letter-spacing: .01em; }
.hero .role { font-family: var(--mono); color: var(--bone-dim); font-size: clamp(.8rem, 2.5vw, 1.05rem); margin-top: 1.4rem; letter-spacing: .08em; }

.moon { position: absolute; top: 9%; right: 9%; width: clamp(64px, 9vw, 110px); color: var(--moon); animation: moonglow 9s ease-in-out infinite; }
@keyframes moonglow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(240,199,94,.25)); } 50% { filter: drop-shadow(0 0 32px rgba(240,199,94,.5)); } }

.star { position: absolute; color: var(--bone-dim); animation: twinkle 7s ease-in-out infinite; }
.star svg { width: 10px; height: 10px; }
.star:nth-of-type(2) { animation-delay: 2.4s; }
.star:nth-of-type(3) { animation-delay: 4.1s; }
@keyframes twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .55; } }

.horizon { position: absolute; inset: auto 0 -2px 0; color: var(--ink-deep); pointer-events: none; }
.horizon svg { width: 100%; height: auto; min-height: 185px; }

.horizon::before, .horizon::after {
  content: ""; position: absolute; bottom: 4px; height: 64px; width: 58%;
  background: radial-gradient(ellipse closest-side, rgba(157, 146, 201, .11), transparent 74%);
  filter: blur(16px); pointer-events: none;
  animation: mlha 85s ease-in-out infinite;
}
.horizon::after {
  right: -14%; bottom: 26px; height: 46px; width: 48%;
  background: radial-gradient(ellipse closest-side, rgba(233, 228, 214, .08), transparent 74%);
  animation-duration: 110s; animation-direction: reverse;
}
.horizon::before { left: -12%; }
@keyframes mlha { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(38vw); } }

.scrollhint { position: absolute; bottom: 4vh; left: 50%; translate: -50% 0; color: var(--bone-dim); animation: bob 3.2s ease-in-out infinite; z-index: 2; }
.scrollhint svg { width: 20px; height: 34px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

@media (orientation: landscape) and (max-height: 620px) {
  .hero { align-content: start; padding: 5vh 2rem 0; }
  .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
  .hero .role { margin-top: .9rem; }
  .moon { top: 6%; right: 5%; width: clamp(44px, 5.5vw, 70px); }
  .scrollhint { display: none; }

  .horizon path:last-of-type { transform: scale(.72); }
}

main { max-width: 40rem; margin-inline: auto; padding: 1rem 1.5rem 3rem; }
section { padding-block: 4.5rem; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 2.1rem; letter-spacing: .02em; }

.bio p { font-size: 1.1rem; }

.terminal { margin-top: 1.7rem; font-family: var(--mono); font-size: .85rem; color: var(--bone-dim); }
.terminal .prompt { color: var(--ghost); }
.terminal .vystup { opacity: .75; }
.terminal .caret { display: inline-block; width: 8px; height: 1em; background: var(--bone-dim); vertical-align: text-bottom; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.bat.postak { position: fixed; top: 0; left: 0; z-index: 5; pointer-events: none; }
.bat.postak svg { width: 26px; height: 13px; }
.bat .obalka { position: absolute; left: 7px; top: 11px; width: 13px; height: 10px; color: var(--bone-dim); }

a.domu { display: inline-block; padding: .8rem 1.4rem; text-decoration: none; color: var(--bone); border: 1px solid var(--line); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; transition: transform .25s ease, border-color .25s ease, color .25s ease; font-family: var(--mono); font-size: .9rem; }
a.domu:hover { border-color: var(--moon); color: var(--moon); transform: rotate(-1.2deg) translateY(-2px); }

.contact { display: flex; gap: 1rem; flex-wrap: wrap; }
.contact a { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; text-decoration: none; color: var(--bone); border: 1px solid var(--line); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; transition: transform .25s ease, border-color .25s ease, color .25s ease; font-family: var(--mono); font-size: .9rem; }
.contact a svg { width: 18px; height: 18px; }
.contact a:hover { border-color: var(--moon); color: var(--moon); transform: rotate(-1.2deg) translateY(-2px); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

body.variant-b .hero { background: linear-gradient(#171226, var(--ink) 90%); }
body.variant-b h1, body.variant-b h2 { font-family: "Nightmare BC", var(--serif); font-weight: 400; letter-spacing: .04em; }
.stripes { display: none; }
body.variant-b .stripes { display: block; width: 130px; height: 7px; margin: .9rem 0 2rem; background: repeating-linear-gradient(45deg, var(--ghost) 0 7px, transparent 7px 15px); opacity: .55; }
.tree { position: absolute; bottom: 0; width: clamp(90px, 12vw, 170px); color: var(--ink-deep); z-index: 1; }
.tree.left { left: 2vw; }
.tree.right { right: 3vw; transform: scaleX(-1); }
@media (max-width: 900px) {
  .tree { width: 58px; }
  .tree.left { left: 1vw; }
  .tree.right { right: 2vw; }
}
.flake { position: absolute; top: 0; left: 0; color: var(--bone); pointer-events: none; font-size: .6rem; will-change: transform; }

.flake.rain { width: 1.5px; height: 11px; background: rgba(157, 146, 201, .45); rotate: 14deg; border-radius: 1px; }

.lightning { position: absolute; inset: 0; pointer-events: none; background: rgba(233, 228, 214, .9); opacity: 0; }
.lightning.flash { animation: blesk .55s ease-out; }
@keyframes blesk { 0% { opacity: 0; } 8% { opacity: .45; } 14% { opacity: .04; } 22% { opacity: .3; } 55% { opacity: 0; } 100% { opacity: 0; } }

.firefly { position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); box-shadow: 0 0 12px 3px rgba(157, 146, 201, .5); pointer-events: none; z-index: 2; will-change: transform; animation: fireflyPulse 3.4s ease-in-out infinite; }
.firefly-trail { position: fixed; top: 0; left: 0; border-radius: 50%; background: var(--ghost); pointer-events: none; z-index: 2; will-change: transform; }
@keyframes fireflyPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.moon.wink { animation: moonwink .75s ease-out; }
@keyframes moonwink {
  30% { filter: drop-shadow(0 0 46px rgba(240, 199, 94, .95)); transform: scale(1.07) rotate(-5deg); }
  100% { filter: drop-shadow(0 0 14px rgba(240, 199, 94, .25)); transform: none; }
}

.shooting-star { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 6px 1px rgba(233, 228, 214, .8); pointer-events: none; animation: shoot .9s ease-out forwards; }
.shooting-star::after { content: ""; position: absolute; right: 1px; top: 0; width: 70px; height: 1px; background: linear-gradient(270deg, rgba(233, 228, 214, .7), transparent); transform: rotate(28deg); transform-origin: right center; }
@keyframes shoot { 0% { opacity: 0; translate: 0 0; } 12% { opacity: .9; } 100% { opacity: 0; translate: 340px 180px; } }

.wave-hotspot { pointer-events: auto; }
.moon { touch-action: none; }

.moonlight { position: absolute; inset: 0; pointer-events: none; }

.eyes { opacity: 0; transition: opacity 1.4s ease; filter: drop-shadow(0 0 3px rgba(240, 199, 94, .7)); }
.eyes.on { opacity: 1; }
.eyes ellipse { fill: var(--moon); transform-box: fill-box; transform-origin: center; animation: blink 3.8s ease-in-out infinite; }
@keyframes blink { 0%, 44%, 56%, 100% { transform: scaleY(1); } 48%, 52% { transform: scaleY(.08); } }

.star { padding: 8px; margin: -8px; }
.star.gone { visibility: hidden; }
.star.flare svg { animation: flare .45s ease-out; }
@keyframes flare { 40% { transform: scale(2.4); filter: drop-shadow(0 0 8px rgba(233, 228, 214, .9)); } }

.tree svg { transform-origin: 50% 100%; animation: sway 6.5s ease-in-out infinite alternate; }
.tree.right svg { animation-duration: 5.2s; animation-delay: -2.4s; }
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.5deg); } }

.horizon path:last-of-type { transform-box: fill-box; transform-origin: 50% 100%; }

.bat { position: absolute; top: 0; left: 0; color: var(--ghost); pointer-events: none; z-index: 2; animation: batfly var(--dur, 2.4s) ease-out both; }
.bat svg { width: 24px; height: 12px; }
.bat.cross svg { width: 32px; height: 16px; }
@keyframes batfly { 0% { translate: var(--x0) var(--y0); opacity: .55; } 100% { translate: var(--x1) var(--y1); opacity: 0; } }

.bat.cross { animation: none; will-change: transform; }

.bat.fed svg { transform: scale(2); transition: transform .5s ease-out; animation: batglow 2.6s ease-out forwards; }
@keyframes batglow {
  0% { filter: drop-shadow(0 0 2px rgba(157, 146, 201, .9)); }
  25% { filter: drop-shadow(0 0 14px rgba(157, 146, 201, 1)); }
  100% { filter: drop-shadow(0 0 0 rgba(157, 146, 201, 0)); }
}

.bat .batw { transform-box: fill-box; }
.bat .batl { transform-origin: 100% 45%; animation: flapL .2s ease-in-out infinite alternate; }
.bat .batr { transform-origin: 0% 45%; animation: flapR .2s ease-in-out infinite alternate; }
@keyframes flapL { from { transform: rotate(26deg); } to { transform: rotate(-20deg); } }
@keyframes flapR { from { transform: rotate(-26deg); } to { transform: rotate(20deg); } }