/* Technology Icons Font Mapping
 * This CSS file defines icon mappings for various technologies
 * using font icons
 */

.tech-icon[data-tech="python"]:before {
    content: "🐍"; /* Python */
}

.tech-icon[data-tech="javascript"]:before {
    content: "JS"; /* JavaScript */
}

.tech-icon[data-tech="html"]:before {
    content: "🌐"; /* HTML */
}

.tech-icon[data-tech="css"]:before {
    content: "🎨"; /* CSS */
}

.tech-icon[data-tech="numpy"]:before {
    content: "🔢"; /* NumPy */
}

.tech-icon[data-tech="matplotlib"]:before {
    content: "📊"; /* Matplotlib */
}

.tech-icon[data-tech="matlab"]:before {
    content: "📈"; /* MATLAB */
}

.tech-icon[data-tech="streamlit"]:before {
    content: "📱"; /* Streamlit */
}

.tech-icon[data-tech="plotly"]:before {
    content: "📉"; /* Plotly */
}

.tech-icon[data-tech="networkx"]:before {
    content: "🕸️"; /* NetworkX */
}

.tech-icon[data-tech="sqlalchemy"]:before {
    content: "🗃️"; /* SQLAlchemy */
}

.tech-icon[data-tech="calculus"]:before {
    content: "∫"; /* Calculus */
}

.tech-icon[data-tech="linear-algebra"]:before {
    content: "⊞"; /* Linear Algebra */
}

.tech-icon[data-tech="probability"]:before {
    content: "🎲"; /* Probability */
}

.tech-icon[data-tech="statistics"]:before {
    content: "📊"; /* Statistics */
}

.tech-icon[data-tech="chemistry"]:before {
    content: "⚗️"; /* Chemistry */
}

.tech-icon[data-tech="physics"]:before {
    content: "⚛️"; /* Physics */
}

.tech-icon[data-tech="quantum"]:before {
    content: "🔮"; /* Quantum */
}

.tech-icon[data-tech="differential-equations"]:before {
    content: "ƒ′"; /* Differential Equations */
}

.tech-icon[data-tech="signal-processing"]:before {
    content: "〰️"; /* Signal Processing */
}

.tech-icon[data-tech="fourier"]:before {
    content: "∑"; /* Fourier Analysis */
}

.tech-icon[data-tech="thermodynamics"]:before {
    content: "🔥"; /* Thermodynamics */
}

.tech-icon[data-tech="molecular"]:before {
    content: "🧪"; /* Molecular */
}

.tech-icon[data-tech="data"]:before {
    content: "📊"; /* Data Analysis */
}

.tech-icon[data-tech="ai"]:before {
    content: "🧠"; /* AI */
}

.tech-icon[data-tech="clifford"]:before {
    content: "⊗"; /* Clifford Algebra */
}

.tech-icon[data-tech="geometry"]:before {
    content: "△"; /* Geometry */
}

.tech-icon[data-tech="mathematics"]:before {
    content: "📐"; /* Mathematics */
}

.tech-icon[data-tech="finance"]:before {
    content: "💰"; /* Finance */
}

.tech-icon[data-tech="science"]:before {
    content: "🔬"; /* Science */
}

.tech-icon[data-tech="neuroscience"]:before {
    content: "🧠"; /* Neuroscience */
}

.tech-icon[data-tech="interdisciplinary"]:before {
    content: "🔄"; /* Interdisciplinary */
}

.tech-icon[data-tech="notes"]:before {
    content: "📝"; /* Notes */
}

.tech-icon[data-tech="pdf"]:before {
    content: "📄"; /* PDF */
}

/* Tooltips for tech icons */

/* Technology Icons Container */
.tech-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    position: absolute;
    bottom: -55px; /* Increased from -40px to -55px to move icons further down */
    left: 0;
    width: 100%;
    z-index: 20; /* Added high z-index to ensure icons appear on top of other elements */
}

.feature-box:hover .tech-icons {
    opacity: 1;
    transform: translateY(0);
}

/* Technology Icon Style */
.tech-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(34, 247, 147, 0.2), rgba(10, 149, 235, 0.3));
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: default;
    z-index: 20; /* Match the container's z-index */
    position: relative; /* Needed for z-index to work */
}

.tech-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 5px 15px rgba(10, 149, 235, 0.3);
    background: linear-gradient(145deg, rgba(34, 247, 147, 0.4), rgba(10, 149, 235, 0.5));
}

/* Make space for icons under feature box */
.feature-box {
    margin-bottom: 70px; /* Increased significantly to make room for the tech icons */
    position: relative; /* Needed for absolute positioning of tech icons */
}

/* Emoji style to restore original colors */
.emoji {
    background: none !important;
    color: initial !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-style: normal;
    text-shadow: none;
    display: inline-block;
}

/* Emoji bubbles for hover effects */
.emoji-bubbles {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 10;
    pointer-events: none; /* Allow clicking through the bubbles */
}

.tooltip-container:hover .emoji-bubbles {
    opacity: 1;
    top: -55px;
}

.emoji-bubble {
    font-size: 1.6rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    transform: translateY(0);
}

.emoji-bubble:nth-child(1) { animation-delay: 0s; }
.emoji-bubble:nth-child(2) { animation-delay: 0.3s; }
.emoji-bubble:nth-child(3) { animation-delay: 0.6s; }
.emoji-bubble:nth-child(4) { animation-delay: 0.9s; }
.emoji-bubble:nth-child(5) { animation-delay: 1.2s; }

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


.tech-icon .tech-icon-tooltip {
    visibility: hidden;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: whitesmoke;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.7rem;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.tech-icon:hover .tech-icon-tooltip {
    visibility: visible;
    opacity: 1;
}

.tech-icon .tech-icon-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}