/* nixfred.cloud — "Cold Boot Into The Storm"
   Palette: near-black voids, one screaming red, cold-white snow, electric cyan. */

:root {
  --void:  #06080d;
  --bg:    #0d1117;
  --red:   #f85149;
  --cyan:  #4dd0e1;
  --snow:  #e6edf3;
  --muted: #8b949e;
  --line:  #21262d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--void);
}

body {
  font: 16px/1.6 ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  color: var(--snow);
  position: relative;
}

/* hide the OS cursor where we draw our own */
@media (pointer: fine) {
  body { cursor: none; }
}

/* --- layered canvases ---------------------------------------------------- */
#cloud, #fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#cloud { z-index: 0; }
#fx    { z-index: 1; }

/* --- custom cursor: your hand in the storm ------------------------------- */
#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 8;
  pointer-events: none;
  will-change: transform;
}
#cursor .ring,
#cursor .dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#cursor .ring {
  width: 26px; height: 26px;
  border: 1px solid rgba(248, 81, 73, 0.55);
  box-shadow: 0 0 12px rgba(248, 81, 73, 0.35), inset 0 0 8px rgba(248, 81, 73, 0.2);
  transition: width .12s ease, height .12s ease, border-color .12s ease;
}
#cursor .dot {
  width: 4px; height: 4px;
  background: var(--snow);
  box-shadow: 0 0 8px var(--snow);
}
/* charge state — set by JS while the cursor is held still */
#cursor.charging .ring {
  width: 14px; height: 14px;
  border-color: rgba(248, 81, 73, 1);
  box-shadow: 0 0 22px rgba(248, 81, 73, 0.9), inset 0 0 10px rgba(248, 81, 73, 0.6);
}
@media (pointer: coarse) { #cursor { display: none; } }

/* --- boot cold-open (Layer D) ------------------------------------------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}
#boot.gone {
  opacity: 0;
  pointer-events: none;
}
#bootlog {
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--snow);
  white-space: pre;
  padding: 1.5rem;
  max-width: 92vw;
  overflow: hidden;
}
#bootlog .ok    { color: var(--cyan); }
#bootlog .warn  { color: var(--red); }
#bootlog .dim   { color: var(--muted); }
#bootlog .cur   { background: var(--snow); color: var(--void); }

/* --- foreground content -------------------------------------------------- */
#stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;       /* the storm gets the pointer; only links opt in */
  padding: 2rem;
}

#hero {
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
body.revealed #hero { opacity: 1; transform: none; }

#wordmark {
  font-size: clamp(2.6rem, 9vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(6, 8, 13, 0.9);
}
#wordmark .letter {
  display: inline-block;
  will-change: transform, opacity;
}
#wordmark .dot { color: var(--red); text-shadow: 0 0 24px rgba(248, 81, 73, 0.9); }

#tag {
  margin-top: 1rem;
  color: var(--muted);
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  letter-spacing: 0.04em;
}

#hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1.2s ease 0.4s;
}
body.revealed #hud { opacity: 0.7; }
#hud code { color: var(--snow); }
#hud .hint { color: var(--red); opacity: 0.8; }
#hud kbd {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 5px;
  color: var(--snow);
}
#termhint { pointer-events: auto; cursor: pointer; }
@media (max-width: 560px) { #hud .served { display: none; } }

/* --- *nix console -------------------------------------------------------- */
#term {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 42vh;
  min-height: 240px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(6, 8, 13, 0.74), rgba(6, 8, 13, 0.95));
  border-top: 1px solid rgba(248, 81, 73, 0.6);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6), 0 -1px 28px rgba(248, 81, 73, 0.22);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transform: translateY(101%);
  opacity: 0;
  transition: transform .42s cubic-bezier(.16, .84, .34, 1), opacity .42s ease;
  pointer-events: none;
}
#term.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
#termout {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.4rem 0.4rem;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#termout .l { display: block; white-space: pre-wrap; word-break: break-word; }
#termout .ok  { color: var(--cyan); }
#termout .red { color: var(--red); }
#termout .dim { color: var(--muted); }
#termout .hi  { color: var(--snow); font-weight: 700; }
#termline {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 1.4rem 1.1rem;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#termprompt { color: var(--red); white-space: nowrap; }
#terminput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--snow);
  font: inherit;
  caret-color: var(--red);
}

/* --- sound toggle -------------------------------------------------------- */
#snd {
  position: fixed;
  top: 14px; right: 16px;
  z-index: 7;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(248, 81, 73, 0.5);
  background: rgba(6, 8, 13, 0.55);
  color: var(--red);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 14px rgba(248, 81, 73, 0.25);
}
#snd:hover { border-color: var(--red); box-shadow: 0 0 20px rgba(248, 81, 73, 0.5); }
#snd.off {
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
  opacity: 0.55;
}

/* --- share button -------------------------------------------------------- */
#share {
  position: fixed;
  top: 14px; right: 60px;          /* sits left of the sound toggle */
  z-index: 7;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(77, 208, 225, 0.5);
  background: rgba(6, 8, 13, 0.55);
  color: var(--cyan);
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
  box-shadow: 0 0 14px rgba(77, 208, 225, 0.22);
}
#share:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(77, 208, 225, 0.5); }
#share:active { transform: scale(0.92); }
#share svg { display: block; }

/* --- status toast (share feedback) --------------------------------------- */
#toast {
  position: fixed;
  top: 16px; left: 50%;
  z-index: 9;
  transform: translate(-50%, -14px);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(77, 208, 225, 0.5);
  background: rgba(6, 8, 13, 0.85);
  color: var(--cyan);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(77, 208, 225, 0.25);
  transition: opacity .25s ease, transform .25s ease;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- share panel — custom, works on every browser/OS --------------------- */
#sharepanel {
  position: fixed;
  top: 58px; right: 16px;
  z-index: 8;
  width: 236px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.97), rgba(6, 8, 13, 0.98));
  border: 1px solid rgba(77, 208, 225, 0.45);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), 0 0 26px rgba(77, 208, 225, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform-origin: top right;
  transform: translateY(-8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.16, .84, .34, 1);
}
#sharepanel.open { opacity: 1; transform: none; pointer-events: auto; }

.sp-title {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.sp-title span { color: var(--cyan); }

.sp-qr {
  align-self: center;
  width: 160px; height: 160px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
}
.sp-qr svg { display: block; width: 100%; height: 100%; }

.sp-hint {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.sp-row { display: flex; flex-direction: column; gap: 6px; }

.sp-act {
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 7px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(230, 237, 243, 0.02);
  color: var(--snow);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sp-act:hover {
  border-color: rgba(77, 208, 225, 0.6);
  background: rgba(77, 208, 225, 0.09);
  color: var(--cyan);
}
.sp-act:active { transform: scale(0.985); }

/* --- noscript / reduced-motion static fallback --------------------------- */
.noscript {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: var(--void);
}
.noscript h1 { font-size: 2.5rem; }
.noscript h1::after { content: ""; }
.noscript p { color: var(--muted); max-width: 36ch; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  #cloud, #fx, #cursor, #term, #snd { display: none; }
  #share { right: 16px; }          /* sound toggle is hidden — reclaim its slot */
  body { cursor: auto; background: radial-gradient(ellipse at 50% 30%, #11161f, #06080d 70%); }
  #boot { display: none; }
  #hero { opacity: 1; transform: none; transition: none; }
  #hud  { opacity: 0.7; transition: none; }
}