/* ============================================
   OUROTHEIA — Complete Stylesheet
   /ourotheia/ourotheia.css
   ============================================ */

/* ----------------------------------------
   CUSTOM PROPERTIES
   ---------------------------------------- */
:root {
  --o-void:          #080610;
  --o-deep:          #0e0a18;
  --o-surface:       #151020;
  --o-raised:        #1c1528;

  --o-bruise-dark:   #1e1228;
  --o-bruise:        #2a1a32;
  --o-bruise-light:  #3a2845;

  --o-mauve-deep:    #8a5e7a;
  --o-mauve:         #b08a9e;
  --o-mauve-light:   #d4b0c8;

  --o-gold-dark:     #7a6530;
  --o-gold:          #b89860;
  --o-gold-light:    #d4b878;
  --o-gold-pale:     #e8d8a8;

  --o-seaglass-deep: #2a6e60;
  --o-seaglass:      #4a9e8e;
  --o-seaglass-light:#6ec0b0;
  --o-seaglass-pale: #a0ddd0;

  --o-text:          #d8ccd2;
  --o-text-dim:      #9e8a94;
  --o-text-faint:    #6a5a64;
  --o-text-bright:   #f0e6ec;

  --o-border:        rgba(176, 138, 158, 0.15);
  --o-border-strong: rgba(176, 138, 158, 0.30);
  --o-glow-mauve:    rgba(176, 138, 158, 0.35);
  --o-glow-gold:     rgba(184, 152, 96,  0.35);
  --o-glow-seaglass: rgba(74,  158, 142, 0.35);

  --o-t-fast:        200ms;
  --o-t-mid:         400ms;
  --o-t-slow:        600ms;
  --o-hover-delay:   100ms;
  --o-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --o-ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --o-ease-breath:   cubic-bezier(0.45, 0.05, 0.55, 0.95);

  --o-font-display:  'Euphorigenic', 'Uncial Antiqua', serif;
  --o-font-body:     'MedievalSharp', Georgia, serif;
  --o-font-accent:   'Euphorigenic', serif;
  --o-font-mono:     'Courier New', monospace;
  --o-font-sigil:    'Esoterica', serif;
}


/* ----------------------------------------
   BASE
   ---------------------------------------- */
html:has(.o-landing) {
  overflow: hidden;
}

.ourotheia {
  background-color: var(--o-void);
  color: var(--o-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ourotheia ::selection {
  background: var(--o-bruise-light);
  color: var(--o-gold-pale);
}

/* Kill cursor trail */
.ourotheia .cursor-trail,
.ourotheia #cursorCanvas,
body:has(.ourotheia) > canvas {
  display: none !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* ----------------------------------------
   BREATHING BACKGROUND
   ---------------------------------------- */
.ourotheia::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    var(--o-bruise-dark) 0%,
    var(--o-deep) 40%,
    var(--o-void) 100%
  );
  animation: o-breathe 12s var(--o-ease-breath) infinite;
}

@keyframes o-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.ourotheia > * {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------
   TYPOGRAPHY
   ---------------------------------------- */
.ourotheia h1, .ourotheia h2, .ourotheia h3, .ourotheia h4 {
  font-family: 'var(--o-font-display)';
  color: var(--o-text-bright);
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin: 0 0 0.6em;
}

.ourotheia h1 { font-size: 2.2rem; color: var(--o-gold-light); font-family: 'Starstruck'; }
.ourotheia h2 { font-size: 1.5rem; color: var(--o-mauve-light); font-family: 'Crusades'; }
.ourotheia h3 { font-size: 1.15rem; color: var(--o-text); }

.ourotheia p {
  margin: 0 0 1em;
  max-width: 65ch;
}

.ourotheia em { color: var(--o-mauve-light); font-style: italic; }
.ourotheia strong { color: var(--o-text-bright); font-weight: normal; }
.text-dim { color: var(--o-text-dim); }
.text-faint { color: var(--o-text-faint); }


/* ----------------------------------------
   INLINE LINKS
   ---------------------------------------- */
.ourotheia .o-body a:not(.nav-anchor):not(.tag):not(.btn) {
  color: var(--o-seaglass-light);
  text-decoration: none;
  transition: color var(--o-t-fast) var(--o-ease), text-shadow var(--o-t-mid) var(--o-ease);
  transition-delay: var(--o-hover-delay);
}

.ourotheia .o-body a:not(.nav-anchor):not(.tag):not(.btn):hover {
  color: var(--o-seaglass-pale);
  text-shadow: 0 0 8px var(--o-glow-seaglass);
}


/* ----------------------------------------
   TAGS
   ---------------------------------------- */
.tag {
  display: inline-block;
  font-family: 'AMORIA';
  font-size: 0.72rem;
  color: var(--o-text-dim);
  background: var(--o-bruise);
  border: 1px solid var(--o-border);
  border-radius: 2px;
  padding: 0.15em 0.55em;
  margin: 0.15em 0.2em;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--o-t-fast) var(--o-ease), background var(--o-t-fast) var(--o-ease), border-color var(--o-t-fast) var(--o-ease);
  transition-delay: var(--o-hover-delay);
}

.tag:hover {
  color: var(--o-seaglass-light);
  border-color: var(--o-seaglass-deep);
  background: rgba(42, 110, 96, 0.15);
}

.tag-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}


/* ----------------------------------------
   SHIFTING WORDS
   ---------------------------------------- */
.shifting-word {
  display: inline-block;
  position: relative;
  color: var(--o-gold-light);
}

@keyframes o-word-flicker {
  0%   { opacity: 1; }
  15%  { opacity: 0.1; }
  20%  { opacity: 0.8; }
  25%  { opacity: 0.05; }
  35%  { opacity: 0.9; }
  40%  { opacity: 0; }
  45%  { opacity: 0.7; }
  50%  { opacity: 0; }
  55%  { opacity: 1; }
  100% { opacity: 1; }
}

.shifting-word.flickering {
  animation: o-word-flicker 300ms steps(1) forwards;
}


/* ----------------------------------------
   BUTTONS
   ---------------------------------------- */
.btn {
  display: inline-block;
  font-family: 'var(--o-font-display)';
  font-size: 0.95rem;
  color: var(--o-text);
  background: transparent;
  border: 1px solid var(--o-border-strong);
  padding: 0.5em 1.5em;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color var(--o-t-fast) var(--o-ease), border-color var(--o-t-mid) var(--o-ease), box-shadow var(--o-t-mid) var(--o-ease);
  transition-delay: var(--o-hover-delay);
}

.btn:hover {
  color: var(--o-text-bright);
  border-color: var(--o-mauve);
  box-shadow: 0 0 14px var(--o-glow-mauve);
}

.btn--drift {
  font-family: var(--o-font-accent);
  border-style: dashed;
  border-color: var(--o-border);
  color: var(--o-text-dim);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.btn--drift:hover {
  border-color: var(--o-seaglass);
  box-shadow: 0 0 10px var(--o-glow-seaglass);
  color: var(--o-seaglass-light);
  border-style: solid;
}


/* ----------------------------------------
   DIVIDER
   ---------------------------------------- */
.o-divider {
  border: none;
  background: none;
  height: 30px;
  width: 100%;
  max-width: 300px;
  margin: 0.3rem auto;
  background-image: url('/assets/images/borders/coilingserpentdiv.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}


/* ----------------------------------------
   VIGNETTE
   ---------------------------------------- */
.o-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    rgba(8, 6, 16, 0.55) 100%
  );
}


/* ----------------------------------------
   GOLDEN CENTIPEDES BORDER
   ---------------------------------------- */
.goldencentipedes {
  border: 14px solid transparent;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC6ElEQVR4Xu2dQVLDMAxF2xWn4f4H4TSsYNsoDG/eSE7SzGfHyLGsF+lHdlN4PuDn++vx8zrk4/PxfP2d7DT/2fa6/rqeGi+tdwPnr8EEjOy0gLPtATp8BwL07kBrfFeTALseO77G39bQAN0SCNCSEcnQZts3XWGYodZh9w5bf/SMoqc4XW/70gCVRKnRD9AA3W59icfblTwFRCVCAdPZgdU40uhuPO2S7y4gQMvpU4DKxn51idw+QylAysiraRqtdzrenYZOO6CH0uoKCNBhjQ7Qdwdq995WEbolT32onZ8ytitBzwD9H7FNoACVx3+U4QE6DZSIW005W/NovVZzdckH6LCGBmiAqhywXQxJBjnH4zurIVfT0C4gAljjDVAiBvYAlVtb4h2gRwO1mtk9/6QMONpu48cMtRMG6PZT2PEDZrsTOToDyZ9NqGTo8N59B5QaX3vHriYBFF+3Tw3Q8qWLACURLPZkqARGww8HahdkNdIGROuxduufnhnUxbT38uTABmSB0XjrP0BlG2QTwFZkMhQeYm2glPLWgS05KuGu3cZH8db52ltPW0I0vguMrg9QIiTtASqB0fC3B0oBnm2fBrxcQ88GRv4DlAhJe4BKYDT8ckBpwVdrk+i9gW48bQ3tLoCu79ppY2EzlBIkQOXHygEq/0wSVQQCnU75uiAqOQqgayf/FD8BrOvbvcFMAVgHFBD569rJf4BKwgEqgdHw2wGlgI+2U4nX9ZDE7c5Dpx0cDcj6m443QIf7zgC9GlAqMdIcun51H2tLntaL7zbRBGQPUFkCAbolkAxdnEDtFx1s30YaSfORBpLk0PXknyo0QIEQ3aDd4QgRX31HaX57wk4AyF8ytBC4HVDK+LMDtocltN7lJR+gQMBqToAG6Oi/4sC2ifpG0hjSLDu/nc/O3x0foPJ7S5RAARqg//87InooWsmw49sZ2t1ZEIDVdgJGdt2HkkgH6JZAMlS+qrP8oZQM3RL4BfyvjF69iON0AAAAAElFTkSuQmCC') 28 round;
}


/* ----------------------------------------
   KEYFRAMES
   ---------------------------------------- */
@keyframes o-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes o-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes o-bloom {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0px); }
}

@keyframes o-slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes o-slow-spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes o-pulse-glow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Animation classes — only active when JS adds .o-animated to body */
.o-animated .o-landing-header,
.o-animated .o-flank,
.o-animated .o-lower-center,
.o-animated .o-landing-footer,
.o-animated .o-bloom-target {
  opacity: 0;
  filter: blur(6px);
}

.o-animated .o-anchors li {
  opacity: 0;
}

.o-animated .o-landing-header.revealed,
.o-animated .o-bloom-target.revealed {
  animation: o-bloom 800ms var(--o-ease-out) forwards;
}

.o-animated .o-flank.revealed {
  animation: o-bloom 800ms var(--o-ease-out) forwards;
}

.o-animated .o-lower-center.revealed {
  animation: o-bloom 800ms var(--o-ease-out) forwards;
}

.o-animated .o-landing-footer.revealed {
  animation: o-fade-in var(--o-t-slow) var(--o-ease) forwards;
  filter: none;
}

.o-animated .o-anchors li.revealed {
  animation: o-fade-in var(--o-t-mid) var(--o-ease) forwards;
}


/* ============================================
   LANDING PAGE
   ============================================ */

.o-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  padding: 1.5rem 2rem;
  text-align: center;
}

.o-landing-header {
  font-family: 'Crusades';
  flex-shrink: 0;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.o-title {
  font-family: 'Starstruck';
  font-size: 2.4rem;
  color: var(--o-gold-light);
  letter-spacing: 0.08em;
  margin-bottom: 0.15em;
}

.o-subtitle {
  font-size: .95rem;
  font-style: italic;
  color: var(--o-text-faint);
  margin: 0;
}

/* Top divider under header */
.o-landing > .o-divider {
  flex-shrink: 0;
}


/* ----------------------------------------
   CONSTELLATION — 3-column center
   ---------------------------------------- */
.o-constellation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1200px;
}


/* ----------------------------------------
   FLANKING TEXT COLUMNS
   ---------------------------------------- */
.o-flank {
  flex: 0 1 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.o-flank--left {
  text-align: right;
}

.o-flank--left p {
  margin-left: auto;
}

.o-flank--right {
  text-align: left;
}

.o-thesis {
  font-family: 'Crusades';
  font-size: 1.2rem;
  color: var(--o-gold-light);
  line-height: 1.6;
  margin-bottom: 0;
}

.o-disclaimer {
  font-size: 0.82rem;
  font-family: 'darkage';
  color: var(--o-text-dim);
  font-size: 0.60rem;
  line-height: 1.65;
}


/* ----------------------------------------
   SIDEBAR (right column container)
   ---------------------------------------- */
.o-sidebar {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: rgba(14, 10, 24, 0.7);
  max-height: 100%;
  box-shadow: 0 0 30px rgba(8, 6, 16, 0.6), inset 0 0 20px rgba(8, 6, 16, 0.3);
}

.o-sidebar-top {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.o-sidebar-top::-webkit-scrollbar {
  display: none;
}

.o-sidebar-bottom {
  flex-shrink: 0;
  text-align: center;
}

.o-sidebar .o-divider {
  max-width: 60%;
  margin: 0.6rem auto;
}

.o-newly-inked-heading {
  font-family: 'Crusades';
  font-size: 0.82rem;
  color: var(--o-text-faint);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  margin-bottom: 0.6em;
}

.o-newly-inked-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.o-newly-inked-list li {
  padding: 0.3em 0;
  border-bottom: 1px solid var(--o-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  font-size: 0.85rem;
}

.o-newly-inked-list li:last-child {
  border-bottom: none;
}

.o-newly-inked-list a {
  color: var(--o-mauve-light);
  text-decoration: none;
  transition: color var(--o-t-fast) var(--o-ease);
  transition-delay: var(--o-hover-delay);
}

.o-newly-inked-list a:hover {
  color: var(--o-gold-light);
  text-shadow: 0 0 8px var(--o-glow-gold);
}

.o-newly-inked-list .date {
  font-family: 'darkage';
  font-size: 0.7rem;
  color: var(--o-text-faint);
  white-space: nowrap;
}

.o-newly-inked-list .section-label {
  font-family: var(--o-font-mono);
  font-size: 0.65rem;
  color: var(--o-bruise-light);
  margin-left: 0.3em;
}


/* ----------------------------------------
   NEXUS — ouroboros + orbiting links
   ---------------------------------------- */
.o-nexus {
  position: relative;
  flex-shrink: 0;
  width: 340px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ouroboros ring */
.o-ouroboros-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  animation: o-slow-spin 60s linear infinite;
}

.o-ouroboros-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184, 152, 96, 0.14) 0%,
    rgba(184, 152, 96, 0.04) 40%,
    transparent 70%
  );
  animation: o-pulse-glow 8s var(--o-ease-breath) infinite;
  pointer-events: none;
}

.o-ouroboros-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--o-gold);
  box-sizing: border-box;
  position: relative;
  box-shadow:
    0 0 12px rgba(184, 152, 96, 0.15),
    inset 0 0 12px rgba(184, 152, 96, 0.08);
}

.o-ouroboros-ring::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--o-gold-light);
  box-shadow: 0 0 8px var(--o-glow-gold);
}


/* ----------------------------------------
   ORBIT — spinning nav links
   ---------------------------------------- */
.o-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  pointer-events: none;
}

/* Orbit speed controlled by JS via --orbit-speed */

.o-orbit .o-anchors {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-orbit .o-anchors li {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: auto;
  white-space: nowrap;
}

/* Remove any separator dots */
.o-orbit .o-anchors li + li .nav-anchor::before {
  display: none;
}

/*
  5 links at 72° intervals, radius ~155px.
  Pre-calculated x,y positions:
  0°:   ( 0,    -155)
  72°:  ( 147,  -48)
  144°: ( 91,    125)
  216°: (-91,    125)
  288°: (-147,  -48)
*/
/* Each li: move to center, rotate to angle, push out, then rotate text so bottom faces center */
/* Positions handled by JS */
/* Counter-rotate each link so text stays readable while orbit spins */
.nav-anchor {
  font-family: 'AMORIA';
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--o-mauve-light);
  text-decoration: none;
  display: inline-block;
  padding: 0.3em 0.15em;
  transition: color var(--o-t-fast) var(--o-ease), text-shadow var(--o-t-mid) var(--o-ease);
  transition-delay: var(--o-hover-delay);
}

.nav-anchor::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--o-gold);
  transition: width var(--o-t-mid) var(--o-ease), left var(--o-t-mid) var(--o-ease);
}

.nav-anchor:hover {
  color: var(--o-gold-light);
  text-shadow: 0 0 10px var(--o-glow-gold);
}

.nav-anchor:hover::after {
  width: 100%;
  left: 0;
}


/* ----------------------------------------
   LOWER CENTER
   ---------------------------------------- */
.o-lower-center {
  flex-shrink: 0;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.o-lower-center .o-divider {
  margin: 0 auto 0.4rem;
}

.o-drift-wrap {
  margin: 0 auto;
}


/* ----------------------------------------
   FOOTER
   ---------------------------------------- */
.o-landing-footer {
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 0.5rem;
}

.o-landing-footer a {
  font-family: var(--o-font-mono);
  font-size: 0.75rem;
  color: var(--o-text-faint);
  text-decoration: none;
  transition: color var(--o-t-fast) var(--o-ease);
  transition-delay: var(--o-hover-delay);
}

.o-landing-footer a:hover {
  color: var(--o-mauve);
}


/* ----------------------------------------
   NEARBY TAGS
   ---------------------------------------- */
.o-nearby {
  font-size: 0.8rem;
  color: var(--o-text-faint);
  margin-top: 0.5rem;
}

.o-nearby .label {
  font-style: italic;
  margin-right: 0.5em;
}


/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 900px) {
  .o-constellation {
    flex-direction: column;
    gap: 1.5rem;
  }

  .o-flank--left, .o-flank--right {
    text-align: center;
    max-width: 400px;
  }

  .o-flank--left p {
    margin-left: auto;
    margin-right: auto;
  }

  .o-landing-footer {
    align-self: center;
  }
}

    .goldencentipedes {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC6ElEQVR4Xu2dQVLDMAxF2xWn4f4H4TSsYNsoDG/eSE7SzGfHyLGsF+lHdlN4PuDn++vx8zrk4/PxfP2d7DT/2fa6/rqeGi+tdwPnr8EEjOy0gLPtATp8BwL07kBrfFeTALseO77G39bQAN0SCNCSEcnQZts3XWGYodZh9w5bf/SMoqc4XW/70gCVRKnRD9AA3W59icfblTwFRCVCAdPZgdU40uhuPO2S7y4gQMvpU4DKxn51idw+QylAysiraRqtdzrenYZOO6CH0uoKCNBhjQ7Qdwdq995WErolT32onZ8ytitBzwD9H7FNoACVx3+U4QE6DZSIW005W/NovVZzdckH6LCGBmiAqhywXQxJBjnH4zurIVfT0C4gAljjDVAiBvYAlVtb4h2gRwO1mtk9/6QMONpu48cMtRMG6PZT2PEDZrsTOToDyZ9NqGTo8N59B5QaX3vHriYBFF+3Tw3Q8qWLACURLPZkqARGww8HahdkNdIGROuxduufnhnUxbT38uTABmSB0XjrP0BlG2QTwFZkMhQeYm2glPLWgS05KuGu3cZH8db52ltPW0I0vguMrg9QIiTtASqB0fC3B0oBnm2fBrxcQ88GRv4DlAhJe4BKYDT8ckBpwVdrk+i9gW48bQ3tLoCu79ppY2EzlBIkQOXHygEq/0wSVQQCnU75uiAqOQqgayf/FD8BrOvbvcFMAVgHFBD569rJf4BKwgEqgdHw2wGlgI+2U4nX9ZDE7c5Dpx0cDcj6m443QIf7zgC9GlAqMdIcun51H2tLntaL7zbRBGQPUFkCAbolkAxdnEDtFx1s30YaSfORBpLk0PXknyo0QIEQ3aDd4QgRX31HaX57wk4AyF8ytBC4HVDK+LMDtocltN7lJR+gQMBqToAG6Oi/4sC2ifpG0hjSLDu/nc/O3x0foPJ7S5RAARqg//87InooWsmw49sZ2t1ZEIDVdgJGdt2HkkgH6JZAMlS+qrP8oZQM3RL4BfyvjF69iON0AAAAAElFTkSuQmCC') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  
  /* ----------------------------------------
   OUROBOROS IMAGE (replaces ring when available)
   ---------------------------------------- */
.o-ouroboros-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.o-ouroboros-image.loaded {
  display: block;
}

.o-ouroboros-image.loaded ~ .o-ouroboros-ring {
  display: none;
}