/* Sacred Geometry & Esoteric Design Enhancements */

/* Flower of Life Background Pattern */
.flower-of-life-bg {
    position: relative;
}

.flower-of-life-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='173.2' viewBox='0 0 200 173.2'%3E%3Cdefs%3E%3Cpattern id='flower' x='0' y='0' width='100' height='86.6' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='50' cy='43.3' r='25' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='25' cy='43.3' r='25' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='75' cy='43.3' r='25' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='50' cy='0' r='25' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='50' cy='86.6' r='25' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='173.2' fill='url(%23flower)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0.3;
    z-index: -2;
    pointer-events: none;
}

/* Sacred Geometry Animations */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

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

/* Sacred Symbol Container */
.sacred-symbol {
    position: relative;
    display: inline-block;
}

.sacred-symbol::before {
    content: '☮';
    position: absolute;
    font-size: 3em;
    opacity: 0.1;
    animation: rotate-slow 20s linear infinite;
    color: #ffd700;
}

/* Gold Accent Elements */
.gold-accent {
    background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sacred Borders */
.sacred-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #667eea, #764ba2, #ffd700) border-box;
}

.sacred-border::before {
    content: '◆';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 10px;
    color: #ffd700;
    font-size: 1.2em;
}

/* Cosmic Background Gradient */
.cosmic-bg {
    background: linear-gradient(135deg, 
        #1a1a2e 0%, 
        #16213e 25%, 
        #0f3460 50%, 
        #533483 75%, 
        #764ba2 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

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

/* Metatron's Cube Decoration */
.metatron-cube {
    position: relative;
}

.metatron-cube::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-glow 4s ease-in-out infinite;
}

/* Vesica Piscis Elements */
.vesica-piscis {
    position: relative;
    display: inline-block;
}

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

.vesica-piscis::before {
    left: -20px;
}

.vesica-piscis::after {
    right: -20px;
}

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

.torus-field::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
    animation: rotate-slow 30s linear infinite;
}

/* Seed of Life Pattern */
.seed-of-life {
    background-image: radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 70% 30%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 50% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
}

/* Golden Ratio Spiral Decoration */
.golden-spiral {
    position: relative;
}

.golden-spiral::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: 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' fill='none' stroke='%23ffd700' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* Chakra Color Accents */
.chakra-root { color: #dc143c; }
.chakra-sacral { color: #ff8c00; }
.chakra-solar { color: #ffd700; }
.chakra-heart { color: #32cd32; }
.chakra-throat { color: #00bfff; }
.chakra-third-eye { color: #4b0082; }
.chakra-crown { color: #9400d3; }

/* Lotus Flower Decoration */
.lotus-decoration::before {
    content: '⚜';
    font-size: 2em;
    color: #ffd700;
    opacity: 0.5;
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

/* Mandala Background */
.mandala-bg {
    position: relative;
}

.mandala-bg::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        transparent 0%, 
        rgba(102, 126, 234, 0.1) 20%, 
        transparent 40%,
        rgba(118, 75, 162, 0.1) 60%,
        transparent 80%);
    border-radius: 50%;
    animation: rotate-slow 60s linear infinite;
    z-index: -1;
}

/* Sri Yantra Inspired Elements */
.sri-yantra-line {
    position: relative;
}

.sri-yantra-line::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #ffd700 20%, 
        #667eea 50%, 
        #764ba2 80%, 
        transparent 100%);
}

/* Animated Aura Effect */
.aura-effect {
    position: relative;
}

.aura-effect::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, 
        rgba(102, 126, 234, 0.3), 
        rgba(118, 75, 162, 0.3),
        rgba(255, 215, 0, 0.3));
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 4s ease-in-out infinite;
}

/* Merkaba Star Decoration */
.merkaba-decoration::before {
    content: '✦';
    position: absolute;
    font-size: 3em;
    color: #ffd700;
    opacity: 0.2;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    animation: rotate-slow 10s linear infinite;
}

/* Crystal Grid Pattern */
.crystal-grid {
    background-image: 
        linear-gradient(30deg, rgba(102, 126, 234, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(102, 126, 234, 0.05) 87.5%, rgba(102, 126, 234, 0.05)),
        linear-gradient(150deg, rgba(102, 126, 234, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(102, 126, 234, 0.05) 87.5%, rgba(102, 126, 234, 0.05)),
        linear-gradient(30deg, rgba(102, 126, 234, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(102, 126, 234, 0.05) 87.5%, rgba(102, 126, 234, 0.05)),
        linear-gradient(150deg, rgba(102, 126, 234, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(102, 126, 234, 0.05) 87.5%, rgba(102, 126, 234, 0.05)),
        linear-gradient(60deg, rgba(255, 215, 0, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(255, 215, 0, 0.05) 75%, rgba(255, 215, 0, 0.05)),
        linear-gradient(60deg, rgba(255, 215, 0, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(255, 215, 0, 0.05) 75%, rgba(255, 215, 0, 0.05));
    background-size: 80px 140px;
}

/* Enhanced Sacred Geometry Elements */

/* Metatron's Cube Overlay */
.metatron-overlay {
    position: relative;
}

.metatron-overlay::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23667eea' stroke-width='0.3' opacity='0.08'%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='60'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='20'/%3E%3Ccircle cx='100' cy='20' r='15'/%3E%3Ccircle cx='100' cy='180' r='15'/%3E%3Ccircle cx='20' cy='100' r='15'/%3E%3Ccircle cx='180' cy='100' r='15'/%3E%3Ccircle cx='43' cy='43' r='15'/%3E%3Ccircle cx='157' cy='43' r='15'/%3E%3Ccircle cx='43' cy='157' r='15'/%3E%3Ccircle cx='157' cy='157' r='15'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
    animation: rotate-slow 120s linear infinite;
}

/* Sri Yantra Inspired Background */
.sri-yantra-bg {
    background: 
        linear-gradient(30deg, transparent 48%, rgba(255,215,0,0.03) 49%, rgba(255,215,0,0.03) 51%, transparent 52%),
        linear-gradient(90deg, transparent 48%, rgba(102,126,234,0.03) 49%, rgba(102,126,234,0.03) 51%, transparent 52%),
        linear-gradient(150deg, transparent 48%, rgba(118,75,162,0.03) 49%, rgba(118,75,162,0.03) 51%, transparent 52%);
    background-size: 100px 100px;
}

/* Tree of Life Pattern */
.tree-of-life {
    position: relative;
}

.tree-of-life::after {
    content: '';
    position: absolute;
    right: 5%;
    top: 20%;
    width: 200px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cg fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'%3E%3Ccircle cx='50' cy='20' r='8'/%3E%3Ccircle cx='30' cy='50' r='8'/%3E%3Ccircle cx='70' cy='50' r='8'/%3E%3Ccircle cx='50' cy='80' r='8'/%3E%3Ccircle cx='30' cy='110' r='8'/%3E%3Ccircle cx='70' cy='110' r='8'/%3E%3Ccircle cx='50' cy='140' r='8'/%3E%3Ccircle cx='50' cy='170' r='8'/%3E%3Cline x1='50' y1='28' x2='30' y2='42'/%3E%3Cline x1='50' y1='28' x2='70' y2='42'/%3E%3Cline x1='30' y1='58' x2='50' y2='72'/%3E%3Cline x1='70' y1='58' x2='50' y2='72'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

/* Platonic Solid Decorations */
.platonic-decoration {
    position: relative;
}

.platonic-decoration::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 80px;
    height: 80px;
    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='%23ffd700' stroke-width='1' opacity='0.2'/%3E%3Cpolygon points='50,90 90,10 10,10' fill='none' stroke='%23ffd700' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
    animation: rotate-slow 20s linear infinite;
}

/* Golden Ratio Section Divider */
.golden-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102,126,234,0.3) 38.2%, 
        rgba(255,215,0,0.5) 50%, 
        rgba(118,75,162,0.3) 61.8%, 
        transparent 100%);
    margin: 60px auto;
    position: relative;
}

.golden-divider::before {
    content: '✦';
    position: absolute;
    left: 38.2%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #667eea;
    font-size: 1.5em;
    background: white;
    padding: 0 10px;
}

.golden-divider::after {
    content: '✦';
    position: absolute;
    left: 61.8%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #764ba2;
    font-size: 1.5em;
    background: white;
    padding: 0 10px;
}

/* Chakra Gradient Text */
.chakra-text {
    background: linear-gradient(90deg, 
        #dc143c 0%, 
        #ff8c00 14%, 
        #ffd700 28%, 
        #32cd32 42%, 
        #00bfff 56%, 
        #4b0082 70%, 
        #9400d3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fibonacci Spiral Corner */
.fibonacci-corner {
    position: relative;
}

.fibonacci-corner::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    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%3Cpath d='M100,100 L100,0 A100,100 0 0,1 0,100 Z' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M100,100 L100,38 A62,62 0 0,1 38,100 Z' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M62,100 L62,62 A38,38 0 0,1 100,62 Z' fill='none' stroke='%23667eea' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Ankh Symbol Decoration */
.ankh-decoration {
    position: relative;
}

.ankh-decoration::after {
    content: '☥';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2em;
    color: #ffd700;
    opacity: 0.3;
    animation: rotate-slow 30s linear infinite;
}

/* Sacred Geometry Button Hover */
.btn-sacred {
    position: relative;
    overflow: hidden;
}

.btn-sacred::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,215,0,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-sacred:hover::before {
    width: 300px;
    height: 300px;
}

/* Pentagram Star Animation */
.pentagram-star {
    position: relative;
}

.pentagram-star::before {
    content: '⭐';
    position: absolute;
    font-size: 2em;
    opacity: 0.2;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* Infinity Symbol Flow */
.infinity-flow {
    position: relative;
}

.infinity-flow::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M30,25 Q30,5 50,25 Q70,45 70,25 Q70,5 50,25 Q30,45 30,25' fill='none' stroke='%23667eea' stroke-width='2' opacity='0.2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Dodecahedron Pattern Overlay */
.dodecahedron-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='86.6' viewBox='0 0 100 86.6'%3E%3Cpolygon points='50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25' fill='none' stroke='%23667eea' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 50px 43.3px;
}