/* Advanced Sacred Geometry Styles */

/* Chakra Section Backgrounds */
.chakra-root-bg { background: linear-gradient(135deg, #1a1a2e, #dc143c20); }
.chakra-sacral-bg { background: linear-gradient(135deg, #1a1a2e, #ff8c0020); }
.chakra-solar-bg { background: linear-gradient(135deg, #1a1a2e, #ffd70020); }
.chakra-heart-bg { background: linear-gradient(135deg, #1a1a2e, #32cd3220); }
.chakra-throat-bg { background: linear-gradient(135deg, #1a1a2e, #00bfff20); }
.chakra-third-eye-bg { background: linear-gradient(135deg, #1a1a2e, #4b008220); }
.chakra-crown-bg { background: linear-gradient(135deg, #1a1a2e, #9400d320); }

/* Mandala Background Patterns */
.mandala-1 {
    background-image: radial-gradient(circle at 50% 50%, 
        transparent 0%, transparent 10%,
        rgba(102,126,234,0.05) 10%, rgba(102,126,234,0.05) 20%,
        transparent 20%, transparent 30%,
        rgba(118,75,162,0.05) 30%, rgba(118,75,162,0.05) 40%,
        transparent 40%, transparent 50%,
        rgba(255,215,0,0.05) 50%, rgba(255,215,0,0.05) 60%,
        transparent 60%);
    background-size: 100% 100%;
}

.mandala-2 {
    background-image: 
        conic-gradient(from 0deg at 50% 50%, 
            transparent 0deg, rgba(102,126,234,0.03) 30deg, 
            transparent 60deg, rgba(118,75,162,0.03) 90deg,
            transparent 120deg, rgba(255,215,0,0.03) 150deg,
            transparent 180deg, rgba(102,126,234,0.03) 210deg,
            transparent 240deg, rgba(118,75,162,0.03) 270deg,
            transparent 300deg, rgba(255,215,0,0.03) 330deg,
            transparent 360deg);
    background-size: 200px 200px;
}

/* Merkaba Star of David */
.merkaba-container {
    position: relative;
}

.merkaba-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 90,90 10,90' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.2'/%3E%3Cpolygon points='50,90 90,10 10,10' fill='none' stroke='%23764ba2' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

/* Torus Field */
.torus-field {
    position: relative;
    overflow: hidden;
}

.torus-field::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(102,126,234,0.1) 0%, 
        rgba(118,75,162,0.1) 30%,
        rgba(255,215,0,0.1) 50%,
        transparent 70%);
    border-radius: 50%;
    animation: torus-spin 10s linear infinite;
    z-index: -1;
}

@keyframes torus-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Vesica Piscis */
.vesica-piscis {
    position: relative;
}

.vesica-piscis::before,
.vesica-piscis::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.vesica-piscis::before {
    left: calc(50% - 75px);
}

.vesica-piscis::after {
    right: calc(50% - 75px);
}

/* Crystal Grid Overlay */
.crystal-overlay {
    position: relative;
}

.crystal-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(60deg, transparent 49.5%, rgba(255,215,0,0.1) 50%, transparent 50.5%),
        linear-gradient(-60deg, transparent 49.5%, rgba(255,215,0,0.1) 50%, transparent 50.5%);
    background-size: 40px 70px;
    pointer-events: none;
    z-index: 1;
}

/* Sacred Number Display */
.sacred-number {
    font-size: 3em;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #667eea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Times New Roman', serif;
}

/* Frequency Visualization Bars */
.frequency-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 80px;
    gap: 3px;
    margin: 20px 0;
}

.freq-bar {
    width: 4px;
    border-radius: 2px;
    transition: height 0.3s ease;
}

/* Lotus Petal Design */
.lotus-petal {
    position: relative;
}

.lotus-petal::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background: radial-gradient(ellipse at top, 
        rgba(255,215,0,0.3) 0%, 
        transparent 70%);
    border-radius: 50% 50% 0 0;
}

/* Hexagonal Grid */
.hex-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23667eea' stroke-width='0.3' opacity='0.1'%3E%3Cpath d='M14 0L28 8.5v17L14 34 0 25.5v-17L14 0z'/%3E%3Cpath d='M14 49L0 40.5v-17L14 15l14 8.5v17L14 49z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sacred Spiral Background */
.spiral-bg {
    position: relative;
}

.spiral-bg::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50 Q70 30 80 50 T90 70 T70 90 T30 70 T10 30 T50 10' fill='none' stroke='%23667eea' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* Animated Sacred Symbols */
.symbol-float {
    animation: float-up-down 3s ease-in-out infinite;
}

@keyframes float-up-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Chakra Gradient Borders */
.chakra-border {
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, 
                    #dc143c, #ff8c00, #ffd700, #32cd32, #00bfff, #4b0082, #9400d3) border-box;
}

/* Divine Proportion Spacing */
.phi-spacing {
    margin: 61.8px 0;
}

/* Icosahedron Pattern */
.icosahedron-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 87'%3E%3Cpolygon points='50,0 95,25 95,75 50,100 5,75 5,25' fill='none' stroke='%23667eea' stroke-width='0.2' opacity='0.05'/%3E%3Cpolygon points='50,0 50,87' fill='none' stroke='%23667eea' stroke-width='0.2' opacity='0.05'/%3E%3Cpolygon points='5,25 95,25' fill='none' stroke='%23667eea' stroke-width='0.2' opacity='0.05'/%3E%3Cpolygon points='5,75 95,75' fill='none' stroke='%23667eea' stroke-width='0.2' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 100px 87px;
}

/* Celestial Star Map */
.star-map {
    position: relative;
}

.star-map::before {
    content: '✦✧✦✧✦';
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 1.5em;
    color: rgba(255,215,0,0.3);
    letter-spacing: 20px;
    animation: twinkle-stars 2s ease-in-out infinite;
}

@keyframes twinkle-stars {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Egg of Life Pattern */
.egg-of-life {
    background-image: radial-gradient(circle at 33% 33%, rgba(102,126,234,0.03) 0%, transparent 25%),
                      radial-gradient(circle at 66% 33%, rgba(118,75,162,0.03) 0%, transparent 25%),
                      radial-gradient(circle at 50% 66%, rgba(255,215,0,0.03) 0%, transparent 25%);
}