/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --background: #000000;
    --foreground: lab(100%, 0, 0);
    --secondary: #737373;

    --background-color: var(--bg-background);
    --text-color-black: var(--bg-background);
    --text-color-white: var(--bg-foreground);
    --font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

* {
    padding: 0;
    margin: 0;
}

html,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

body {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M14 26h18a6 6 0 0 0 1.2-11.9A8.5 8.5 0 0 0 14.5 11 5.5 5.5 0 0 0 14 26z' stroke='%23000000' stroke-opacity='0.055' stroke-width='1.5' fill='%23000000' fill-opacity='0.015' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54 66h18a6 6 0 0 0 1.2-11.9A8.5 8.5 0 0 0 54.5 51 5.5 5.5 0 0 0 54 66z' stroke='%23000000' stroke-opacity='0.055' stroke-width='1.5' fill='%23000000' fill-opacity='0.015' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-position: center top;
    min-height: 100vh;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 6rem 1.5rem;
    width: 100%;
}

.content-wrapper {
    background-color: #ffffff;
    box-shadow: 0 0 60px 45px #ffffff;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.bottom-fade {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0.75) 55%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 50;
}

.fade-slide-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Profile Tooltip Cards (GitHub, LinkedIn) */
.gh-tooltip-container,
.tooltip-container {
    position: relative;
    display: inline-block;
}

.gh-tooltip-card,
.tooltip-card {
    z-index: 100 !important;
}

.gh-tooltip-container:hover .gh-tooltip-card,
.gh-tooltip-card:hover,
.tooltip-container:hover .tooltip-card,
.tooltip-card:hover {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* Invisible bridge preventing hover loss when mouse moves across the gap */
.gh-tooltip-card::after,
.tooltip-card::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

/* Copy Email Flare */
#copy-toast {
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#copy-toast.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    animation: copy-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes copy-pop {
    0% {
        transform: translateX(-50%) translateY(6px) scale(0.85);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) translateY(-2px) scale(1.04);
    }
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
}

::selection {
    background-color: #fef08a;
    color: #422006;
}

::-moz-selection {
    background-color: #fef08a;
    color: #422006;
}