@font-face {
  font-family: 'Weipawn Chess';
  src: url('../fonts/dejavu-chess.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2654-265F;
}
:root {
  --mono: var(--seal-font-body);
  --display: var(--seal-font-sec);
  --han: var(--seal-font-pri);
  --sq-light: #b3a78c;
  --sq-dark: #3a352e;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
body {
  background: radial-gradient(900px 620px at 76% -8%, rgba(var(--accent-dark-rgb), .22), transparent 62%),
    radial-gradient(760px 520px at 6% 8%, rgba(var(--accent-alt-deep-rgb), .26), transparent 64%),
    radial-gradient(1000px 700px at 50% 112%, rgba(var(--seal-trim-rgb), .08), transparent 62%),
    linear-gradient(180deg, #100e0c, var(--ink-0) 55%);
}
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.fx.grid {
  background-image: repeating-linear-gradient(90deg, rgba(var(--seal-fg-rgb), .022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(var(--seal-fg-rgb), .016) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, #000 20%, transparent 100%);
}
.fx.glow {
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), transparent) 78% 22% / 46vw 46vw no-repeat,
    radial-gradient(closest-side, rgba(var(--accent-alt-rgb), .12), transparent) 12% 74% / 38vw 38vw no-repeat;
  filter: blur(48px);
}
.fx.scan {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px);
  opacity: .35;
}
.fx.grain {
  background-image: var(--grain);
  opacity: .05;
  mix-blend-mode: overlay;
}
.fx.vignette { box-shadow: inset 0 0 240px 70px rgba(var(--seal-scrim-rgb), .92); }
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.petals i {
  position: absolute; top: -6vh; width: 9.9px; height: 9.9px;
  background: var(--vermilion);
  border-radius: 60% 0 60% 0;
  opacity: 0;
  animation: drift 26s linear infinite;
}
.petals i:nth-child(1) { left: 12%; animation-delay: 0s; }
.petals i:nth-child(2) { left: 31%; animation-delay: 6s; background: var(--talisman); }
.petals i:nth-child(3) { left: 54%; animation-delay: 12s; }
.petals i:nth-child(4) { left: 73%; animation-delay: 3s; background: var(--bone-dim); }
.petals i:nth-child(5) { left: 88%; animation-delay: 17s; }
.petals i:nth-child(6) { left: 45%; animation-delay: 22s; background: var(--talisman); }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .5; }
  90% { opacity: .35; }
  100% { transform: translate(-14vw, 108vh) rotate(520deg); opacity: 0; }
}
@media (max-width: 900px) {
  .petals { display: none; }
}