/* The rite: NOIz3 PolluTOR's esoteric skin for the Studio (index.html), the DJ board (dj.html) and the
   grimoire (sigils.html). Loaded after each page's own stylesheet; it restyles through their colour tokens.
   Serpents, alchemy, scripts, yantra geometry and nāga motifs only. */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Cormorant+Garamond:ital,wght@0,500;1,500;1,600&family=Noto+Sans+Symbols&family=Noto+Sans+Symbols+2&family=Noto+Music&family=Noto+Znamenny+Musical+Notation&family=Noto+Sans+Egyptian+Hieroglyphs&family=Noto+Sans+Glagolitic&family=Noto+Sans+Linear+B&family=Noto+Sans+Coptic&family=Noto+Sans+Old+Italic&family=Noto+Sans+Ugaritic&family=Noto+Sans+Ogham&family=Noto+Sans+Runic&family=Noto+Sans+Devanagari:wght@400;600&display=swap");

:root {
  /* cursed manuscript: parchment on void, ultraviolet, verdigris, tarnished brass, oxblood */
  --bg: #050407;
  --bg-2: #0a0810;
  --panel: #0e0b13;
  --panel-2: #15111b;
  --well: #08060b;
  --line: #251e2c;
  --line-2: #352b3e;
  --text: #e6dfcc;
  --muted: #a39b8c;
  --dim: #6f6878;
  --uv: #9b5cff;
  --verdigris: #3fc1a5;
  --brass: #b8964a;
  --oxblood: #b0203a;
  --acid: #c6ff3d;
  --pink: var(--uv);
  --cyan: var(--verdigris);
  --amber: var(--brass);
  --green: var(--acid);
  --red: #e0324e;
  --violet: #c49bff;
  /* dj.html tokens */
  --deck-a: var(--verdigris);
  --deck-b: var(--uv);
  --accent: var(--brass);
  --ok: var(--acid);
  --bad: #e0324e;
  --sec-intro: var(--verdigris);
  --sec-drop: var(--uv);
  --sec-break: #c49bff;
  --sec-outro: #6f6878;
  --sec-transition: var(--brass);
  --vu-lo: var(--verdigris);
  --vu-mid: var(--brass);
  --vu-hi: var(--oxblood);
  --wave: #e6dfcc;
  --playhead: var(--acid);
  --glyph: "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Music", "Noto Znamenny Musical Notation", "Noto Sans Egyptian Hieroglyphs",
           "Noto Sans Glagolitic", "Noto Sans Linear B", "Noto Sans Coptic", "Noto Sans Old Italic", "Noto Sans Ugaritic", "Noto Sans Ogham",
           "Noto Sans Runic", "Noto Sans Devanagari", "Noto Sans Math", "Apple Symbols", sans-serif;
  --rite-head: "Syne", "Noto Sans Devanagari", var(--glyph);
  --rite-book: "Cormorant Garamond", "Noto Sans Devanagari", Georgia, serif;
}

body {
  background:
    radial-gradient(900px 560px at 88% -10%, #1d0f33 0%, transparent 60%),
    radial-gradient(800px 500px at -10% 15%, #06201b 0%, transparent 58%),
    radial-gradient(1100px 700px at 50% 125%, #2a0812 0%, transparent 60%),
    var(--bg);
}

/* CRT scanlines + grain, never in the way of a click */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.11; mix-blend-mode: overlay; animation: rite-flicker 9s steps(1) infinite;
}
@keyframes rite-flicker { 0%, 100% { opacity: 0.11; } 47% { opacity: 0.08; } 48% { opacity: 0.15; } 49% { opacity: 0.1; } }

/* the yantra wheel + the field of scattered sigils (each view draws its own traditions) */
.rite-geo { position: fixed; z-index: 0; pointer-events: none; width: min(1100px, 140vw); aspect-ratio: 1; right: -22vw; top: -18vh;
  opacity: 0.07; color: var(--brass); animation: rite-turn 240s linear infinite; }
.rite-geo.left { left: -30vw; right: auto; top: auto; bottom: -30vh; color: var(--verdigris); opacity: 0.05; animation-direction: reverse; animation-duration: 320s; }
@keyframes rite-turn { to { transform: rotate(360deg); } }
.rite-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rite-field i { position: absolute; font-style: normal; font-family: var(--glyph); color: var(--text); line-height: 1;
  animation: rite-drift var(--d, 40s) ease-in-out infinite alternate; will-change: transform; }
.rite-field i.c1 { color: var(--uv); } .rite-field i.c2 { color: var(--verdigris); } .rite-field i.c3 { color: var(--brass); } .rite-field i.c4 { color: var(--oxblood); }
@keyframes rite-drift { from { transform: translate(0, 0) rotate(var(--r0, 0deg)); } to { transform: translate(var(--dx, 20px), var(--dy, -30px)) rotate(var(--r1, 40deg)); } }
.rite-margin { position: absolute; font-family: var(--rite-book); font-style: italic; font-size: 13px; color: var(--muted); opacity: 0.55;
  max-width: 190px; line-height: 1.35; transform: rotate(var(--r, -4deg)); }
.rite-margin::before { content: attr(data-g) " "; font-family: var(--glyph); font-style: normal; color: var(--brass); }
main, nav, footer, .board { position: relative; z-index: 1; }

/* type: Uncial for headings, Fell for the liturgy; the data and controls keep the plain faces */
h1, h2, .section-head h2, .board-head h1 { font-family: var(--rite-head); font-weight: 800; letter-spacing: -0.02em; }
h1 { text-shadow: 0 0 26px rgba(155, 92, 255, 0.25); }
.lede, .section-head p, .how .steps span, .hold-s { font-family: var(--rite-book); font-size: 1.16em; font-weight: 500; line-height: 1.45; }
.lede { font-style: italic; }
.how .steps b { font-family: var(--rite-head); font-weight: 700; letter-spacing: -0.01em; }
.eyebrow { color: var(--brass) !important; letter-spacing: 0.14em; font-family: var(--glyph), var(--mono); }
.rite-dev { display: block; font-family: "Noto Sans Devanagari", var(--sans); font-weight: 600; font-size: 0.4em; letter-spacing: 0.08em;
  color: var(--brass); opacity: 0.85; margin-top: 0.3em; text-shadow: none; }
.rite-dev .rite-tr { font-family: var(--rite-book); font-style: italic; font-weight: 400; font-size: 0.85em; letter-spacing: 0.02em; color: var(--muted); margin-left: 0.6em; }
.rite-hg { font-family: var(--glyph); color: var(--brass); margin-right: 0.35em; font-weight: 400; text-shadow: none; }
.rite-strip { display: block; font-family: var(--glyph); color: var(--dim); letter-spacing: 0.5em; font-size: 13px; white-space: nowrap; overflow: hidden;
  margin: 2px 0 10px; opacity: 0.7; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }

/* the brand: one fixed spelling and style; the logo is a turning ouroboros with the eye inside */
.brand-name { font-family: "Space Grotesk", system-ui, sans-serif !important; font-weight: 700; letter-spacing: 0.01em; }
.brand-disc, .rite-eye { display: none !important; }
.rite-logo { position: relative; width: 34px; height: 34px; flex: none; }
.rite-logo .ring { position: absolute; inset: 0; color: #f2c14e; filter: drop-shadow(0 0 3px #f2c14e66); animation: rite-turn 9s linear infinite; }
.rite-logo .ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rite-logo .pupil { position: absolute; inset: 9px; }
.rite-logo .pupil svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rite-logo .iris { transition: transform 0.08s linear; }
.rite-logo.beat .ring { filter: drop-shadow(0 0 4px var(--uv)); }
.rite-logo .glow { transform-box: fill-box; transform-origin: center; opacity: 0.5; }
.rite-logo.beat .glow { animation: rite-beat var(--beat, 1s) ease-out infinite; }
@keyframes rite-beat { 0% { opacity: 1; transform: scale(1.25); } 60%, 100% { opacity: 0.35; transform: scale(1); } }

/* ouroboros loaders */
.pill .dot { display: none !important; }
.rite-ouro { width: 14px; height: 14px; flex: none; animation: rite-turn 2.4s linear infinite; color: var(--verdigris); }

/* tabs carry their own sigil */
.mode .rite-tab, .t-which .rite-tab { font-family: var(--glyph); margin-right: 5px; font-size: 1.05em; color: var(--brass); }
.mode.on .rite-tab { color: inherit; }

/* coiled-serpent dividers */
main > section + section::before, .board > section.queue::before {
  content: ""; display: block; height: 26px; margin: 6px auto 22px; width: min(520px, 80%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 26'%3E%3Cpath d='M4 13 C 34 -2, 64 28, 94 13 S 154 -2, 184 13 S 244 28, 274 13 S 334 -2, 364 13 S 424 28, 454 13 S 494 4, 506 13' fill='none' stroke='%23b8964a' stroke-width='1.6' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M506 13 l8 -4 l-2 4 l2 4 z' fill='%23b8964a'/%3E%3Ccircle cx='4' cy='13' r='2' fill='%233fc1a5'/%3E%3Ccircle cx='260' cy='13' r='3' fill='none' stroke='%239b5cff' stroke-width='1.2'/%3E%3C/svg%3E");
}

.x-card, .deck, .mixer, .queue, .rv, .tdeck { border-color: var(--line-2) !important; }
:focus-visible { outline: 2px solid var(--acid) !important; outline-offset: 2px; }
.btn.primary { background: linear-gradient(180deg, #a874ff, #6a2fd6) !important; color: #fff !important; border-color: #b98cff !important; }
.mode.on { background: var(--uv) !important; color: #fff !important; }

/* the DJ mixer's turning sigil */
.mixer { position: relative; overflow: hidden; }
.rite-sigil { position: absolute; left: 50%; top: 46%; width: min(260px, 70%); aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  color: var(--brass); opacity: 0.17; animation: rite-turn 60s linear infinite; z-index: 0; }
.mixer > *:not(.rite-sigil) { position: relative; z-index: 1; }

/* cipher flicker: a heading's letters briefly turn to sigils */
.rite-cipher { font-family: var(--glyph); color: var(--uv); display: inline-block; overflow: hidden; text-align: center; vertical-align: baseline; line-height: inherit; font-size: 0.82em; white-space: nowrap; }
body.preview #preview-exit { display: inline-flex !important; }

.rite-toggle { background: none; border: 1px solid var(--line-2); color: var(--brass); border-radius: 999px; padding: 2px 9px; font: 15px var(--glyph); cursor: pointer; }
.rite-toggle[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 10px rgba(184, 150, 74, 0.4); }
.rite-mantra { font-family: var(--rite-book); color: var(--muted); font-size: 13px; }
.rite-mantra b { color: var(--brass); font-weight: 400; font-style: italic; }
.rite-mantra a { color: var(--verdigris); }

@media (prefers-reduced-motion: reduce) {
  body::after, .rite-geo, .rite-sigil, .rite-ouro, .rite-logo .ring, .rite-logo.beat .glow, .rite-field i { animation: none !important; }
}
@media (max-width: 760px) {
  .rite-geo { width: 170vw; right: -60vw; top: -10vh; }
  .rite-dev { font-size: 0.5em; }
  .rite-margin { display: none; }
}
/* the sigil strips never size their containers (they would push phones wide) */
.rite-strip { contain: inline-size; max-width: 100%; min-width: 0; }
.top-head > div, .board-head > div, .section-head { min-width: 0; }
/* the nav never folds: tab names, brand and links stay on one line (tabs scroll on phones) */
.mode, .brand-name, .top-links a { white-space: nowrap; }
.modes .mode { padding-inline: 10px; }
.brand-kana { white-space: nowrap; }
@media (max-width: 1180px) { .brand-kana { display: none; } .top-links a[href="#how"] { display: none; } }