body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at center, #242424 0%, #1a1a1a 50%, #0f0f0f 100%);
    color: #fff;
    overflow: hidden;
    font-family: 'Calibri', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.background-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    contain: layout style paint;
    isolation: isolate;
}

.background-text span {
    color: transparent;
    cursor: default;
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    filter: blur(1.5px);
    text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
    letter-spacing: 0.5px;
    will-change: auto;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Animation classes */
.background-text span.glow-soft {
    animation: glowSoft 6s ease-in-out;
}

.background-text span.glow-medium {
    animation: glowMedium 5.5s ease-in-out;
}

.background-text span.glow-intense {
    animation: glowIntense 5s ease-in-out;
}

.background-text span.pulse {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.2, 1);
}

.background-text span.wave {
    animation: wave 4.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-container {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: bounceInFromBottom 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
    transform: translateZ(0);
    will-change: auto;
    contain: layout style;
}

.profile-pic {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 6px solid #c68c05;
    box-shadow:
        0 0 20px 4px rgba(198, 140, 5, 0.3),
        0 0 40px 8px rgba(198, 140, 5, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1), border-color 1s cubic-bezier(0.4, 0, 0.2, 1);
    animation: profileGlow 8s ease-in-out infinite;
    cursor: pointer;
    pointer-events: none;
    will-change: transform, filter;
    transform: translate(0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.profile-pic:hover {
    box-shadow:
        0 0 35px 10px rgba(198, 140, 5, 0.6),
        0 0 60px 15px rgba(198, 140, 5, 0.3),
        inset 0 0 30px rgba(198, 140, 5, 0.2) !important;
    border-color: #d4a035 !important;
    animation: profileGlow 8s ease-in-out infinite, profileGlowHover 3s ease-in-out infinite !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bounceInFromBottom {
    0% {
        transform: translateY(100vh) scale(0.8);
        opacity: 0;
    }

    60% {
        transform: translateY(-20px) scale(1.05);
        opacity: 1;
    }

    80% {
        transform: translateY(10px) scale(0.98);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Profile picture animations */
@keyframes profileFloat {

    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    25% {
        transform: translateY(-12px) scale(1.02) rotate(-1deg);
    }

    50% {
        transform: translateY(-18px) scale(1.04) rotate(0deg);
    }

    75% {
        transform: translateY(-12px) scale(1.02) rotate(1deg);
    }
}

@keyframes profileGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px 4px rgba(198, 140, 5, 0.3),
            0 0 40px 8px rgba(198, 140, 5, 0.15),
            inset 0 0 20px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow:
            0 0 28px 8px rgba(198, 140, 5, 0.5),
            0 0 50px 12px rgba(198, 140, 5, 0.25),
            inset 0 0 25px rgba(198, 140, 5, 0.1);
    }
}

@keyframes profileGlowHover {

    0%,
    100% {
        box-shadow:
            0 0 35px 10px rgba(198, 140, 5, 0.6),
            0 0 60px 15px rgba(198, 140, 5, 0.3),
            inset 0 0 30px rgba(198, 140, 5, 0.2);
    }

    50% {
        box-shadow:
            0 0 45px 15px rgba(212, 160, 53, 0.8),
            0 0 75px 20px rgba(198, 140, 5, 0.5),
            inset 0 0 40px rgba(212, 160, 53, 0.3);
    }
}

/* Glow animations with different intensities */
@keyframes glowSoft {
    0% {
        color: transparent;
        text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
        filter: blur(1.5px);
    }

    50% {
        color: rgba(198, 140, 5, 0.15);
        text-shadow: 0 0 6px rgba(198, 140, 5, 0.2), 0 0 12px rgba(198, 140, 5, 0.1);
        filter: blur(2.5px);
    }

    100% {
        color: transparent;
        text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
        filter: blur(1.5px);
    }
}

@keyframes glowMedium {
    0% {
        color: transparent;
        text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
        filter: blur(1.5px);
    }

    50% {
        color: rgba(198, 140, 5, 0.25);
        text-shadow: 0 0 8px rgba(198, 140, 5, 0.3), 0 0 16px rgba(198, 140, 5, 0.15);
        filter: blur(3px);
    }

    100% {
        color: transparent;
        text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
        filter: blur(1.5px);
    }
}

@keyframes glowIntense {
    0% {
        color: transparent;
        text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
        filter: blur(1.5px);
    }

    50% {
        color: rgba(198, 140, 5, 0.4);
        text-shadow: 0 0 12px rgba(198, 140, 5, 0.4), 0 0 20px rgba(198, 140, 5, 0.25), 0 0 30px rgba(198, 140, 5, 0.1);
        filter: blur(3.5px);
    }

    100% {
        color: transparent;
        text-shadow: 0 0 2px rgba(198, 140, 5, 0.05);
        filter: blur(1.5px);
    }
}

/* Pulse animation */
@keyframes pulse {
    0% {
        color: transparent;
        transform: scale(1);
        filter: blur(1.5px);
    }

    50% {
        color: rgba(198, 140, 5, 0.35);
        transform: scale(1.1);
        text-shadow: 0 0 10px rgba(198, 140, 5, 0.3);
        filter: blur(2.5px);
    }

    100% {
        color: transparent;
        transform: scale(1);
        filter: blur(1.5px);
    }
}

/* Wave animation */
@keyframes wave {
    0% {
        color: transparent;
        transform: translateY(0);
        filter: blur(1.5px);
    }

    25% {
        color: rgba(198, 140, 5, 0.2);
        transform: translateY(-3px);
        text-shadow: 0 0 8px rgba(198, 140, 5, 0.2);
        filter: blur(2.5px);
    }

    75% {
        color: rgba(198, 140, 5, 0.2);
        transform: translateY(3px);
        text-shadow: 0 0 8px rgba(198, 140, 5, 0.2);
        filter: blur(2.5px);
    }

    100% {
        color: transparent;
        transform: translateY(0);
        filter: blur(1.5px);
    }
}