/* ===========================================================================
   ABYSS — vestments
   The depth behind the record: ink, dust, a shaft of light and the star it
   falls on. Then grain, vignette, chain and sigils on top.
   Everything here is decoration; remove the file and the app still works.
   =========================================================================== */

/* ============================================================== abyss ==== */

.abyss {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.abyss > span {
  position: absolute;
  display: block;
}

/* the water itself */
.abyss-deep {
  inset: 0;
  background:
    radial-gradient(150% 85% at 50% 4%, rgba(126, 138, 160, 0.14), transparent 52%),
    radial-gradient(85% 55% at 50% 48%, rgba(255, 255, 255, 0.05), transparent 72%),
    radial-gradient(130% 110% at 50% 118%, rgba(0, 0, 0, 0.95), transparent 62%),
    #030303;
}

/* ink poured into it — one turbulence field, placed three times */
.abyss-ink {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 500'%3E%3Cdefs%3E%3Cfilter id='k' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='5' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.78'/%3E%3C/filter%3E%3CradialGradient id='g'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='52%25' stop-color='%23fff' stop-opacity='.42'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='700' height='500' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='700' height='500' filter='url(%23k)'/%3E%3C/g%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.abyss-ink-left {
  left: -34%;
  top: 24%;
  width: 108%;
  height: 46%;
  opacity: 0.5;
  transform: rotate(-7deg);
  animation: ink-drift-a 52s ease-in-out infinite alternate;
}

.abyss-ink-right {
  right: -38%;
  top: 18%;
  width: 112%;
  height: 52%;
  opacity: 0.42;
  transform: scaleX(-1) rotate(5deg);
  animation: ink-drift-b 67s ease-in-out infinite alternate;
}

/* a dimmer, larger one far behind, to give the field some depth */
.abyss-ink-far {
  left: -18%;
  top: -8%;
  width: 136%;
  height: 78%;
  opacity: 0.16;
  filter: blur(3px);
  animation: ink-drift-c 91s ease-in-out infinite alternate;
}

@keyframes ink-drift-a {
  from { transform: rotate(-7deg) translate3d(0, 0, 0) scale(1); }
  to   { transform: rotate(-4deg) translate3d(3%, -2%, 0) scale(1.07); }
}

@keyframes ink-drift-b {
  from { transform: scaleX(-1) rotate(5deg) translate3d(0, 0, 0) scale(1); }
  to   { transform: scaleX(-1) rotate(2deg) translate3d(2%, 3%, 0) scale(1.09); }
}

@keyframes ink-drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.12); }
}

/* dust: two parallax fields of specks */
.abyss-dust {
  inset: -10%;
  background-repeat: repeat;
}

.abyss-dust-near {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 9%, rgba(255, 255, 255, 0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(1.9px 1.9px at 41% 27%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(1.1px 1.1px at 88% 38%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1.5px 1.5px at 23% 52%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(1.3px 1.3px at 63% 61%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(2.1px 2.1px at 7% 71%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(1.2px 1.2px at 52% 84%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(1.7px 1.7px at 92% 91%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(1.1px 1.1px at 34% 96%, rgba(255, 255, 255, 0.65), transparent 62%);
  background-size: 620px 620px;
  opacity: 0.55;
  animation: dust-near 140s linear infinite;
}

.abyss-dust-far {
  background-image:
    radial-gradient(1px 1px at 5% 21%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 29% 6%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 58% 33%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 84% 19%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 17% 44%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 71% 49%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 45% 68%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 96% 74%, rgba(255, 255, 255, 0.42), transparent 60%),
    radial-gradient(1px 1px at 26% 88%, rgba(255, 255, 255, 0.48), transparent 60%),
    radial-gradient(1px 1px at 66% 97%, rgba(255, 255, 255, 0.4), transparent 60%);
  background-size: 380px 380px;
  opacity: 0.3;
  animation: dust-far 260s linear infinite;
}

@keyframes dust-near {
  to { transform: translate3d(-620px, 240px, 0); }
}

@keyframes dust-far {
  to { transform: translate3d(380px, -180px, 0); }
}

/* the thing everything falls toward */
.abyss-flare {
  left: 50%;
  top: 46%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 1 C103 79 120 97 199 100 C120 103 103 121 100 199 C97 121 80 103 1 100 C80 97 97 79 100 1Z' fill='%23fff'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.16;
  filter: blur(0.6px);
  animation: flare-breathe 11s ease-in-out infinite;
}

@keyframes flare-breathe {
  0%, 100% { opacity: 0.13; transform: scale(1); }
  50%      { opacity: 0.22; transform: scale(1.06); }
}

/* the line it hangs from */
.abyss-shaft {
  left: 50%;
  top: 0;
  width: 1px;
  height: 46%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.16) 45%,
    rgba(255, 255, 255, 0.75)
  );
  opacity: 0.4;
}

@media (max-width: 480px) {
  .abyss-flare { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
}

/* ----------------------------------------------------------------- grain - */
.skin-grain {
  position: fixed;
  inset: -60px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 1.1s steps(4) infinite;
}

@keyframes grain-drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-14px, 8px); }
  50% { transform: translate(9px, -12px); }
  75% { transform: translate(-6px, -5px); }
  100% { transform: translate(0, 0); }
}

.skin-vignette {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  background: radial-gradient(115% 115% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.78) 100%);
}

/* ----------------------------------------------------------------- marks - */
.skin-marks {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.skin-marks .mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: rgba(230, 227, 220, 0.16);
  user-select: none;
}

.skin-marks .mark-cross {
  font-size: 21px;
  color: rgba(230, 227, 220, 0.11);
}

.skin-marks .mark-dash {
  letter-spacing: -0.1em;
}

.skin-rail-jp {
  position: fixed;
  left: 5px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--jp);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.5em;
  color: rgba(230, 227, 220, 0.14);
  pointer-events: none;
  user-select: none;
}

/* torn-off scraps of print, the way the posters carry them */
.skin-fragment {
  position: fixed;
  z-index: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.9;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230, 227, 220, 0.13);
  pointer-events: none;
  user-select: none;
}

.skin-fragment-top {
  right: 14px;
  top: 90px;
  text-align: right;
}

.skin-fragment-bottom {
  left: 14px;
  bottom: 96px;
}

@media (max-width: 900px) {
  .skin-rail-jp,
  .skin-fragment { display: none; }
}

/* ------------------------------------------------------------- veil halo - */
.veil-halo {
  width: 96px;
  height: 96px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e6e3dc' stroke-width='1.6'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Cpath d='M50 20 50 8M67 26 75 15M80 43 92 39M80 57 92 61M67 74 75 85M50 80 50 92M33 74 25 85M20 57 8 61M20 43 8 39M33 26 25 15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.55;
  animation: halo-turn 14s linear infinite;
}

@keyframes halo-turn {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ plate skin - */
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--line-hard);
  pointer-events: none;
}

.plate::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.plate::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* one voice is lit from above, the other is where the light stops */
.plate.is-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 58%),
    linear-gradient(180deg, var(--soot), var(--pitch));
}

.plate.is-dark {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent 62%),
    linear-gradient(180deg, var(--pitch), #040405);
}

/* the arcdemon's cross hangs the other way up */
.plate.is-dark .plate-side,
.voice-chip[data-voice="b"] small {
  display: inline-block;
  transform: rotate(180deg);
}

/* torn edge on the relic art, poster-style — colour left alone */
.relic-art {
  clip-path: polygon(
    3% 6%, 14% 1%, 27% 5%, 41% 0%, 56% 4%, 70% 1%, 84% 6%, 97% 2%,
    100% 15%, 96% 28%, 100% 42%, 95% 56%, 100% 70%, 96% 84%, 99% 96%,
    86% 100%, 72% 95%, 58% 100%, 44% 96%, 30% 100%, 16% 95%, 4% 99%,
    0% 86%, 5% 72%, 0% 58%, 4% 44%, 0% 30%, 5% 17%
  );
  filter: saturate(1.12) contrast(1.06);
}

.plate.is-silent .relic-art {
  filter: none;
  opacity: 0.5;
}

.verse-art,
.result-art,
.sheet-art {
  filter: saturate(1.08) contrast(1.04);
}

/* ---------------------------------------------------------------- chain -- */
.chain-line {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Cg fill='none' stroke='%23e6e3dc' stroke-width='1.4' opacity='0.5'%3E%3Cellipse cx='5' cy='10' rx='7.4' ry='4.6'/%3E%3Cellipse cx='16' cy='10' rx='5.6' ry='8'/%3E%3C/g%3E%3C/svg%3E") center / 24px 20px repeat-x;
  opacity: 0.75;
}

@media (min-width: 720px) {
  .chain-line {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cg fill='none' stroke='%23e6e3dc' stroke-width='1.4' opacity='0.5'%3E%3Cellipse cx='10' cy='5' rx='4.6' ry='7.4'/%3E%3Cellipse cx='10' cy='16' rx='8' ry='5.6'/%3E%3C/g%3E%3C/svg%3E") center / 20px 24px repeat-y;
  }
}

.nave-chain.is-answered .chain-line {
  opacity: 1;
}

.nave-chain.is-broken .chain-line {
  opacity: 0.28;
  filter: blur(0.4px);
}

/* --------------------------------------------------------------- sigil --- */
.sigil {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 13px;
  opacity: 0.65;
}

.sigil i {
  display: block;
  height: 100%;
  background: var(--bone);
}

.sigil-bits {
  display: block;
  margin-top: 3px;
  font-size: 7px;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 220, 0.3);
  overflow: hidden;
  white-space: nowrap;
}

.crown-barcode .sigil {
  height: 16px;
  opacity: 0.5;
}

.sheet-sigil {
  display: block;
  margin-top: 16px;
}

/* --------------------------------------------------------------- glitch -- */
.is-struck {
  animation: strike 0.42s steps(2, end) 1;
}

@keyframes strike {
  0% { clip-path: inset(0 0 0 0); transform: translate(0, 0); filter: none; }
  20% { clip-path: inset(12% 0 46% 0); transform: translate(-5px, 0); filter: invert(1); }
  40% { clip-path: inset(58% 0 8% 0); transform: translate(4px, 0); }
  60% { clip-path: inset(24% 0 62% 0); transform: translate(-3px, 0); filter: invert(1); }
  80% { clip-path: inset(70% 0 4% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); filter: none; }
}

/* ---------------------------------------------------------------- vigil -- */
body.is-vigil .skin-grain { opacity: 0.36; }

body.is-vigil .abyss-flare { opacity: 0.06; animation: none; }

body.is-vigil .abyss-shaft { opacity: 0.12; }

body.is-vigil .abyss-ink-left,
body.is-vigil .abyss-ink-right { opacity: 0.22; }

body.is-vigil .skin-vignette {
  background: radial-gradient(110% 110% at 50% 45%, transparent 26%, rgba(0, 0, 0, 0.9) 100%);
}

body.is-vigil .crown-word { color: var(--smoke); }

body.is-vigil .vigil-banner { border-color: var(--line-hard); }

/* --------------------------------------------------------------- states -- */
.verse.is-mine .verse-voice {
  background: var(--bone);
  color: var(--void);
  border-color: var(--bone);
}

.verse-answer::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--line-hard);
  flex-shrink: 0;
}



.offer-tag {
  font-weight: 700;
  background: rgba(230, 227, 220, 0.04);
}

.plate.is-mine .plate-name { color: var(--chalk); }

.plate.is-mine .plate-head { border-bottom-color: var(--line-hard); }

.plate.is-mine::before,
.plate.is-mine::after { border-color: var(--chalk); }