/* Explain: Global styles, custom cursors, animations, and theme colors. */
* {
    box-sizing: border-box;
}

html, body, a, button, input, textarea, select, [role="button"], .cursor-pointer, * {
    cursor: none !important;
}

.cursor-circle {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-purple);
    background-color: transparent;
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 0 12px var(--color-purple), inset 0 0 8px var(--color-purple);
    will-change: transform;
}

html {
    background-color: var(--background-color);
}

body {
    overflow-x: hidden;
    background-color: transparent;
}

body::before, body::after {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 180px 180px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 250px 50px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 280px 150px, #ffffff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity: 0.6;
    animation: star-drift 60s linear infinite;
    transform: translate(calc(var(--mouse-x, 0) * -20px), calc(var(--mouse-y, 0) * -20px));
}

body::after {
    background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)),
        radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--color-purple) 50%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-pink) 50%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--color-orange) 40%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--color-yellow) 35%, transparent) 0%, transparent 50%);
    mix-blend-mode: screen;
    transform: translate(calc(var(--mouse-x, 0) * -40px), calc(var(--mouse-y, 0) * -40px));
    animation: nebula-pulse 15s ease-in-out infinite alternate;
}

@keyframes star-drift {
    0% { background-position: 0px 0px; }
    100% { background-position: -1000px -500px; }
}

@keyframes nebula-pulse {
    0% { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(45deg) brightness(1.2); }
}

@keyframes slide-in-left {
    0% { transform: translateX(-50px) rotate(-90deg); opacity: 0; }
    100% { transform: translateX(0) rotate(0); opacity: 1; }
}

@keyframes text-gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes title-pulse-glow {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-pink) 40%, transparent));
    }
    50% {
        transform: translateY(-8px) scale(1.03);
        filter: drop-shadow(0 0 25px color-mix(in srgb, var(--color-purple) 80%, transparent)) drop-shadow(0 0 45px color-mix(in srgb, var(--color-orange) 30%, transparent));
    }
}

.animated-title {
    background-size: 300% 300% !important;
    animation: text-gradient-flow 4s linear infinite, title-pulse-glow 4s ease-in-out infinite;
    will-change: transform, filter, background-position;
}

.animated-gradient {
    background: linear-gradient(to right, var(--color-pink), var(--color-purple), var(--color-orange), var(--color-yellow), var(--color-pink), var(--color-purple));
    background-size: 300% 300% !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: text-gradient-flow 4s linear infinite;
    will-change: background-position;
}

.animated-gradient-bg {
    background: linear-gradient(to right, var(--color-pink), var(--color-purple), var(--color-orange), var(--color-yellow), var(--color-pink), var(--color-purple));
    background-size: 300% 300% !important;
    animation: text-gradient-flow 4s linear infinite;
    will-change: background-position;
}

/* Custom scrollbar for a darker theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #111; 
}
::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

@keyframes float-up-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.ic-floater-anim {
    animation: float-up-down 3s ease-in-out infinite;
}
.ic-floater-anim:hover {
    animation-play-state: paused;
}

@keyframes flashKey {
    0% { opacity: 0; transform: scale(5) rotate(-15deg); filter: blur(20px); }
    15% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0px); text-shadow: 0 0 40px red, 0 0 80px darkred, 0 0 120px black; }
    80% { opacity: 1; transform: scale(1.1) rotate(2deg); filter: blur(0px); text-shadow: 0 0 40px red, 0 0 80px darkred, 0 0 120px black; }
    100% { opacity: 0; transform: scale(0.5); filter: blur(10px); }
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); filter: hue-rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-15px, 10px) rotate(-2deg); filter: hue-rotate(-20deg) brightness(1.5); }
    20%, 40%, 60%, 80% { transform: translate(15px, -10px) rotate(2deg); filter: hue-rotate(20deg) brightness(0.5); }
}

@keyframes flashWord {
    0% { opacity: 0; transform: scale(3) translateY(-50px); filter: blur(20px); text-shadow: none; }
    10% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); text-shadow: 0 0 50px red, 0 0 100px darkred, 0 0 150px black; }
    80% { opacity: 1; transform: scale(1.1) translateY(0); filter: blur(0px); text-shadow: 0 0 50px red, 0 0 100px darkred, 0 0 150px black; }
    100% { opacity: 0; transform: scale(2) translateY(50px); filter: blur(10px); text-shadow: none; }
}

@keyframes crossPop {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); filter: blur(20px); }
    20% { opacity: 0.8; transform: scale(1.5) rotate(15deg); filter: blur(0px); text-shadow: 0 0 100px white, 0 0 200px gray; }
    80% { opacity: 0.8; transform: scale(1.8) rotate(0deg); text-shadow: 0 0 120px white, 0 0 250px gray; }
    100% { opacity: 0; transform: scale(4) rotate(90deg); filter: blur(40px); }
}