/* sh-0 · core
   no external resources. system fonts only. */

:root{
  --ink:#0a0c0f;
  --bone:#cfc9bd;
  --bone-dim:#6f6a61;
  --blood:#8c1c17;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --mx:50%;
  --my:50%;
  --gr:220px;
}

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

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

body{
  font-family:var(--mono);
  color:var(--bone);
  cursor:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* ─── field of fragments ─── */

#field,#ghost{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}

#ghost{
  z-index:6;
  -webkit-mask-image:radial-gradient(circle calc(var(--gr) * 1.15) at var(--mx) var(--my),
        transparent 0%, transparent 55%, #000 100%);
          mask-image:radial-gradient(circle calc(var(--gr) * 1.15) at var(--mx) var(--my),
        transparent 0%, transparent 55%, #000 100%);
}

.frag,.title,.seam{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  white-space:nowrap;
  letter-spacing:.16em;
  text-transform:lowercase;
  font-weight:400;
  font-size:var(--s,.86rem);
  color:var(--bone);
  opacity:var(--o,.95);
  user-select:none;
}

.title{
  font-size:clamp(1.9rem,6.4vw,4.6rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:300;
  color:#efe9dd;
  opacity:1;
  text-shadow:0 0 34px rgba(207,201,189,.22);
}

/* ─── the seam ─── */

.seam{
  pointer-events:auto;
  cursor:none;
  text-decoration:none;
  letter-spacing:.2em;
  color:var(--bone-dim);
  opacity:.16;
  transition:opacity .9s ease, color .9s ease, letter-spacing 1.4s ease;
}

.seam.warm{
  opacity:.5;
  color:var(--bone);
}

.seam.split{
  opacity:.95;
  color:#fff;
  letter-spacing:.46em;
  text-shadow:0 0 20px rgba(140,28,23,.7);
}

/* ─── idle whisper ─── */

.idle-only{
  opacity:0;
  transition:opacity 2.4s ease;
}
body.idle .idle-only{opacity:.4}

/* ─── enter ─── */

#open{
  position:fixed;
  left:50%;
  bottom:12vh;
  transform:translateX(-50%);
  z-index:7;
}

.enter{
  display:block;
  pointer-events:auto;
  cursor:none;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.52em;
  text-indent:.52em;
  color:var(--bone);
  text-decoration:none;
  padding:14px 26px;
  border:1px solid rgba(207,201,189,.22);
  background:rgba(10,12,15,.55);
  animation:breathe 3.4s ease-in-out infinite;
}

.enter:hover{
  color:#fff;
  border-color:var(--blood);
  box-shadow:0 0 34px rgba(140,28,23,.35);
}

@keyframes breathe{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* ─── veil ─── */

#veil{
  position:fixed;
  inset:0;
  z-index:5;
  display:block;
  pointer-events:none;
}

/* ─── cursor ─── */

#dot{
  position:fixed;
  z-index:8;
  width:3px;
  height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--bone);
  opacity:.75;
  pointer-events:none;
  will-change:transform;
}

/* ─── no script ─── */

.ns{
  position:fixed;
  inset:0;
  z-index:99;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--bone-dim);
  font-family:var(--mono);
  letter-spacing:.24em;
  font-size:.8rem;
}

@media (max-width:760px){
  .frag{font-size:var(--s,.74rem);letter-spacing:.12em}
  :root{--gr:150px}
}

@media (prefers-reduced-motion:reduce){
  .enter{animation:none;opacity:.85}
}