/* Enhanced Mycelium-Inspired Ambient Styles for Yoniverse.ai
   Creates a visually coherent quantum field experience across all devices */

/* Base styles for mycelium network container */
.mycelium-network-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -5; /* Background layer */
    overflow: hidden;
}

.mycelium-network-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Enhanced quantum field ambient effects */
.quantum-field-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -6; /* Background layer */
    overflow: hidden;
}

.quantum-field-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
}

/* Coherence ripple effects */
.coherence-ripple-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -4; /* Background layer */
    overflow: hidden;
}

.coherence-ripple {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0 0 20px 5px rgba(138, 43, 226, 0.2);
    animation: ripple-expand 4s ease-out forwards;
}

.scroll-ripple {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.15);
}

/* Passive quantum fingerprint storytelling */
.fingerprint-trace-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -3; /* Background layer */
    overflow: hidden;
}

.fingerprint-trace {
    position: absolute;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.5));
    animation: trace-appear 2s ease-out forwards, trace-pulse 8s infinite alternate;
}

.trace-emergence {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3Cpath d='M30,50 C30,30 70,30 70,50 C70,70 30,70 30,50 Z' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3C/svg%3E");
}

.trace-connection {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='50' r='20' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3Ccircle cx='70' cy='50' r='20' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3Cpath d='M30,50 L70,50' stroke='rgba(255, 215, 0, 0.7)' stroke-width='1'/%3E%3C/svg%3E");
}

.trace-integration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,20 L80,65 L20,65 Z' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3C/svg%3E");
}

.trace-coherence {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='rgba(255, 215, 0, 0.7)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3C/svg%3E");
}

.trace-trigger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,70 C10,50 10,30 30,20 C50,10 70,20 80,40 C90,60 80,80 60,90 C40,100 20,90 30,70 Z' fill='none' stroke='rgba(255, 215, 0, 0.7)' stroke-width='1.5'/%3E%3Cpath d='M40,65 C25,50 25,35 40,25 C55,15 70,25 75,40 C80,55 70,70 55,75 C40,80 25,75 40,65 Z' fill='none' stroke='rgba(138, 43, 226, 0.7)' stroke-width='1'/%3E%3C/svg%3E");
    width: 200px;
    height: 200px;
}

.trace-fading {
    animation: trace-fade 2s ease-out forwards;
}

/* Sacred geometry patterns */
.sacred-geometry-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -7; /* Background layer */
    overflow: hidden;
}

.sacred-geometry {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.03;
    mix-blend-mode: screen;
}

.flower-of-life {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='150' cy='100' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='150' cy='200' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='107' cy='125' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='107' cy='175' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='193' cy='125' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='193' cy='175' r='50' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3C/svg%3E");
    animation: sacred-rotate 120s infinite linear;
}

.metatron-cube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='20' fill='none' stroke='rgba(255, 215, 0, 0.5)' stroke-width='1'/%3E%3Ccircle cx='150' cy='100' r='20' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='150' cy='200' r='20' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='100' cy='125' r='20' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='100' cy='175' r='20' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='200' cy='125' r='20' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Ccircle cx='200' cy='175' r='20' fill='none' stroke='rgba(138, 43, 226, 0.5)' stroke-width='1'/%3E%3Cpath d='M150,100 L100,125 L100,175 L150,200 L200,175 L200,125 Z' fill='none' stroke='rgba(138, 43, 226, 0.3)' stroke-width='1'/%3E%3Cpath d='M150,150 L100,125 M150,150 L100,175 M150,150 L150,100 M150,150 L150,200 M150,150 L200,125 M150,150 L200,175' stroke='rgba(255, 215, 0, 0.3)' stroke-width='1'/%3E%3C/svg%3E");
    animation: sacred-pulse 15s infinite alternate;
}

.sri-yantra {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M150,50 L250,220 L50,220 Z' fill='none' stroke='rgba(138, 43, 226, 0.3)' stroke-width='1'/%3E%3Cpath d='M150,90 L220,220 L80,220 Z' fill='none' stroke='rgba(138, 43, 226, 0.3)' stroke-width='1'/%3E%3Cpath d='M150,130 L190,220 L110,220 Z' fill='none' stroke='rgba(138, 43, 226, 0.3)' stroke-width='1'/%3E%3Cpath d='M150,170 L170,220 L130,220 Z' fill='none' stroke='rgba(138, 43, 226, 0.3)' stroke-width='1'/%3E%3Ccircle cx='150' cy='150' r='30' fill='none' stroke='rgba(255, 215, 0, 0.5)' stroke-width='1'/%3E%3C/svg%3E");
    animation: sacred-rotate 90s infinite linear reverse;
}

/* Enhanced pulse effects for interactive elements */
.enhanced-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.enhanced-pulse::before,
.enhanced-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
    animation: enhanced-pulse 3s infinite;
}

.enhanced-pulse::after {
    animation-delay: 1.5s;
}

/* Quantum highlight for interactive elements */
.quantum-highlight {
    position: relative;
    z-index: 2;
}

.quantum-highlight::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0) 70%);
    z-index: -1;
    animation: quantum-ripple 1.5s infinite;
}

/* Special treatment for BEGIN button */
.quantum-fingerprint-trigger {
    position: relative;
    overflow: visible;
}

.quantum-fingerprint-trigger::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.quantum-fingerprint-trigger.in-viewport::before {
    opacity: 1;
    animation: fingerprint-trigger-pulse 4s infinite;
}

/* Phase-specific body styles */
body.phase-emergence {
    --phase-color: rgba(138, 43, 226, 0.8);
    --phase-accent: rgba(255, 215, 0, 0.3);
}

body.phase-connection {
    --phase-color: rgba(138, 43, 226, 0.8);
    --phase-accent: rgba(255, 215, 0, 0.5);
}

body.phase-integration {
    --phase-color: rgba(138, 43, 226, 0.8);
    --phase-accent: rgba(255, 215, 0, 0.7);
}

body.phase-coherence {
    --phase-color: rgba(138, 43, 226, 0.8);
    --phase-accent: rgba(255, 215, 0, 0.9);
}

/* Ensure content is always above background elements */
.section-content, .hero-content, .section-title, .section-text, 
.feature-card, .blueprint-card, .benefit-item, .cta-section, 
.quantum-footer, .nav-links, .logo {
    position: relative;
    z-index: 10; /* Ensure content is always above background elements */
}

/* Enhanced Blueprint Cards */
.blueprint-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
    justify-content: center;
}

.blueprint-card {
    position: relative;
    width: 100%;
    max-width: 350px;
    background: rgba(10, 10, 26, 0.7);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), 
                inset 0 0 10px rgba(138, 43, 226, 0.3);
    z-index: 5;
}

.blueprint-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 
                inset 0 0 15px rgba(138, 43, 226, 0.5);
}

.card-content {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.card-content h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.card-content p {
    color: var(--text-color);
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.card-expand {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(138, 43, 226, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-expand:hover {
    background: rgba(138, 43, 226, 0.4);
}

.expand-icon {
    color: var(--accent-color);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.blueprint-card.expanded .expand-icon {
    transform: rotate(45deg);
}

.card-portal {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
    background: rgba(15, 15, 35, 0.9);
}

.blueprint-card.expanded .card-portal {
    height: auto;
    max-height: 500px;
    transition: max-height 0.5s ease;
}

.portal-content {
    padding: 25px;
    border-top: 1px solid rgba(138, 43, 226, 0.3);
}

.portal-content h4 {
    color: var(--accent-color);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.portal-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 15px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #e0e0e0;
}

.portal-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color);
}

/* Quantum Visualizer */
#quantum-visualizer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Above background but below content */
    pointer-events: none;
    opacity: 0.8;
}

/* Animations */
@keyframes quantum-pulse {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.2); }
}

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

@keyframes ripple-expand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

@keyframes trace-appear {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}

@keyframes trace-pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes trace-fade {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
}

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

@keyframes sacred-pulse {
    0% { opacity: 0.02; transform: scale(0.95); }
    100% { opacity: 0.04; transform: scale(1.05); }
}

@keyframes enhanced-pulse {
    0% { opacity: 0.7; transform: scale(0.95); }
    50% { opacity: 0.3; }
    100% { opacity: 0; transform: scale(1.5); }
}

@keyframes quantum-ripple {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes fingerprint-trigger-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.7; }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .quantum-field-layer {
        opacity: 0.5 !important; /* Ensure visibility on medium screens */
    }
    
    .sacred-geometry {
        opacity: 0.02;
    }
    
    .fingerprint-trace {
        width: 120px;
        height: 120px;
    }
    
    .blueprint-card {
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .quantum-field-layer {
        opacity: 0.4 !important; /* Reduce opacity on small screens */
    }
    
    .sacred-geometry {
        opacity: 0.015;
    }
    
    .fingerprint-trace {
        width: 100px;
        height: 100px;
    }
    
    .blueprint-card {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .quantum-field-layer {
        opacity: 0.3 !important; /* Further reduce opacity on very small screens */
    }
    
    /* Simplify animations on very small screens for better performance */
    .sacred-geometry-container {
        display: none; /* Hide on very small screens to improve performance */
    }
    
    .fingerprint-trace {
        width: 80px;
        height: 80px;
    }
}

/* Prefers-reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .quantum-field-layer,
    .sacred-geometry,
    .fingerprint-trace,
    .coherence-ripple,
    .enhanced-pulse::before,
    .enhanced-pulse::after,
    .quantum-highlight::before,
    .quantum-fingerprint-trigger::before {
        animation: none !important;
        transition: none !important;
    }
}