/* CLI — terminal in hero section
   ondrejbajer.cz */

.cli {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-light);
  margin: 0 0 12px;
  max-width: 720px;
  position: relative;
  z-index: 4;
}

.cli-out {
  margin: 0 0 6px;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-light-dim, rgba(26,20,16,.6)) transparent;
}

.cli-out::-webkit-scrollbar { width: 4px; }
.cli-out::-webkit-scrollbar-thumb { background: var(--fg-light-dim, rgba(26,20,16,.6)); border-radius: 2px; }

.cli-entry { margin: 0 0 6px; }
.cli-echo {
  display: block;
  color: var(--fg-light-dim, rgba(26,20,16,.7));
  font-size: 12px;
}
.cli-echo::before { content: "$ "; opacity: .7; }
.cli-result {
  display: block;
  color: var(--fg-light);
  white-space: pre-wrap;
}
.cli-result a {
  color: #7a1a00;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.cli-result a:hover { text-decoration-thickness: 2px; color: var(--accent); }
.cli-result.cli-error { color: #6a1500; font-weight: 500; }
.cli-result.cli-error a { color: #6a1500; }

.cli-line {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  cursor: text;
  min-width: 0;
}
.cli-prompt {
  color: var(--fg-light-dim, rgba(26,20,16,.7));
  white-space: nowrap;
  user-select: none;
}
.cli-prompt::after { content: " $ "; opacity: .8; }

.cli-input {
  flex: 0 0 auto;
  width: 0ch;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--fg-light);
  caret-color: transparent;
  padding: 0;
  margin: 0;
}
.cli-input::placeholder { color: var(--fg-light-dim, rgba(26,20,16,.45)); }

.cli-caret {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: cli-blink 1.05s steps(2, start) infinite;
  margin-left: 0;
  pointer-events: none;
  flex: 0 0 auto;
}
/* fill remaining space after caret so click anywhere on the line focuses input */
.cli-line::after {
  content: "";
  flex: 1 1 auto;
  align-self: stretch;
}
@keyframes cli-blink {
  to { visibility: hidden; }
}

/* hide caret while user is actively typing (input focused + has value) */
.cli-input:focus + .cli-caret { animation-duration: .8s; }

/* Help table inside output */
.cli-help { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; }
.cli-help dt { color: #7a1a00; font-weight: 600; }
.cli-help dd { margin: 0; color: var(--fg-light); }

/* UFO animation overlay */
.ufo {
  position: fixed;
  top: 18%;
  left: -120px;
  font-family: var(--mono);
  font-size: 22px;
  color: var(--paper);
  z-index: 9999;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(255,200,120,.6);
  white-space: pre;
}
.ufo.fly {
  animation: ufo-fly 7s ease-in-out forwards;
}
@keyframes ufo-fly {
  0%   { transform: translateX(0)    translateY(0)  rotate(-2deg); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translateX(45vw) translateY(-30px) rotate(2deg); opacity: 1; }
  60%  { transform: translateX(50vw) translateY(-20px) rotate(0); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(110vw) translateY(-80px) rotate(-3deg); opacity: 0; }
}

/* Destroy mode — drain colors from page, keep layout/content fully functional.
   Backgrounds → white, text → black, decorative ::before/::after/ASCII fade out.
   The black-hole element (.blackhole) provides the suck-in animation.

   `destroying` is added BEFORE `destroyed` (on destroy) AND BEFORE the class is
   removed (on restore-via-theme). It carries the transitions so they fire in
   both directions — class add AND class remove. */
body.destroying,
body.destroying .hero,
body.destroying .hero[data-hero],
body.destroying section.block,
body.destroying #about,
body.destroying #clients,
body.destroying #contact,
body.destroying .rail-sticky {
  transition:
    background 1.4s ease 0.4s,
    color 1.4s ease 0.4s,
    border-color 1.4s ease 0.4s !important;
}
body.destroying .hero::before,
body.destroying .hero::after,
body.destroying section.block::before,
body.destroying #contact::before,
body.destroying #contact::after,
body.destroying .sky-ascii,
body.destroying .aurora-fx,
body.destroying .worm,
body.destroying .ug,
body.destroying .heat,
body.destroying .horizon-layer {
  transition: opacity 1.4s ease 0.4s !important;
}
body.destroying h1, body.destroying h2, body.destroying h3, body.destroying h4,
body.destroying p, body.destroying a, body.destroying span, body.destroying em, body.destroying strong,
body.destroying dt, body.destroying dd,
body.destroying .cli, body.destroying .cli *,
body.destroying .rail, body.destroying .rail *,
body.destroying .rail-sticky *,
body.destroying .lede, body.destroying .lede *,
body.destroying footer, body.destroying footer *,
body.destroying .side-meta, body.destroying .side-meta *,
body.destroying .contact-grid, body.destroying .contact-grid *,
body.destroying .clients-line, body.destroying .clients-line *,
body.destroying .sect-head, body.destroying .sect-head * {
  transition: color 1.4s ease 0.4s !important;
}

body.destroyed {
  background: #fff !important;
  color: #000 !important;
}

/* Strip every painterly background — hero variants, dark sections, sticky nav */
body.destroyed .hero,
body.destroyed .hero[data-hero],
body.destroyed body[data-palette="aurora"] .hero,
body.destroyed section.block,
body.destroyed #about,
body.destroyed #clients,
body.destroyed #contact {
  background: #fff !important;
  background-image: none !important;
}
body.destroyed .rail-sticky {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: #000 !important;
}

/* Decoration pseudo-elements + sky/underground ASCII → fade fully out */
body.destroyed .hero::before,
body.destroyed .hero::after,
body.destroyed section.block::before,
body.destroyed #contact::before,
body.destroyed #contact::after,
body.destroyed .sky-ascii,
body.destroyed .aurora-fx,
body.destroyed .worm,
body.destroyed .ug,
body.destroyed .heat,
body.destroyed .horizon-layer {
  opacity: 0 !important;
}

/* All text → black. Functional layout preserved. */
body.destroyed h1, body.destroyed h2, body.destroyed h3, body.destroyed h4,
body.destroyed p, body.destroyed a, body.destroyed span, body.destroyed em, body.destroyed strong,
body.destroyed dt, body.destroyed dd,
body.destroyed .cli, body.destroyed .cli *,
body.destroyed .rail, body.destroyed .rail *,
body.destroyed .rail-sticky, body.destroyed .rail-sticky *,
body.destroyed .lede, body.destroyed .lede *,
body.destroyed footer, body.destroyed footer *,
body.destroyed .side-meta, body.destroyed .side-meta *,
body.destroyed .contact-grid, body.destroyed .contact-grid *,
body.destroyed .clients-line, body.destroyed .clients-line *,
body.destroyed .sect-head, body.destroyed .sect-head * {
  color: #000 !important;
  text-shadow: none !important;
}

/* Borders / rules → black */
body.destroyed .sect-head,
body.destroyed .contact-grid,
body.destroyed footer,
body.destroyed .hero-tag .exemedia {
  border-color: #000 !important;
}

/* Accent indicators → black */
body.destroyed .brand .dot {
  background: #000 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) !important;
}
body.destroyed .contact-call a { border-bottom-color: #000 !important; }
body.destroyed .cli-caret { background: #000 !important; }
body.destroyed .cli-input { caret-color: transparent !important; }
body.destroyed .cli-result a,
body.destroyed .cli-help dt,
body.destroyed .cli-result.cli-error,
body.destroyed .cli-result.cli-error a { color: #000 !important; }
body.destroyed .hero-tag .exemedia:hover {
  background: #000 !important; color: #fff !important; border-color: #000 !important;
}
body.destroyed .contact-call a:hover,
body.destroyed .contact-grid a:hover { color: #000 !important; }

/* Black-hole suck-in animation — sits in upper-left, pulls then disappears */
.blackhole {
  position: fixed;
  left: 0;
  top: 0;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-80%, -80%) scale(0);
  opacity: 0;
  background:
    radial-gradient(circle at center,
      #000 0%,
      #000 18%,
      rgba(0,0,0,0.85) 34%,
      rgba(0,0,0,0.5)  54%,
      rgba(0,0,0,0.18) 74%,
      rgba(0,0,0,0)    100%);
  box-shadow:
    0 0 80px 30px rgba(0,0,0,0.5),
    0 0 220px 90px rgba(0,0,0,0.3);
  mix-blend-mode: multiply;
}
.blackhole.active {
  animation: blackhole-suck 3.2s cubic-bezier(.25,.6,.3,1) forwards;
}
@keyframes blackhole-suck {
  0%   { opacity: 0;   transform: translate(-90%, -90%) scale(0)    rotate(0deg); }
  12%  { opacity: 0.95; transform: translate(-65%, -65%) scale(0.45) rotate(60deg); }
  45%  { opacity: 1;   transform: translate(-40%, -40%) scale(1.15) rotate(200deg); }
  75%  { opacity: 0.8; transform: translate(-55%, -55%) scale(0.65) rotate(320deg); }
  100% { opacity: 0;   transform: translate(-85%, -85%) scale(0)    rotate(440deg); }
}
/* Reverse — colors emerging back into the page (theme on destroyed) */
.blackhole.active.reverse {
  animation: blackhole-emit 3.2s cubic-bezier(.25,.6,.3,1) forwards;
}
@keyframes blackhole-emit {
  0%   { opacity: 0;   transform: translate(-85%, -85%) scale(0)    rotate(0deg); }
  25%  { opacity: 0.8; transform: translate(-55%, -55%) scale(0.65) rotate(-180deg); }
  55%  { opacity: 1;   transform: translate(-40%, -40%) scale(1.15) rotate(-340deg); }
  88%  { opacity: 0.95; transform: translate(-65%, -65%) scale(0.45) rotate(-440deg); }
  100% { opacity: 0;   transform: translate(-90%, -90%) scale(0)    rotate(-500deg); }
}
@media (prefers-reduced-motion: reduce) {
  .blackhole.active { animation-duration: 0.6s; }
}

/* Themes — full palette repaint handled in cli.js applyPalette() (sets --sky-*, --sand-*, --accent on :root).
   CLI text-on-dark override only needed for aurora (whole hero is dark night sky). */
body[data-palette="aurora"] .cli,
body[data-palette="aurora"] .cli-result,
body[data-palette="aurora"] .cli-input { color: var(--paper); }
body[data-palette="aurora"] .cli-input { caret-color: transparent; }
body[data-palette="aurora"] .cli-echo,
body[data-palette="aurora"] .cli-prompt { color: var(--paper-dim, rgba(243,231,214,.7)); }
body[data-palette="aurora"] .cli-result a { color: var(--accent); }
body[data-palette="aurora"] .cli-result.cli-error,
body[data-palette="aurora"] .cli-result.cli-error a { color: #ffb89c; }
body[data-palette="aurora"] .cli-help dt { color: var(--accent); }
body[data-palette="aurora"] .cli-help dd { color: var(--paper); }

/* Mobile — CLI still works on touch, but smaller font */
@media (max-width: 640px) {
  .cli { font-size: 12px; max-width: 100%; }
  .cli-out { max-height: 180px; }
}