/* OMEGA — shared styles for every page */

:root {
  --void: #050505;
  --ink: #ece7de;
  --dim: #8d8880;
  --faint: rgba(236, 231, 222, 0.32);
  --hair: rgba(236, 231, 222, 0.16);
  --brass: #c9a45c;
  --paper: #d8cfbf;
  --serif: 'EB Garamond', 'Times New Roman', Times, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(236, 231, 222, 0.18); }

/* spaced italics — the voice of the site */
.spaced { font-style: italic; letter-spacing: 0.32em; }

/* ---------- veil: the fade between pages ---------- */
.veil {
  position: fixed; inset: 0; z-index: 10000;
  background: #000; pointer-events: none;
  opacity: 1; transition: opacity 1.1s var(--ease-io);
}
.veil.is-open { opacity: 0; }
.veil.is-closing { opacity: 1; transition-duration: 0.45s; }
.veil--paper { background: #cfc6b4; }

/* ---------- grain layers ---------- */
.layers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.drift-sway {
  position: absolute; inset: 0;
  animation: driftX var(--dur-x) ease-in-out infinite alternate;
}
.drift-inner {
  position: absolute;
  top: 0; right: 0;
  bottom: calc(-1 * var(--tile));
  left: calc(-1 * var(--sway) - 2px);
  background-size: var(--tile) var(--tile);
  image-rendering: pixelated;
  animation: driftY var(--dur-y) linear infinite;
  will-change: transform;
}
@keyframes driftY { to { transform: translate3d(0, calc(-1 * var(--tile)), 0); } }
@keyframes driftX { to { transform: translate3d(var(--sway), 0, 0); } }

.grain-flicker {
  position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  background-repeat: repeat;
  image-rendering: pixelated;
}

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.96) 100%);
}

/* ---------- corner sigil ---------- */
.sigil-corner {
  position: fixed; left: 14px; top: 14px; z-index: 9000;
  width: 30px; height: 30px; display: block;
  color: var(--ink); opacity: 0.8;
  transition: transform 0.7s var(--ease-out), opacity 0.3s;
}
.sigil-corner:hover { transform: rotate(180deg) scale(1.2); opacity: 1; }
.sigil-corner:focus-visible { outline: 1px solid var(--faint); outline-offset: 6px; }

/* ---------- the sigil and its drawing ---------- */
.sigil { display: block; width: 100%; height: 100%; overflow: visible; }
/* smooth drawing: everything fades in softly, strokes overlap along a sine curve */
.sigil.is-drawing {
  opacity: 0; transform: scale(0.965);
  animation: sigilIn 1.6s ease-out 0.1s forwards, sigilGrow 4.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
.sigil.is-drawing .s-line {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: sigilDraw var(--dur) cubic-bezier(0.37, 0, 0.63, 1) var(--delay) forwards;
}
.sigil.is-drawing .s-wire { --dur: 2.1s; --delay: 0.2s; }
.sigil.is-drawing .s-ring { --dur: 2.9s; --delay: 0.55s; }
.sigil.is-drawing .s-omega { --dur: 2.4s; --delay: 1.5s; }
.sigil .s-star { transform-box: fill-box; transform-origin: 50% 50%; }
.sigil.is-drawing .s-star {
  opacity: 0; transform: scale(0.2) rotate(-45deg);
  animation: starIn 2s cubic-bezier(0.22, 0.61, 0.36, 1) 3.2s forwards;
}
.sigil .s-glint { animation: breathe 7s ease-in-out 5.4s infinite; }
@keyframes sigilIn { to { opacity: 1; } }
@keyframes sigilGrow { to { transform: none; } }
@keyframes sigilDraw { to { stroke-dashoffset: 0; } }
@keyframes starIn { to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* ---------- small captions ---------- */
.whisper {
  font-style: italic; font-size: 10px; letter-spacing: 0.28em;
  color: #77736c; user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}