/* Reset and core layout 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


  body {
  background-color: #0a0a0f;
  background-image: url('https://www.transparenttextures.com/patterns/dark-mosaic.png');
  background-size: 300px;
  background-repeat: repeat;
  animation: backgroundScroll 30s linear infinite;
  color: #e0e0f0;
  font-family: 'Cinzel', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}



.container {
  padding: 2rem;
  max-width: 800px;
  animation: fadeIn 3s ease-in;
  border: 1px solid #222;
  background: rgba(20, 20, 30, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(100, 100, 255, 0.2);
}

/* Header / Name *
h1 {
  font-size: 3rem;
  color: #bb86fc;
  text-shadow: 0 0 10px #a855f7;
  margin-bottom: 1.5rem;
}

/* Invocation Text *
.invocation {
  font-style: italic;
  font-size: 1.2rem;
  color: #dcd6f7;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Navigation Links *
nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  color: #ffffff;
  background-color: #1f1b2e;
  border: 1px solid #5a189a;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  font-weight: bold;
}

nav a:hover {
  background-color: #5a189a;
  color: #fff0f9;
  box-shadow: 0 0 10px #c084fc;
}

/* Fade-in animation *
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional custom font (Cinzel) *
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/*.sigil {
  display: inline-block;
  animation: sigilPulse 4s ease-in-out infinite;
  text-shadow:
    0 0 5px #a78bfa,
    0 0 10px #c084fc,
    0 0 20px #d8b4fe;
}

@keyframes sigilPulse {
  0%, 100% {
    text-shadow:
      0 0 5px #a78bfa,
      0 0 10px #c084fc,
      0 0 20px #d8b4fe;
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 10px #c084fc,
      0 0 20px #d8b4fe,
      0 0 40px #e9d5ff;
    transform: scale(1.05);
  }
}
*/
/*.sigil {
  display: inline-block;
  animation: sigilShift 6s ease-in-out infinite;
  text-shadow:
    0 0 5px #a78bfa,
    0 0 10px #c084fc,
    0 0 20px #d8b4fe;
}

@keyframes sigilShift {
  0% {
    text-shadow:
      0 0 6px #a78bfa,
      0 0 12px #c084fc,
      0 0 24px #d8b4fe;
    color: #a78bfa;
  }
  33% {
    text-shadow:
      0 0 6px #f0f0ff,
      0 0 12px #ffffff,
      0 0 24px #e0e0ff;
    color: #ffffff;
  }
  66% {
    text-shadow:
      0 0 6px #60a5fa,
      0 0 12px #3b82f6,
      0 0 24px #2563eb;
    color: #93c5fd;
  }
  100% {
    text-shadow:
      0 0 6px #a78bfa,
      0 0 12px #c084fc,
      0 0 24px #d8b4fe;
    color: #a78bfa;
  }
}*
.sigil {
  display: inline-block;
  animation: sigilShift 6s ease-in-out infinite;
  text-shadow:
    0 0 5px #a78bfa,
    0 0 10px #c084fc,
    0 0 20px #d8b4fe;
}

@keyframes sigilShift {
  0% {
    text-shadow:
      0 0 6px #a78bfa,
      0 0 12px #c084fc,
      0 0 24px #d8b4fe;
    color: #a78bfa;
  }
  33% {
    text-shadow:
      0 0 6px #f0f0ff,
      0 0 12px #ffffff,
      0 0 24px #e0e0ff;
    color: #ffffff;
  }
  66% {
    text-shadow:
      0 0 6px #4ade80,
      0 0 12px #22c55e,
      0 0 24px #16a34a;
    color: #6ee7b7;
  }
  100% {
    text-shadow:
      0 0 6px #a78bfa,
      0 0 12px #c084fc,
      0 0 24px #d8b4fe;
    color: #a78bfa;
  }
}
.web-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
}

.web-overlay svg {
  width: 100%;
  height: 100%;
}
.web-overlay {
  animation: slowSpin 240s linear infinite;
  transform-origin: center center;
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*@keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 300px 300px;
  }
}
*
.fractal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://raw.githubusercontent.com/robgmerrill/fractal-bg/main/fractal.png'); /* Replace with your own if needed *
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
  animation: pulseFractal 60s ease-in-out infinite;
}

@keyframes pulseFractal {
  0%, 100% {
    opacity: 0.025;
  }
  50% {
    opacity: 0.05;
  }
}
*/
/* Reset and core layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('fractal.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.15;
  z-index: -3;
  pointer-events: none;
  animation: fractalSpin 240s linear infinite;
  filter: contrast(110%) brightness(105%) saturate(130%);
}

body {
  background-color: #0a0a0f;
  color: #e0e0f0;
  font-family: 'Cinzel', serif;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body.home {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Glowing sigils */
.sigil {
  display: inline-block;
  animation: sigilPulse 12s ease-in-out infinite;
  text-shadow:
    0 0 5px #a78bfa,
    0 0 10px #c084fc,
    0 0 20px #d8b4fe;
    animation-delay: 9ms;
}

@keyframes sigilPulse {
  0%, 100% {
    text-shadow: 0 0 5px #a78bfa, 0 0 10px #c084fc, 0 0 20px #d8b4fe;
    color: #a78bfa;
  }
  50% {
    text-shadow: 0 0 10px #d8b4fe, 0 0 20px #c084fc, 0 0 30px #a78bfa;
    color: #d8b4fe;
  }
}


/*@keyframes sigilShift {
  0% {
    text-shadow: 0 0 6px #a78bfa, 0 0 12px #c084fc, 0 0 24px #d8b4fe;
    color: #a78bfa;
  }
  33% {
    text-shadow: 0 0 6px #f0f0ff, 0 0 12px #ffffff, 0 0 24px #e0e0ff;
    color: #ffffff;
  }
  66% {
    text-shadow: 0 0 6px #4ade80, 0 0 12px #22c55e, 0 0 24px #16a34a;
    color: #6ee7b7;
  }
  100% {
    text-shadow: 0 0 6px #a78bfa, 0 0 12px #c084fc, 0 0 24px #d8b4fe;
    color: #a78bfa;
  }
}

/* Content container */
.container {
  padding: 2rem;
  max-width: 800px;
  margin: 5rem auto;
  background: rgba(20, 20, 30, 0.85);
  border-radius: 12px;
  z-index: 1;
  position: relative;
  box-shadow: 0 0 30px rgba(100, 100, 255, 0.2);
  animation: fadeIn 3s ease-in;
  text-align: center;
}


/* Headers and text */
h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.invocation {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Navigation */
nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  color: #ffffff;
  background-color: #1f1b2e;
  border: 1px solid #5a189a;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  font-weight: bold;
}

nav a:hover {
  background-color: #5a189a;
  color: #fff0f9;
  box-shadow: 0 0 10px #c084fc;
}

/* Rainbow shimmer text */
.rainbow-text {
  background: linear-gradient(
    90deg,
    #7dd3fc,
    #34d399,
    #facc15,
    #f472b6,
    #c084fc,
    #7dd3fc,
    #34d399
  );
  background-size: 500%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowShift 18s linear infinite;
  animation-delay: 3ms;
}



@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Background fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Web Overlay *
.web-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
  animation: slowSpin 240s linear infinite;
  transform-origin: center center;
}

.web-overlay svg {
  width: 100%;
  height: 100%;
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
*/

/* Fractal Overlay *
.fractal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1505682634904-d7c6c43c1b3d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.12; /* Try 0.08 - 0.12 to start 
  z-index: 0;
  pointer-events: none;
  animation: pulseFractal 60s ease-in-out infinite;
}*/

/*
@keyframes pulseFractal {
  0%, 100% {
    opacity: 0.025;
  }
  50% {
    opacity: 0.05;
  }
}
*/
@keyframes fractalSpin {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}


.web-overlay svg g {
  stroke: #4ade80; /* initial emerald */
  animation: rainbowWeb 20s ease-in-out infinite;
}
@keyframes rainbowWeb {
  0% {
    stroke: #4ade80; /* emerald */
  }
  25% {
    stroke: #34d399; /* green/teal */
  }
  50% {
    stroke: #a78bfa; /* violet */
  }
  75% {
    stroke: #f472b6; /* rose/pink */
  }
  100% {
    stroke: #4ade80;
  }
}

.aurora-web {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('aurora-web.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.07;
  z-index: -2;
  pointer-events: none;
  animation: auroraPulse 60s ease-in-out infinite;
  filter: contrast(130%) brightness(120%) saturate(150%);
}

@keyframes auroraPulse {
  0%, 100% {
    opacity: 0.04;
    filter: brightness(100%) saturate(130%);
  }
  50% {
    opacity: 0.08;
    filter: brightness(120%) saturate(160%);
  }
}


/*.aurora-web {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('aurora-web.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  animation: auroraPulse 60s ease-in-out infinite;
  filter: contrast(120%) brightness(110%) saturate(140%);
  animation-delay: 6ms;
}

@keyframes auroraPulse {
  0%, 100% {
    opacity: 0.05;
    filter: contrast(120%) brightness(110%) saturate(140%) hue-rotate(0deg);
  }
  50% {
    opacity: 0.08;
    filter: contrast(120%) brightness(110%) saturate(140%) hue-rotate(45deg);
  }
}


/*
@keyframes auroraPulse {
  0% {
    filter: contrast(120%) brightness(110%) saturate(140%) hue-rotate(0deg);
  }
  50% {
    filter: contrast(120%) brightness(110%) saturate(140%) hue-rotate(45deg);
  }
  100% {
    filter: contrast(120%) brightness(110%) saturate(140%) hue-rotate(0deg);
  }
}
*/
section {
  margin-bottom: 2rem;
}

blockquote {
  font-style: italic;
  color: #e0e0f0;
  margin: 2rem auto;
  padding: 1rem;
  border: 1px solid rgba(133, 77, 255, 0.15);
  border-radius: 8px;
  background: rgba(30, 10, 50, 0.1);
  text-shadow: 0 0 6px #a78bfa;
  max-width: 700px;
}



body::-webkit-scrollbar {
  width: 6px;
}
body::-webkit-scrollbar-thumb {
  background: #5a189a;
  border-radius: 3px;
}


.nyct-intro {
  margin: 3rem auto;
  max-width: 750px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #dcd6f7;
  text-shadow: 0 0 6px #6b21a8;
}

.nyct-intro h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px #9333ea;
}

/* Make sure body scrolls naturally */
body.home {
  display: block;        /* not flex/grid centering */
  min-height: 100%;      /* allow vertical growth */
  overflow-y: auto;      /* enable scrolling */
  text-align: center;    /* keeps your headers centered */
}

/* Container content stays centered but flows vertically */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

/* Background overlays shouldn't block scrolling */
.aurora-web,
.fractal-overlay {
  position: fixed; /* stays in background */
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;     /* keep behind content */
  pointer-events: none;
}