/* ============================================
   ECLIPTICA — scroll / grimoire
   /ourotheia/ecliptica.css
   ============================================ */

/* ----------------------------------------
   BASE
   ---------------------------------------- */
.o-ecliptica {
  background-color: #06060a;
  background-image: url('/assets/images/backgrounds/blackstars.png');
  background-repeat: repeat;
  background-size: auto;
  color: #d4d0c8;
  font-family: var(--o-font-body);
  min-height: 100vh;
  position: relative;
}

/* Kill cursor trail */
.o-ecliptica .cursor-trail,
.o-ecliptica #cursorCanvas,
body:has(.o-ecliptica) > canvas {
  display: none !important;
}

/* Custom scrollbar */
.o-ecliptica,
html:has(.o-ecliptica) {
  scrollbar-width: thin;
  scrollbar-color: rgba(160,155,185,0.18) #06060a;
}

.o-ecliptica::-webkit-scrollbar,
html:has(.o-ecliptica)::-webkit-scrollbar {
  width: 6px;
}

.o-ecliptica::-webkit-scrollbar-track,
html:has(.o-ecliptica)::-webkit-scrollbar-track {
  background: #06060a;
}

.o-ecliptica::-webkit-scrollbar-thumb,
html:has(.o-ecliptica)::-webkit-scrollbar-thumb {
  background: rgba(160,155,185,0.18);
  border-radius: 3px;
  border: 1px solid rgba(160,155,185,0.05);
}

.o-ecliptica::-webkit-scrollbar-thumb:hover,
html:has(.o-ecliptica)::-webkit-scrollbar-thumb:hover {
  background: rgba(196,184,224,0.3);
}

.o-ecliptica .o-vignette {
  z-index: 100;
  position: fixed;
}


/* ----------------------------------------
   STICKY SCROLL BAR — top return
   ---------------------------------------- */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
  transform: translateX(-50%) translateY(-100%);
}

.scroll-bar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.scroll-bar-return {
  display: flex;
  align-items: center;
  gap: 0.8em;
  background: linear-gradient(
    180deg,
    #1a1714 0%,
    #141210 60%,
    rgba(14,12,10,0.95) 100%
  );
  border: none;
  border-bottom: 1px solid rgba(180,160,130,0.1);
  padding: 0.5em 2.5em 0.6em;
  cursor: pointer;
  transition: border-color 300ms ease;
  /* Scroll roll shape */
  border-radius: 0 0 20px 20px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(180,160,130,0.04);
}

.scroll-bar-return:hover {
  border-color: rgba(212,184,120,0.3);
}

.scroll-bar-text {
  font-family: "Starstruck", var(--o-font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #7a7888;
  transition: color 300ms ease;
}

.scroll-bar-return:hover .scroll-bar-text {
  color: #d4b878;
}

.scroll-bar-ornament {
  font-size: 0.7rem;
  color: #4a4858;
  transition: color 300ms ease;
}

.scroll-bar-return:hover .scroll-bar-ornament {
  color: #d0c8e4;
}


/* ----------------------------------------
   THE SCROLL — parchment strip
   ---------------------------------------- */
.scroll-parchment {
  max-width: 660px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Scroll rolls (top and bottom) */
.scroll-roll {
  height: 28px;
  margin: 0 -8px;
  position: relative;
  z-index: 2;
  background: linear-gradient(
    180deg,
    #1e1a16 0%,
    #2a2520 30%,
    #1e1a16 50%,
    #141210 70%,
    #0e0c0a 100%
  );
  border-radius: 14px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(180,160,130,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

.scroll-roll--top {
  margin-top: 2rem;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    inset 0 2px 0 rgba(180,160,130,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

.scroll-roll--bottom {
  margin-bottom: 3rem;
  box-shadow:
    0 -2px 8px rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(180,160,130,0.06);
}

/* Wood grain hint on rolls */
.scroll-roll::after {
  content: '';
  position: absolute;
  inset: 4px 20px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(180,160,130,0.02) 1px,
    transparent 2px,
    transparent 8px
  );
  border-radius: 10px;
  pointer-events: none;
}

/* Scroll body — the parchment */
.scroll-body {
  position: relative;
  background-color: #0c0c10;
  background-image: url('/assets/images/backgrounds/blackcanvas.png');
  background-repeat: repeat;
  background-size: auto;
  padding: 3rem 3.5rem 2rem;
  /* Parchment edge shadows */
  box-shadow:
    inset 4px 0 20px rgba(0,0,0,0.4),
    inset -4px 0 20px rgba(0,0,0,0.4),
    4px 0 16px rgba(0,0,0,0.3),
    -4px 0 16px rgba(0,0,0,0.3);
}

/* Soften texture slightly */
.scroll-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12,12,18,0.35);
  pointer-events: none;
  z-index: 0;
}

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


/* ----------------------------------------
   HEADER / TABLE OF CONTENTS
   ---------------------------------------- */
.ecliptica-header {
  text-align: center;
  padding-bottom: 1rem;
}

.ecliptica-title {
  font-family: "Starstruck", var(--o-font-display);
  font-size: 3rem;
  color: #c4b8e0;
  letter-spacing: 0.1em;
  margin-bottom: 0.1em;
  text-shadow:
    0 0 8px rgba(196,184,224,0.25),
    0 0 20px rgba(196,184,224,0.15),
    0 0 40px rgba(180,160,220,0.08),
    0 2px 4px rgba(0,0,0,0.8);
  animation: title-glow 8s ease-in-out infinite alternate;
}

@keyframes title-glow {
  0%   { text-shadow: 0 0 8px rgba(196,184,224,0.2), 0 0 20px rgba(196,184,224,0.1), 0 0 40px rgba(180,160,220,0.05), 0 2px 4px rgba(0,0,0,0.8); }
  100% { text-shadow: 0 0 10px rgba(196,184,224,0.35), 0 0 25px rgba(196,184,224,0.2), 0 0 50px rgba(180,160,220,0.1), 0 2px 4px rgba(0,0,0,0.8); }
}

.ecliptica-subtitle {
  font-style: italic;
  font-size: 0.88rem;
  color: #6a6878;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

/* TOC list */
.toc-entries {
  list-style: none;
  counter-reset: ecliptica-toc;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-family: 'AMORIA';
}

.toc-entries li {
  counter-increment: ecliptica-toc;
  margin-bottom: 0.6em;
  font-family: 'AMORIA';
}

.toc-entries li::before {
  content: counter(ecliptica-toc, upper-roman) ". ";
  font-family: 'AMORIA';
  font-size: 0.68rem;
  color: #8a85a0;
  margin-right: 0.3em;
}

.toc-link {
  font-family: 'Crusades';
  font-size: 1.3rem;
  color: #b8b4c8;
  text-decoration: none;
  transition: color 250ms ease, text-shadow 400ms ease;
  letter-spacing: 0.02em;
}

.toc-link:hover {
  color: #d0c8e4;
  text-shadow: 0 0 8px rgba(200,190,230,0.15);
}


/* ----------------------------------------
   DIVIDERS — ornate serpent
   ---------------------------------------- */
.ecliptica-divider {
  width: 50%;
  height: 30px;
  margin: 1.8rem auto;
  background-image: url('/assets/images/borders/ourotheiadiv.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

.section-divider {
  width: 70%;
  height: 35px;
  margin: 3rem auto 2rem;
  background-image: url('/assets/images/borders/ourotheiadiv.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
}

.section-divider--final {
  opacity: 0.25;
  width: 40%;
}


/* ----------------------------------------
   SECTIONS
   ---------------------------------------- */
.ecliptica-section {
  margin-bottom: 1rem;
  /* Slight variation in margins for hand-laid feel */
  padding-left: 0.2em;
  font-family: 'Quadrata';
}

.ecliptica-section:nth-child(odd) {
  padding-left: 0;
  padding-right: 0.3em;
  font-family: 'Quadrata';
}

.ecliptica-section:nth-child(3n) {
  padding-left: 0.5em;
  font-family: 'Quadrata';
}

/* Dense variant — tighter spacing */
.ecliptica-section--dense .section-body {
  line-height: .5;
  font-family: 'Quadrata';
}

/* Sparse variant — more air */
.ecliptica-section--sparse .section-body {
  line-height: .9;
  font-family: 'Quadrata';
}

.ecliptica-section--sparse .section-body p {
  margin-bottom: 1.3em;
  font-family: 'Quadrata';
}


/* ----------------------------------------
   SECTION TITLES
   ---------------------------------------- */
.section-title {
  font-family: "Euphorigenic", var(--o-font-display);
  font-size: 1.6rem;
  color: #d4d0c8;
  letter-spacing: 0.06em;
  margin-bottom: 1.2em;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.7),
    0 0 10px rgba(212,184,120,0.06);
  /* Slight warmth */
  background: linear-gradient(
    90deg,
    #c8c4d4 0%,
    #d4c8e8 50%,
    #c8c4d4 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ----------------------------------------
   SECTION BODY
   ---------------------------------------- */
.section-body {
  font-size: 2.2rem;
  line-height: .8;
  color: #c0bcc8;
  text-shadow: 0 0 1px rgba(192,188,200,0.06);
  letter-spacing: 0.002em;
  word-spacing: 0.0002em;
}

.section-body p {
  margin: 0 0 1.1em;
}

/* Uneven paragraph margins */
.section-body p:nth-child(odd) {
  padding-left: 0.1em;
}

.section-body p:nth-child(3n) {
  padding-left: 0.35em;
}

/* Inline links */
.section-body a {
  color: var(--o-seaglass-light, #6ac4b0);
  text-decoration: none;
  transition: color 200ms ease, text-shadow 400ms ease;
}

.section-body a:hover {
  color: var(--o-seaglass-pale, #a0ddd0);
  text-shadow: 0 0 6px rgba(106,196,176,0.3);
}


/* ----------------------------------------
   DROP CAPS — PaisleyCaps
   ---------------------------------------- */
.drop-cap {
  font-family: "Starstruck", serif;
  float: left;
  font-size: 3rem;
  line-height: 0.75;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: #c8c0d8;
  text-shadow:
    0 0 8px rgba(180,170,210,0.1),
    0 2px 4px rgba(0,0,0,0.6);
}

/* Alternate drop cap colors for variety */
.ecliptica-section:nth-child(3n+1) .drop-cap {
  color: #c8c0d8;
}

.ecliptica-section:nth-child(3n+2) .drop-cap {
  color: #b8b0d0;
}

.ecliptica-section:nth-child(3n) .drop-cap {
  color: #a8a0c8;
}

/* Clear float after drop cap paragraph */
.section-body p:first-child::after {
  content: '';
  display: table;
  clear: both;
}


/* ----------------------------------------
   END SIGIL
   ---------------------------------------- */
.ecliptica-end {
  text-align: center;
  padding: 1.5rem 0 1rem;
  font-size: 1.2rem;
  color: #34323e;
}

.end-sigil {
  display: inline-block;
  animation: sigil-pulse 6s ease-in-out infinite alternate;
}

@keyframes sigil-pulse {
  0%   { opacity: 0.3; text-shadow: none; }
  100% { opacity: 0.6; text-shadow: 0 0 8px rgba(180,170,210,0.1); }
}


/* ----------------------------------------
   SECTION REVEAL — fade in on scroll
   ---------------------------------------- */
.ecliptica-section {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.ecliptica-section.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------
   BACK LINK
   ---------------------------------------- */
.ecliptica-back {
  position: fixed;
  bottom: 1.2rem;
  left: 1.5rem;
  font-family: var(--o-font-mono, monospace);
  font-size: 0.72rem;
  color: var(--o-text-faint, #4a4540);
  text-decoration: none;
  z-index: 10;
  transition: color 200ms ease;
}

.ecliptica-back:hover {
  color: var(--o-mauve, #b09ac0);
}


/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 720px) {
  .scroll-body {
    padding: 2.5rem 2rem 1.5rem;
  }

  .ecliptica-title {
    font-size: 2.2rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .drop-cap {
    font-size: 2.6rem;
  }

  .toc-entries {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .scroll-parchment {
    margin: 0 0.5rem;
  }

  .scroll-body {
    padding: 2rem 1.3rem 1.5rem;
  }

  .scroll-bar-return {
    padding: 0.4em 1.5em 0.5em;
  }
}