/* ===========================================================================
   ANTIPHON — vestments
   The skin: grain, vignette, chain, thorns, sigils, the glitch, the vigil.
   Everything here is decoration; remove the file and the app still works.
   =========================================================================== */

/* ----------------------------------------------------------------- grain - */
.skin-grain {
  position: fixed;
  inset: -60px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.24;
  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(120% 76% at 50% 12%, rgba(255, 255, 255, 0.045), transparent 58%),
    radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.72) 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.13);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 480px) {
  .skin-rail-jp { 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;
}

.plate[data-side="a"] .plate-side,
.plate[data-side="b"] .plate-side {
  font-variant-numeric: oldstyle-nums;
}

/* torn edge on the relic art, poster-style */
.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: grayscale(1) contrast(1.25) brightness(0.92);
}

.plate.is-silent .relic-art {
  filter: grayscale(1) contrast(1.1) brightness(0.55);
}

.verse-art,
.result-art,
.sheet-art {
  filter: grayscale(1) contrast(1.2) brightness(0.9);
}

/* ----------------------------------------------------------- thorn halo -- */
.relic-halo .halo-ring {
  fill: none;
  stroke: rgba(230, 227, 220, 0.22);
  stroke-width: 1;
}

.relic-halo .thorn {
  stroke: rgba(230, 227, 220, 0.16);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 0.4s var(--ease);
}

.relic-halo .thorn.is-lit {
  stroke: var(--chalk);
}

.plate.is-blessed .relic-halo .halo-ring {
  stroke: rgba(255, 255, 255, 0.45);
}

.plate.is-blessed .relic-halo .thorn.is-lit {
  stroke: var(--halo);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.halo-glyph {
  width: 15px;
  height: 15px;
  background: currentColor;
  color: var(--smoke);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3Cpath d='M12 5.6V2.4M17.2 8.4 19.8 6M18.4 12h3.2M17.2 15.6 19.8 18M12 18.4v3.2M6.8 15.6 4.2 18M5.6 12H2.4M6.8 8.4 4.2 6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3Cpath d='M12 5.6V2.4M17.2 8.4 19.8 6M18.4 12h3.2M17.2 15.6 19.8 18M12 18.4v3.2M6.8 15.6 4.2 18M5.6 12H2.4M6.8 8.4 4.2 6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.halo-button:hover .halo-glyph,
.halo-button:focus-visible .halo-glyph {
  color: var(--chalk);
  transform: rotate(32deg);
}

.halo-button.is-granted .halo-glyph {
  color: var(--halo);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.55));
}

/* ---------------------------------------------------------------- chain -- */
/* interlocking links: a flat one, then one on edge, then a flat one again */
.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;
  text-overflow: clip;
  white-space: nowrap;
}

.crown-barcode,
.colophon-binary {
  display: block;
}

.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.4;
}

body.is-vigil .skin-vignette {
  background:
    radial-gradient(120% 76% at 50% 12%, rgba(255, 255, 255, 0.02), transparent 55%),
    radial-gradient(100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.86) 100%);
}

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

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

body.is-vigil .plate-title {
  color: var(--bone);
}

/* --------------------------------------------------------------- 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;
}

.relic-row.is-first {
  border-color: var(--line-hard);
}

.relic-row.is-first .relic-rank {
  color: var(--chalk);
}

/* the offer form reads like a stamp pressed into the sheet */
.offer-tag {
  font-weight: 700;
  background: rgba(230, 227, 220, 0.04);
}

/* the plate that belongs to the current viewer */
.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);
}