/*
  static.chown.life
  visible surface: nil
  implied mode: 0644
*/

:root {
  --bg: #08100f;
  --bg-2: #11100e;
  --phosphor: #25d6c0;
  --phosphor-soft: rgba(37, 214, 192, .32);
  --amber: #f4b53c;
  --bone: #f5efe1;
  --bone-dim: rgba(245, 239, 225, .78);
  --shadow: rgba(0, 0, 0, .7);
  --owner-read: 1;
  --owner-write: 1;
  --owner-execute: 0;
  --group-read: 1;
  --group-write: 0;
  --group-execute: 0;
  --other-read: 1;
  --other-write: 0;
  --other-execute: 0;
  --mx: 50vw;
  --my: 50vh;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.void {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100svh;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(37, 214, 192, .12), transparent 18rem),
    radial-gradient(circle at 50% 54%, rgba(244, 181, 60, .06), transparent 21rem),
    radial-gradient(circle at 50% 50%, rgba(245, 239, 225, .055), transparent 30rem),
    linear-gradient(135deg, #050807 0%, var(--bg) 46%, var(--bg-2) 100%);
}

.field,
.void::before,
.void::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.field {
  z-index: -2;
  background:
    linear-gradient(transparent 50%, rgba(37, 214, 192, .035) 50%),
    linear-gradient(90deg, rgba(255,255,255,.018), rgba(0,0,0,.035), rgba(255,255,255,.014));
  background-size: 100% 4px, 7px 100%;
  mix-blend-mode: screen;
  opacity: .55;
  animation: scan-drift 9s linear infinite;
}

.void::before {
  z-index: -1;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(37, 214, 192, .025) 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at center, transparent 0 48%, rgba(0,0,0,.38) 86%, rgba(0,0,0,.74) 100%);
  filter: blur(.15px);
}

.void::after {
  z-index: 7;
  background:
    linear-gradient(transparent 0, rgba(255,255,255,.025) 50%, transparent 100%);
  height: 16vh;
  opacity: .28;
  transform: translateY(-120vh);
  animation: phosphor-sweep 7.5s cubic-bezier(.5, 0, .4, 1) infinite;
}

.halo {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(46rem, 78vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(37,214,192,.11), rgba(37,214,192,.035) 32%, transparent 68%);
  filter: blur(24px);
  opacity: .82;
  animation: breathe 5.8s ease-in-out infinite;
}

#dust {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .36;
  mix-blend-mode: screen;
}

.terminal {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: min(78vw, 44rem);
  aspect-ratio: 2.8 / 1;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
}

.terminal::before,
.terminal::after {
  content: "";
  position: absolute;
  inset: 14% 10%;
  border-radius: 999px;
  opacity: .7;
  filter: blur(22px);
  pointer-events: none;
}

.terminal::before {
  background: radial-gradient(ellipse, rgba(37,214,192,.18), transparent 70%);
  transform: translateZ(-80px);
}

.terminal::after {
  inset: 27% 20%;
  border: 1px solid rgba(37,214,192,.15);
  box-shadow:
    0 0 24px rgba(37,214,192,.11),
    inset 0 0 48px rgba(37,214,192,.06);
  transform: translateZ(-20px);
}

.sigil {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .04em;
  font-size: clamp(4.7rem, 16vw, 13.5rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .8;
  filter:
    drop-shadow(0 0 1px rgba(245,239,225,.9))
    drop-shadow(0 0 18px rgba(37,214,192,.14))
    drop-shadow(0 0 45px rgba(37,214,192,.08));
  animation: signal-hum 4.7s steps(80) infinite;
}

.sigil::before,
.sigil::after {
  content: attr(aria-label);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  opacity: 0;
  pointer-events: none;
}

.sigil::before {
  text-shadow: -2px 0 rgba(37,214,192,.7);
  animation: glitch-a 8s infinite;
}

.sigil::after {
  text-shadow: 2px 0 rgba(244,181,60,.38);
  animation: glitch-b 11s infinite;
}

.glyph {
  color: var(--bone);
  text-shadow:
    0 0 1px rgba(245,239,225,.95),
    0 0 9px rgba(245,239,225,.26),
    0 0 26px rgba(37,214,192,.14),
    0 14px 70px var(--shadow);
}

.punct,
.cursor {
  color: var(--phosphor);
  text-shadow:
    0 0 1px rgba(37,214,192,1),
    0 0 9px rgba(37,214,192,.85),
    0 0 24px rgba(37,214,192,.42),
    0 0 54px rgba(37,214,192,.22);
}

.punct {
  letter-spacing: -.02em;
  animation: colon-bloom 3.8s ease-in-out infinite;
}

.cursor {
  display: inline-block;
  translate: .07em .015em;
  animation: cursor-blink 1.12s steps(1, end) infinite, cursor-breathe 4.2s ease-in-out infinite;
}

.is-missing .sigil { opacity: .64; }
.is-missing .cursor { color: var(--amber); }

@keyframes cursor-blink {
  0%, 47% { opacity: 1; }
  48%, 100% { opacity: .12; }
}

@keyframes cursor-breathe {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.18); }
}

@keyframes colon-bloom {
  0%, 100% { opacity: .86; filter: saturate(1); }
  50% { opacity: 1; filter: saturate(1.35); }
}

@keyframes breathe {
  0%, 100% { transform: scale(.98); opacity: .72; }
  50% { transform: scale(1.04); opacity: .94; }
}

@keyframes signal-hum {
  0%, 100% { opacity: .98; }
  11% { opacity: .94; }
  12% { opacity: 1; }
  53% { opacity: .96; }
  54% { opacity: 1; }
}

@keyframes scan-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 64px, 17px 0; }
}

@keyframes phosphor-sweep {
  0%, 78% { transform: translateY(-120vh); }
  100% { transform: translateY(120vh); }
}

@keyframes glitch-a {
  0%, 91%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate(0); }
  92% { opacity: .25; clip-path: inset(12% 0 68% 0); transform: translate(-.018em, -.006em); }
  93% { opacity: .18; clip-path: inset(64% 0 18% 0); transform: translate(.012em, .004em); }
  94% { opacity: 0; }
}

@keyframes glitch-b {
  0%, 96%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate(0); }
  97% { opacity: .2; clip-path: inset(38% 0 42% 0); transform: translate(.016em, .002em); }
  98% { opacity: .16; clip-path: inset(72% 0 8% 0); transform: translate(-.011em, -.003em); }
  99% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  #dust { display: none; }
}