/* PQ Crypta Homepage Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #000000;
    color: #ffffff;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    cursor: none;
}

/* Quantum Field Background */
.quantum-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(
        45deg,
        #0a0a0a 0%,
        #0d1421 25%,
        #162447 50%,
        #1f4068 75%,
        #1b1464 100%
    );
}

/* 3D Canvas Container */
.quantum-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Advanced Quantum 4D Cursor */
.quantum-cursor {
    position: fixed;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
}

/* Core quantum dot */
.quantum-cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 0%, #00d4ff 50%, #0099cc 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 10px #00d4ff,
        0 0 20px #00d4ff,
        0 0 30px #0099cc;
    animation: quantum-pulse 1.5s infinite ease-in-out;
}

/* Spiral arms */
.quantum-cursor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(0, 212, 255, 0.8) 30deg,
            transparent 60deg,
            rgba(0, 153, 204, 0.6) 90deg,
            transparent 120deg,
            rgba(0, 212, 255, 0.4) 150deg,
            transparent 180deg,
            rgba(0, 153, 204, 0.8) 210deg,
            transparent 240deg,
            rgba(0, 212, 255, 0.6) 270deg,
            transparent 300deg,
            rgba(0, 153, 204, 0.4) 330deg,
            transparent 360deg
        );
    border-radius: 50%;
    animation: quantum-rotation 3s linear infinite;
    mask: radial-gradient(circle, transparent 20%, black 25%, black 90%, transparent 95%);
}

/* Geometric patterns overlay */
.quantum-cursor {
    background:
        radial-gradient(circle at 50% 50%, transparent 15px, rgba(0, 212, 255, 0.1) 16px, transparent 17px),
        radial-gradient(circle at 50% 50%, transparent 25px, rgba(0, 153, 204, 0.1) 26px, transparent 27px),
        radial-gradient(circle at 50% 50%, transparent 35px, rgba(0, 212, 255, 0.05) 36px, transparent 37px);
}

/* Hover state enhancement */
.quantum-cursor:hover::before {
    box-shadow:
        0 0 15px #00d4ff,
        0 0 30px #00d4ff,
        0 0 45px #0099cc,
        0 0 60px #0099cc;
    animation: quantum-pulse-intense 0.8s infinite ease-in-out;
}

.quantum-cursor:hover::after {
    animation: quantum-rotation-fast 1.5s linear infinite;
}

/* Animations */
@keyframes quantum-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.8;
    }
}

@keyframes quantum-pulse-intense {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0.9;
    }
}

@keyframes quantum-rotation {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes quantum-rotation-fast {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Cursor Trail */
.cursor-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    background: rgba(0, 212, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
}

/* Interactive Particles - Faster Animation */
.interactive-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #00d4ff 0%, #0099cc 70%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: float-interactive 6s infinite linear;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

@keyframes float-interactive {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    3% {
        opacity: 1;
        transform: translateY(97vh) translateX(0) rotate(18deg) scale(1);
    }
    97% {
        opacity: 1;
        transform: translateY(3vh) translateX(80px) rotate(342deg) scale(1.2);
    }
    100% {
        transform: translateY(-3vh) translateX(120px) rotate(360deg) scale(0);
        opacity: 0;
    }
}

/* WebGPU Background Layer */
.webgpu-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    opacity: 0.4;
}

/* 3D Mesh Particles */
.mesh-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
    border-radius: 50%;
    pointer-events: none;
    animation: mesh-float 8s infinite ease-in-out;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.4);
}

@keyframes mesh-float {
    0%, 100% {
        transform: translateY(100vh) translateX(0) rotateX(0deg) rotateY(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateX(20px) rotateX(45deg) rotateY(45deg) scale(1);
    }
    50% {
        transform: translateY(50vh) translateX(-30px) rotateX(180deg) rotateY(180deg) scale(1.5);
        opacity: 0.8;
    }
    90% {
        opacity: 1;
        transform: translateY(10vh) translateX(60px) rotateX(315deg) rotateY(315deg) scale(1);
    }
}

/* Main Container */
.main-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

/* Logo with 3D Effects */
.quantum-logo {
    font-size: 5rem;
    margin-bottom: 1rem;
    font-weight: 900;
    text-align: center;
    position: relative;
    font-family: 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.05em;
    cursor: default;
    z-index: 10;

    /* Sharp quantum gradient */
    background: linear-gradient(
        135deg,
        #00ffff 0%,
        #0080ff 12%,
        #8000ff 25%,
        #ff0080 37%,
        #ff4000 50%,
        #80ff00 62%,
        #00ff80 75%,
        #0080ff 87%,
        #00ffff 100%
    );
    background-size: 600% 600%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Blood red offset for definition */
    text-shadow: 1px 1px 0 #dc143c;

    /* Quantum field animation */
    animation:
        quantum-energy 6s ease-in-out infinite,
        quantum-shimmer 2s linear infinite,
        quantum-breathe 4s ease-in-out infinite;

    /* 3D transformation */
    transform-style: preserve-3d;
    perspective: 1000px;

    /* Clean hover effects */
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.quantum-logo:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(3deg) scale(1.05);
    text-shadow: 2px 2px 0 #dc143c;
}

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


/* Tagline */
.quantum-tagline {
    font-size: 1.8rem;
    margin-bottom: 3rem;
    font-weight: 400;
    text-align: center;
    position: relative;
    font-family: 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.02em;
    z-index: 10;

    /* Quantum gradient text */
    background: linear-gradient(
        90deg,
        #b0e0ff 0%,
        #80d0ff 25%,
        #50c0ff 50%,
        #80d0ff 75%,
        #b0e0ff 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Quantum glow */
    filter: drop-shadow(0 0 8px rgba(176, 224, 255, 0.6));

    /* Quantum animations */
    animation:
        quantum-tagline-flow 4s linear infinite,
        quantum-tagline-pulse 3s ease-in-out infinite;

    /* Smooth transitions */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.quantum-tagline:hover {
    filter:
        drop-shadow(0 0 12px rgba(176, 224, 255, 0.8))
        drop-shadow(0 0 24px rgba(128, 208, 255, 0.4));
    transform: scale(1.02);
}

/* Gold advanced math symbols in tagline */
.quantum-tagline span[style*="color: #ffd700"] {
    color: #ffd700 !important;
    text-shadow:
        0 0 1px #daa520,
        1px 1px 0 #b8860b !important;
    font-weight: 100;
    font-family: 'Times New Roman', 'STIX Two Math', serif;
    animation: gold-sparkle 2s ease-in-out infinite;
}

@keyframes gold-sparkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* Quantum Logo Animations */
@keyframes quantum-energy {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 200% 50%; }
    75% { background-position: 300% 75%; }
}

@keyframes quantum-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes quantum-breathe {
    0%, 100% { transform: scale(1) rotateZ(0deg); }
    25% { transform: scale(1.01) rotateZ(0.5deg); }
    50% { transform: scale(1.02) rotateZ(0deg); }
    75% { transform: scale(1.01) rotateZ(-0.5deg); }
}

/* Quantum Tagline Animations */
@keyframes quantum-tagline-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes quantum-tagline-pulse {
    0%, 100% { opacity: 0.9; transform: translateY(0px); }
    50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes glow-text {
    from { text-shadow: 0 0 10px rgba(176, 196, 222, 0.5); }
    to { text-shadow: 0 0 20px rgba(176, 196, 222, 0.8), 0 0 30px rgba(176, 196, 222, 0.5); }
}

/* Navigation Grid */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin-top: 2rem;
}

/* Enhanced Navigation Cards */
.nav-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    padding: 2.5rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.1) 0%,
        rgba(255, 107, 107, 0.1) 50%,
        rgba(78, 205, 196, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.nav-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00d4ff;
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg) scale(1.05);
    box-shadow:
        0 20px 40px rgba(0, 212, 255, 0.3),
        0 10px 20px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-card:hover::before {
    opacity: 1;
}

/* Enhanced Icons */
.nav-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.5));
    animation: float-icon 6s ease-in-out infinite;
}

@keyframes float-icon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.nav-card:hover .nav-icon {
    animation: spin-hover 0.8s ease-in-out;
    filter: drop-shadow(0 0 25px rgba(0, 212, 255, 0.8));
}

@keyframes spin-hover {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(360deg) scale(1); }
}

/* Enhanced Typography */
.nav-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-description {
    font-size: 0.95rem;
    color: #a0a0a0;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Footer */
.footer {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .quantum-logo {
        font-size: 3rem;
    }

    .quantum-tagline {
        font-size: 1.4rem;
    }

    .nav-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .main-container {
        padding: 1rem;
    }

    .nav-card {
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .quantum-logo {
        font-size: 2.5rem;
    }

    .quantum-tagline {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }
}

/* Loading Animation */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 1s ease-out;
}

.loading-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

.quantum-loader {
    width: 80px;
    height: 80px;
    border: 3px solid rgba(0, 212, 255, 0.3);
    border-top: 3px solid #00d4ff;
    border-radius: 50%;
    animation: quantum-spin 1s linear infinite;
}

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

/* Floating shapes animation */
@keyframes float-shapes {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(90deg) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-10px) translateX(-15px) rotate(180deg) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-30px) translateX(5px) rotate(270deg) scale(1.1);
        opacity: 0.7;
    }
}