@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --color-primary: #231942;
    --color-secondary: #5e548e;
    --color-tertiary: #9f86c0;
    --color-accent: #be95c4;
    --color-highlight: #e0b1cb;
    --color-white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-tertiary {
    background-color: var(--color-tertiary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-highlight {
    background-color: var(--color-highlight);
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-tertiary {
    color: var(--color-tertiary);
}

.text-accent {
    color: var(--color-accent);
}

.text-highlight {
    color: var(--color-highlight);
}

.border-accent {
    border-color: var(--color-accent);
}

.bg-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.hover\:bg-highlight:hover {
    background-color: var(--color-highlight);
}

.hover\:text-highlight:hover {
    color: var(--color-highlight);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 1.5s ease-out;
}

.animate-slideInLeft {
    animation: slideInFromLeft 1s ease-out;
}

.animate-slideInRight {
    animation: slideInFromRight 1s ease-out;
}

.animate-slideInBottom {
    animation: slideInFromBottom 1s ease-out;
}

/* Stagger children animations */
.stagger-children>* {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.stagger-children>*:nth-child(1) {
    animation-delay: 0.1s;
}

.stagger-children>*:nth-child(2) {
    animation-delay: 0.2s;
}

.stagger-children>*:nth-child(3) {
    animation-delay: 0.3s;
}

.stagger-children>*:nth-child(4) {
    animation-delay: 0.4s;
}

.stagger-children>*:nth-child(5) {
    animation-delay: 0.5s;
}

/* Skill bar animation */
@keyframes growWidth {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.skill-bar {
    position: relative;
    height: 8px;
    background-color: var(--color-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.skill-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--color-accent);
    animation: growWidth 1.5s ease-out forwards;
}

/* Hover effect for project cards */
.project-card {
    transition: transform 0.3s ease-in-out;
}

.project-card:hover {
    transform: translateY(-10px);
}

.hero-cube {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    animation: cube 25s linear infinite;
}

.hero-cube:nth-child(1) {
    top: 80%;
    left: 45%;
    animation-delay: 0s;
}

.hero-cube:nth-child(2) {
    top: 70%;
    left: 50%;
    animation-delay: -5s;
    animation-duration: 20s;
}

.hero-cube:nth-child(3) {
    top: 60%;
    left: 70%;
    animation-delay: -10s;
    animation-duration: 15s;
}

@keyframes cube {
    0% {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }

    100% {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.hero-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(190, 149, 196, 0.2);
    /* Using accent color */
    border-radius: 50%;
    filter: blur(50px);
    animation: blob 10s ease-in-out infinite;
}

@keyframes blob {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(5%, 5%) scale(1.1);
    }

    50% {
        transform: translate(-5%, 10%) scale(0.9);
    }

    75% {
        transform: translate(10%, -5%) scale(1.05);
    }
}