/* Sacred Geometry & Higher Mathematics Design System
   Guardian Palette: Teal #00ffc8, Gold #c9a641, Purple #8b5cf6
   
   Mathematical Constants:
   - √3 ≈ 1.732 (Vesica Piscis ratio)
   - φ (Golden Ratio) ≈ 1.618
   - 153/256 ≈ 0.598 (Sacred fish ratio)
   - π ≈ 3.14159
*/

/* Higher Mathematics Design - Refined Patterns */
.vesica-piscis-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="40" cy="50" r="30" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><circle cx="60" cy="50" r="30" stroke="%23c9a641" stroke-width="0.5" fill="none"/><text x="50" y="55" font-size="6" fill="%238b5cf6" text-anchor="middle" font-family="serif">√3</text></svg>') no-repeat center center;
    background-size: contain;
}

.intersection-153-265-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><line x1="50" y1="15" x2="50" y2="85" stroke="%23c9a641" stroke-width="0.5"/><line x1="15" y1="65" x2="85" y2="65" stroke="%238b5cf6" stroke-width="0.5"/><text x="70" y="80" font-size="6" fill="%23c9a641" text-anchor="middle">153/265</text></svg>') no-repeat center center;
    background-size: contain;
}

.flower-of-life-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><circle id="c" cx="50" cy="50" r="10" stroke="%234ade80" stroke-width="0.3" fill="none"/></defs><use href="%23c"/><g transform="rotate(0 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(60 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(120 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(180 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(240 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(300 50 50)"><use href="%23c" x="10"/></g><circle cx="50" cy="50" r="1" fill="%23c9a641"/></svg>') no-repeat center center;
    background-size: contain;
}

.sacred-animate-refined {
    animation: higher-math-pulse 8s ease-in-out infinite;
}

@keyframes higher-math-pulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.2)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(201, 166, 65, 0.4)); transform: scale(1.05); }
}

/* Higher Mathematics Design - Refined Patterns */
.vesica-piscis-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="40" cy="50" r="30" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><circle cx="60" cy="50" r="30" stroke="%23c9a641" stroke-width="0.5" fill="none"/><text x="50" y="55" font-size="6" fill="%238b5cf6" text-anchor="middle" font-family="serif">√3</text></svg>') no-repeat center center;
    background-size: contain;
}

.intersection-153-265-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><line x1="50" y1="15" x2="50" y2="85" stroke="%23c9a641" stroke-width="0.5"/><line x1="15" y1="65" x2="85" y2="65" stroke="%238b5cf6" stroke-width="0.5"/><text x="70" y="80" font-size="6" fill="%23c9a641" text-anchor="middle">153/265</text></svg>') no-repeat center center;
    background-size: contain;
}

.flower-of-life-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><circle id="c" cx="50" cy="50" r="10" stroke="%234ade80" stroke-width="0.3" fill="none"/></defs><use href="%23c"/><g transform="rotate(0 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(60 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(120 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(180 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(240 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(300 50 50)"><use href="%23c" x="10"/></g><circle cx="50" cy="50" r="1" fill="%23c9a641"/></svg>') no-repeat center center;
    background-size: contain;
}

.sacred-animate-refined {
    animation: higher-math-pulse 8s ease-in-out infinite;
}

@keyframes higher-math-pulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.2)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(201, 166, 65, 0.4)); transform: scale(1.05); }
}

/* Higher Mathematics Design - Refined Patterns */
.vesica-piscis-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="40" cy="50" r="30" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><circle cx="60" cy="50" r="30" stroke="%23c9a641" stroke-width="0.5" fill="none"/><text x="50" y="55" font-size="6" fill="%238b5cf6" text-anchor="middle" font-family="serif">√3</text></svg>') no-repeat center center;
    background-size: contain;
}

.intersection-153-265-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><line x1="50" y1="15" x2="50" y2="85" stroke="%23c9a641" stroke-width="0.5"/><line x1="15" y1="65" x2="85" y2="65" stroke="%238b5cf6" stroke-width="0.5"/><text x="70" y="80" font-size="6" fill="%23c9a641" text-anchor="middle">153/265</text></svg>') no-repeat center center;
    background-size: contain;
}

.flower-of-life-svg {
    width: 250px;
    height: 250px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><circle id="c" cx="50" cy="50" r="10" stroke="%234ade80" stroke-width="0.3" fill="none"/></defs><use href="%23c"/><g transform="rotate(0 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(60 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(120 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(180 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(240 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(300 50 50)"><use href="%23c" x="10"/></g><circle cx="50" cy="50" r="1" fill="%23c9a641"/></svg>') no-repeat center center;
    background-size: contain;
}

.sacred-animate-refined {
    animation: higher-math-pulse 8s ease-in-out infinite;
}

@keyframes higher-math-pulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.2)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(201, 166, 65, 0.4)); transform: scale(1.05); }
}

:root {
  --sqrt3: 1.732;
  --phi: 1.618;
  --sacred-ratio: 0.598;
  --guardian-teal: #00ffc8;
  --guardian-gold: #c9a641;
  --guardian-purple: #8b5cf6;
  --higher-math-green: #4ade80;
  --sacred-glow: 0 0 30px rgba(0, 255, 200, 0.3);
}

/* Higher Mathematics Design - New Styles */
.sacred-geometry-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    transition: opacity 0.5s ease;
}

.vesica-piscis {
    width: 300px;
    height: 300px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="40" cy="50" r="30" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><circle cx="60" cy="50" r="30" stroke="%23c9a641" stroke-width="0.5" fill="none"/><text x="50" y="55" font-size="6" fill="%238b5cf6" text-anchor="middle" font-family="serif">√3</text></svg>') no-repeat center center;
    background-size: contain;
}

.intersection-153-265 {
    width: 300px;
    height: 300px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" stroke="%2300ffc8" stroke-width="0.5" fill="none"/><line x1="50" y1="10" x2="50" y2="90" stroke="%23c9a641" stroke-width="0.5"/><line x1="10" y1="65" x2="90" y2="65" stroke="%238b5cf6" stroke-width="0.5"/><text x="70" y="80" font-size="6" fill="%23c9a641" text-anchor="middle">153/265</text></svg>') no-repeat center center;
    background-size: contain;
}

.flower-of-life {
    width: 350px;
    height: 350px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><circle id="c" cx="50" cy="50" r="10" stroke="%234ade80" stroke-width="0.2" fill="none"/></defs><use href="%23c"/><g transform="rotate(0 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(60 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(120 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(180 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(240 50 50)"><use href="%23c" x="10"/></g><g transform="rotate(300 50 50)"><use href="%23c" x="10"/></g><circle cx="50" cy="50" r="1" fill="%23c9a641"/></svg>') no-repeat center center;
    background-size: contain;
}

@keyframes sacred-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(0, 255, 200, 0.2)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(201, 166, 65, 0.4)); transform: scale(1.05); }
}

.sacred-animate {
    animation: sacred-pulse-glow 10s ease-in-out infinite;
}

/* Vesica Piscis - √3 Sacred Geometry */
.vesica-piscis {
  position: relative;
  width: 200px;
  height: calc(200px * 1.732);
  margin: 2rem auto;
}

.vesica-piscis::before,
.vesica-piscis::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid var(--guardian-teal);
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--sacred-glow);
}

.vesica-piscis::before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.vesica-piscis::after {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.vesica-piscis-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: calc(60px * 1.732);
  background: linear-gradient(135deg, 
    rgba(0, 255, 200, 0.1) 0%,
    rgba(201, 166, 65, 0.1) 50%,
    rgba(139, 92, 246, 0.1) 100%
  );
  clip-path: ellipse(50% 86.6% at 50% 50%);
  animation: vesica-pulse 4s ease-in-out infinite;
}

@keyframes vesica-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* Golden Spiral - Fibonacci Sequence */
.golden-spiral {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 2rem auto;
}

.golden-spiral-path {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse 89% 89% at 0% 100%, transparent 45%, var(--guardian-gold) 45.5%, var(--guardian-gold) 46%, transparent 46.5%),
    radial-gradient(ellipse 55% 55% at 100% 100%, transparent 45%, var(--guardian-teal) 45.5%, var(--guardian-teal) 46%, transparent 46.5%),
    radial-gradient(ellipse 34% 34% at 100% 0%, transparent 45%, var(--guardian-purple) 45.5%, var(--guardian-purple) 46%, transparent 46.5%),
    radial-gradient(ellipse 21% 21% at 0% 0%, transparent 45%, var(--guardian-gold) 45.5%, var(--guardian-gold) 46%, transparent 46.5%),
    radial-gradient(ellipse 13% 13% at 0% 100%, transparent 45%, var(--guardian-teal) 45.5%, var(--guardian-teal) 46%, transparent 46.5%);
  animation: spiral-rotate 20s linear infinite;
}

@keyframes spiral-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 153:256 Sacred Fish Grid */
.sacred-grid-153 {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  width: 256px;
  height: 256px;
  margin: 2rem auto;
  position: relative;
  border: 1px solid rgba(0, 255, 200, 0.3);
}

.sacred-grid-153::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 59.77%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(0, 255, 200, 0.05) 0%,
    rgba(201, 166, 65, 0.08) 100%
  );
  border-right: 2px solid var(--guardian-gold);
}

.sacred-grid-153-marker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 59.77%;
  border-top: 2px solid var(--guardian-purple);
  background: linear-gradient(0deg,
    rgba(139, 92, 246, 0.05) 0%,
    transparent 100%
  );
}

/* Flower of Life Pattern */
.flower-of-life {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 2rem auto;
}

.flower-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1.5px solid var(--guardian-teal);
  border-radius: 50%;
  background: transparent;
  opacity: 0.8;
}

.flower-circle:nth-child(1) { top: 80px; left: 80px; }
.flower-circle:nth-child(2) { top: 40px; left: 60px; }
.flower-circle:nth-child(3) { top: 40px; left: 100px; }
.flower-circle:nth-child(4) { top: 80px; left: 40px; }
.flower-circle:nth-child(5) { top: 80px; left: 120px; }
.flower-circle:nth-child(6) { top: 120px; left: 60px; }
.flower-circle:nth-child(7) { top: 120px; left: 100px; }

.flower-of-life::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: var(--guardian-gold);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--guardian-gold);
  animation: flower-glow 3s ease-in-out infinite;
}

@keyframes flower-glow {
  0%, 100% { box-shadow: 0 0 20px var(--guardian-gold); }
  50% { box-shadow: 0 0 40px var(--guardian-gold), 0 0 60px var(--guardian-teal); }
}

/* Metatron's Cube */
.metatrons-cube {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
}

.metatrons-cube svg {
  width: 100%;
  height: 100%;
}

.metatrons-line {
  stroke: var(--guardian-teal);
  stroke-width: 1;
  fill: none;
  opacity: 0.7;
}

.metatrons-circle {
  stroke: var(--guardian-gold);
  stroke-width: 1.5;
  fill: none;
}

/* Sacred Geometry Background Pattern */
.sacred-bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.03;
  background-image: 
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      var(--guardian-teal) 0deg 60deg,
      transparent 60deg 120deg
    );
  background-size: 100px 100px;
}

/* √3 Triangle - Equilateral */
.sqrt3-triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: calc(100px * 1.732) solid transparent;
  margin: 2rem auto;
}

.sqrt3-triangle::before {
  content: '';
  position: absolute;
  top: calc(100px * 0.577);
  left: -100px;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: calc(100px * 1.732) solid var(--guardian-teal);
  opacity: 0.2;
}

.sqrt3-triangle::after {
  content: '√3';
  position: absolute;
  top: calc(100px * 0.866);
  left: -15px;
  font-size: 1.5rem;
  color: var(--guardian-gold);
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

/* Phi Spiral Decorative Element */
.phi-decoration {
  position: relative;
  width: 150px;
  height: 93px;
  margin: 1rem;
}

.phi-decoration::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--guardian-gold);
  border-radius: 0;
}

.phi-decoration::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 61.8%;
  height: 100%;
  border-left: 2px solid var(--guardian-teal);
  background: linear-gradient(90deg, rgba(0, 255, 200, 0.05), transparent);
}

/* Sacred Section Divider */
.sacred-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
  color: var(--guardian-gold);
}

.sacred-divider::before,
.sacred-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent,
    var(--guardian-teal) 20%,
    var(--guardian-gold) 50%,
    var(--guardian-purple) 80%,
    transparent
  );
}

.sacred-divider-symbol {
  width: 40px;
  height: 40px;
  border: 2px solid var(--guardian-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--guardian-teal);
  animation: sacred-spin 10s linear infinite;
}

@keyframes sacred-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 153 Fish Pattern - Ichthys */
.ichthys-153 {
  position: relative;
  width: 120px;
  height: 60px;
  margin: 1rem auto;
}

.ichthys-153::before,
.ichthys-153::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid var(--guardian-teal);
  border-radius: 50%;
}

.ichthys-153::before {
  top: -20px;
  left: 10px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: rotate(15deg);
}

.ichthys-153::after {
  top: -20px;
  left: 10px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: rotate(-15deg);
}

/* Hexagram - Star of David / Merkaba */
.merkaba-star {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 2rem auto;
}

.merkaba-star::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid var(--guardian-teal);
  opacity: 0.6;
}

.merkaba-star::after {
  content: '';
  position: absolute;
  top: 28.87px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 86.6px solid var(--guardian-purple);
  opacity: 0.6;
}

/* Animated Sacred Geometry Loader */
.sacred-loader {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 2rem auto;
}

.sacred-loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--guardian-teal);
  border-radius: 50%;
  animation: sacred-rotate 1.5s linear infinite;
}

.sacred-loader-ring:nth-child(2) {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-top-color: var(--guardian-gold);
  animation-duration: 2s;
  animation-direction: reverse;
}

.sacred-loader-ring:nth-child(3) {
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  border-top-color: var(--guardian-purple);
  animation-duration: 2.5s;
}

@keyframes sacred-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Card with Sacred Geometry Accent */
.sacred-card {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 255, 200, 0.2);
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
}

.sacred-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 255, 200, 0.1) 60deg,
    transparent 120deg,
    rgba(201, 166, 65, 0.1) 180deg,
    transparent 240deg,
    rgba(139, 92, 246, 0.1) 300deg,
    transparent 360deg
  );
  animation: sacred-card-rotate 20s linear infinite;
  pointer-events: none;
}

@keyframes sacred-card-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Seed of Life Pattern */
.seed-of-life {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 2rem auto;
}

.seed-circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--guardian-gold);
  border-radius: 50%;
  background: transparent;
}

.seed-circle:nth-child(1) { top: 40px; left: 40px; }
.seed-circle:nth-child(2) { top: 20px; left: 40px; }
.seed-circle:nth-child(3) { top: 60px; left: 40px; }
.seed-circle:nth-child(4) { top: 30px; left: 22.68px; }
.seed-circle:nth-child(5) { top: 30px; left: 57.32px; }
.seed-circle:nth-child(6) { top: 50px; left: 22.68px; }
.seed-circle:nth-child(7) { top: 50px; left: 57.32px; }

/* Pi Symbol Decoration */
.pi-decoration {
  font-family: 'Times New Roman', serif;
  font-size: 2rem;
  color: var(--guardian-gold);
  text-shadow: 0 0 10px var(--guardian-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pi-decoration::before {
  content: 'π';
}

.pi-decoration::after {
  content: '≈ 3.14159...';
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Torus Energy Field */
.torus-field {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  perspective: 1000px;
}

.torus-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--guardian-teal);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.torus-ring:nth-child(1) { transform: rotateX(0deg) rotateY(0deg); }
.torus-ring:nth-child(2) { transform: rotateX(30deg) rotateY(0deg); opacity: 0.8; }
.torus-ring:nth-child(3) { transform: rotateX(60deg) rotateY(0deg); opacity: 0.6; }
.torus-ring:nth-child(4) { transform: rotateX(90deg) rotateY(0deg); opacity: 0.4; }
.torus-ring:nth-child(5) { transform: rotateX(120deg) rotateY(0deg); opacity: 0.3; }
.torus-ring:nth-child(6) { transform: rotateX(150deg) rotateY(0deg); opacity: 0.2; }

/* Utility Classes for Sacred Elements */
.sacred-glow {
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.3),
              0 0 40px rgba(201, 166, 65, 0.2),
              0 0 60px rgba(139, 92, 246, 0.1);
}

.sacred-border {
  border: 2px solid transparent;
  background: linear-gradient(#0d1117, #0d1117) padding-box,
              linear-gradient(135deg, var(--guardian-teal), var(--guardian-gold), var(--guardian-purple)) border-box;
}

.sacred-text-gradient {
  background: linear-gradient(135deg, var(--guardian-teal), var(--guardian-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animation for number 153 */
.number-153 {
  font-family: 'Times New Roman', serif;
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(135deg, var(--guardian-gold), var(--guardian-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  position: relative;
}

.number-153::after {
  content: 'The number of fish';
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--guardian-purple);
  white-space: nowrap;
  opacity: 0.8;
}

/* ========== NEON WHIP ANIMATIONS - Outlaw Mascot Theme ========== */

/* Neon Whip Trail Effect */
.neon-whip {
  position: relative;
  overflow: visible;
}

.neon-whip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--guardian-teal),
    var(--guardian-gold),
    var(--guardian-purple),
    transparent
  );
  box-shadow: 
    0 0 10px var(--guardian-teal),
    0 0 20px var(--guardian-gold),
    0 0 30px var(--guardian-purple);
  border-radius: 50px;
  animation: whip-crack 2s ease-out infinite;
  transform-origin: left center;
}

@keyframes whip-crack {
  0% {
    width: 0;
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
  20% {
    width: 100%;
    opacity: 1;
    transform: translateY(-50%) scaleY(1.5);
  }
  40% {
    width: 100%;
    opacity: 0.8;
    transform: translateY(-50%) scaleY(0.8);
  }
  100% {
    width: 100%;
    opacity: 0;
    transform: translateY(-50%) scaleY(0.3);
  }
}

/* Circular Neon Whip - Lasso Effect */
.neon-lasso {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
}

.neon-lasso::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#0d1117, #0d1117) padding-box,
              conic-gradient(from 0deg, 
                var(--guardian-teal) 0deg,
                var(--guardian-gold) 120deg,
                var(--guardian-purple) 240deg,
                var(--guardian-teal) 360deg
              ) border-box;
  animation: lasso-spin 3s linear infinite;
  filter: drop-shadow(0 0 15px var(--guardian-teal));
}

.neon-lasso::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border: 2px solid rgba(0, 255, 200, 0.3);
  border-radius: 50%;
  animation: lasso-spin 2s linear infinite reverse;
}

@keyframes lasso-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Energy Whip Pulse */
.whip-pulse {
  position: relative;
}

.whip-pulse::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--guardian-teal);
  border-radius: inherit;
  animation: whip-pulse-glow 1.5s ease-in-out infinite;
}

@keyframes whip-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--guardian-teal),
                inset 0 0 5px rgba(0, 255, 200, 0.1);
    border-color: var(--guardian-teal);
  }
  33% {
    box-shadow: 0 0 15px var(--guardian-gold),
                inset 0 0 10px rgba(201, 166, 65, 0.2);
    border-color: var(--guardian-gold);
  }
  66% {
    box-shadow: 0 0 20px var(--guardian-purple),
                inset 0 0 15px rgba(139, 92, 246, 0.2);
    border-color: var(--guardian-purple);
  }
}

/* Neon Lightning Strike */
.neon-lightning {
  position: relative;
  width: 100px;
  height: 150px;
  margin: 2rem auto;
}

.neon-lightning svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px var(--guardian-gold));
}

.neon-lightning-bolt {
  fill: none;
  stroke: var(--guardian-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: lightning-flash 2s ease-in-out infinite;
}

@keyframes lightning-flash {
  0%, 90%, 100% { 
    opacity: 0.3;
    filter: drop-shadow(0 0 5px var(--guardian-gold));
  }
  92%, 96% { 
    opacity: 1;
    filter: drop-shadow(0 0 20px var(--guardian-gold)) drop-shadow(0 0 40px var(--guardian-teal));
  }
  94% {
    opacity: 0.5;
  }
}

/* Whip Trail Path Animation */
.whip-trail {
  position: relative;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--guardian-teal) 10%,
    var(--guardian-gold) 50%,
    var(--guardian-purple) 90%,
    transparent 100%
  );
  border-radius: 2px;
  animation: whip-wave 1.5s ease-in-out infinite;
  box-shadow: 
    0 0 10px var(--guardian-teal),
    0 0 20px var(--guardian-gold);
}

@keyframes whip-wave {
  0%, 100% {
    transform: scaleX(0.8) translateX(-10%);
    opacity: 0.6;
  }
  50% {
    transform: scaleX(1) translateX(10%);
    opacity: 1;
  }
}

/* Sacred Geometry + Whip Combo: Energy Vortex */
.energy-vortex {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 2rem auto;
}

.vortex-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-top-color: var(--guardian-teal);
  border-radius: 50%;
  animation: vortex-spin 3s linear infinite;
}

.vortex-ring:nth-child(2) {
  width: 75%;
  height: 75%;
  top: 12.5%;
  left: 12.5%;
  border-top-color: var(--guardian-gold);
  animation-duration: 2.5s;
  animation-direction: reverse;
}

.vortex-ring:nth-child(3) {
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  border-top-color: var(--guardian-purple);
  animation-duration: 2s;
}

.vortex-ring:nth-child(4) {
  width: 25%;
  height: 25%;
  top: 37.5%;
  left: 37.5%;
  border-top-color: var(--guardian-teal);
  animation-duration: 1.5s;
  animation-direction: reverse;
}

.energy-vortex::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--guardian-gold);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--guardian-gold), 0 0 40px var(--guardian-teal);
  animation: vortex-core-pulse 2s ease-in-out infinite;
}

@keyframes vortex-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes vortex-core-pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 20px var(--guardian-gold), 0 0 40px var(--guardian-teal);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 30px var(--guardian-gold), 0 0 60px var(--guardian-teal), 0 0 80px var(--guardian-purple);
  }
}

/* Outlaw Star Badge with Neon Effect */
.outlaw-star {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 2rem auto;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 30, 0.9));
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
  filter: drop-shadow(0 0 15px var(--guardian-gold));
  animation: star-glow 3s ease-in-out infinite;
}

.outlaw-star::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, 
    var(--guardian-gold) 0%,
    var(--guardian-teal) 50%,
    var(--guardian-purple) 100%
  );
  clip-path: inherit;
  animation: star-color-shift 4s ease-in-out infinite;
}

.outlaw-star::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: #0d1117;
  clip-path: inherit;
}

@keyframes star-glow {
  0%, 100% { filter: drop-shadow(0 0 15px var(--guardian-gold)); }
  33% { filter: drop-shadow(0 0 20px var(--guardian-teal)); }
  66% { filter: drop-shadow(0 0 25px var(--guardian-purple)); }
}

@keyframes star-color-shift {
  0%, 100% { 
    background: linear-gradient(135deg, var(--guardian-gold), var(--guardian-teal), var(--guardian-purple));
  }
  33% { 
    background: linear-gradient(135deg, var(--guardian-teal), var(--guardian-purple), var(--guardian-gold));
  }
  66% { 
    background: linear-gradient(135deg, var(--guardian-purple), var(--guardian-gold), var(--guardian-teal));
  }
}

/* Page Section Sacred Accent */
.sacred-section-accent {
  position: relative;
  padding-left: 1.5rem;
}

.sacred-section-accent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    var(--guardian-teal) 0%,
    var(--guardian-gold) 50%,
    var(--guardian-purple) 100%
  );
  border-radius: 2px;
  box-shadow: 0 0 10px var(--guardian-teal);
  animation: accent-pulse 3s ease-in-out infinite;
}

@keyframes accent-pulse {
  0%, 100% {
    box-shadow: 0 0 10px var(--guardian-teal);
    background: linear-gradient(180deg, var(--guardian-teal), var(--guardian-gold), var(--guardian-purple));
  }
  50% {
    box-shadow: 0 0 20px var(--guardian-gold);
    background: linear-gradient(180deg, var(--guardian-gold), var(--guardian-purple), var(--guardian-teal));
  }
}

/* Sacred Corner Decorations */
.sacred-corners {
  position: relative;
}

.sacred-corners::before,
.sacred-corners::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--guardian-teal);
}

.sacred-corners::before {
  top: -5px;
  left: -5px;
  border-right: none;
  border-bottom: none;
  box-shadow: -3px -3px 10px var(--guardian-teal);
}

.sacred-corners::after {
  bottom: -5px;
  right: -5px;
  border-left: none;
  border-top: none;
  box-shadow: 3px 3px 10px var(--guardian-purple);
}

/* Sacred Background Overlay for Sections */
.sacred-bg-overlay {
  position: relative;
}

.sacred-bg-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(0, 255, 200, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(201, 166, 65, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.sacred-bg-overlay > * {
  position: relative;
  z-index: 1;
}

/* Mini Sacred Geometry Icons */
.sacred-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 255, 200, 0.1);
  border: 1px solid var(--guardian-teal);
  box-shadow: 0 0 10px rgba(0, 255, 200, 0.2);
}

.sacred-icon-gold {
  background: rgba(201, 166, 65, 0.1);
  border-color: var(--guardian-gold);
  box-shadow: 0 0 10px rgba(201, 166, 65, 0.2);
}

.sacred-icon-purple {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--guardian-purple);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}