/* ===========================
   Mandala Background (Golden Theme, Brighter)
=========================== */

/* General container for spans */
span {
  display: block;
  height: 22em; /* slightly bigger */
  width: 22em;
  position: absolute;
  top: calc(50% - 11em);
  left: calc(50% - 11em);
  z-index: 0;
  opacity: 0.4; /* was 0.25 → more visible */
  pointer-events: none;
}

/* Spin animations */
.large-circles { animation: spin 50s linear infinite; }
.small-shapes { animation: spin 80s linear infinite reverse; }
.content-squircle { animation: spin 120s linear infinite; }

@keyframes spin {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

/* Base shapes */
.circle, .squircle {
  border: 0.15em solid rgba(255, 215, 0, 0.6); /* was 0.4 → stronger gold stroke */
  height: 14em; /* slightly bigger */
  width: 14em;
  position: absolute;
}

/* Circles */
.circle {
  border-radius: 50%;
  left: calc(50% - 7em);
  top: calc(50% - 14em);
  transform-origin: 50% 14em;
  box-shadow: 0 0 15px rgba(255, 200, 0, 0.5); /* more glow */
}

/* Golden shade variations (increased opacity) */
.one   { background: rgba(255, 193, 7, 0.15); transform: rotateZ(225deg); }
.two   { background: rgba(255, 160, 0, 0.15); transform: rotateZ(180deg); }
.three { background: rgba(255, 111, 0, 0.15); transform: rotateZ(135deg); }
.four  { background: rgba(255, 87, 34, 0.15);  transform: rotateZ(90deg); }
.five  { background: rgba(244, 67, 54, 0.15);  transform: rotateZ(45deg); }
.six   { background: rgba(233, 30, 99, 0.15);  transform: rotateZ(0); }
.seven { background: rgba(198, 40, 40, 0.15);  transform: rotateZ(-45deg); }
.eight { background: rgba(183, 28, 28, 0.15);  transform: rotateZ(-90deg); }

/* Small shapes */
.small {
  width: 5em;
  height: 5em;
  left: calc(50% - 2.5em);
  top: calc(50% - 16em);
  transform-origin: 50% 16em;
  box-shadow: 0 0 10px rgba(255, 200, 0, 0.4);
}

/* Small squircle with glow */
.small.squircle::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 25%;
  background: rgba(255, 193, 7, 0.35); /* was 0.25 → brighter */
  transform: rotateZ(-45deg);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.4);
}

/* Large squircle center */
.large.squircle {
  background: rgba(255, 215, 0, 0.12); /* was 0.05 → brighter */
  border: 0.2em dashed rgba(255, 193, 7, 0.5); /* stronger border */
  height: 17em;
  width: 17em;
  left: calc(50% - 8.5em);
  top: calc(50% - 8.5em);
  border-radius: 2.5em;
  box-shadow: 0 0 20px rgba(255, 200, 0, 0.4);
}