@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'Montserrat', sans-serif;
}

.primary-color {
    color: #7D37C3;
}

.bg-primary {
    background-color: #7D37C3;
}

/* Dark mode styles */
body, header, button, nav {
    transition: background-color 0.8s ease, color 0.8s ease;
}

@supports (-webkit-touch-callout: none) {
    body, header, nav, button {
        transition: background-color 0.2s linear, color 0.2s linear;
    }
}

body.dark-mode {
    background-color: #10071A;
    color: #F3EFF9;
}

body.light-mode {
    background-color: #F3EFF9;
    color: #10071A;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Move effects */
.move_it { display: inline-block; will-change: transform, opacity; transition: transform 0.05s linear; }

/* Hero animations */
@keyframes bounceDown {
  0%,20%,50%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}
.animate-bounceDown { animation: bounceDown 1.5s infinite; }
.delay-200 { animation-delay: 0.2s; }

.fade-left { opacity: 0; transform: translateX(-50px); }
.fade-right { opacity: 0; transform: translateX(50px); }

/* Animations */
@keyframes bounce-arrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

.animate-bounce-arrow {
    animation: bounce-arrow 1.5s ease-in-out infinite;
}

.animate-bounce-arrow-delayed {
    animation: bounce-arrow 1.5s ease-in-out infinite;
    animation-delay: 0.15s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Custom gradient background */
.hero-gradient {
    position: relative;
    overflow: hidden;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 384px;
    height: 384px;
    background: #7D37C3;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.hero-gradient::after {
    content: '';
    position: absolute;
    bottom: 25%;
    right: 25%;
    width: 320px;
    height: 320px;
    background: #A855F7;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.1;
}

/* Navbar scroll effect */
.navbar-scrolled {
    backdrop-filter: blur(20px);
}

body.dark-mode .navbar-scrolled {
    background-color: rgba(16, 7, 26, 0.8);
    border-bottom: 1px solid rgba(125, 55, 195, 0.2);
}

body.light-mode .navbar-scrolled {
    background-color: #F3EFF9; 
    border-bottom: 1px solid rgba(125, 55, 195, 0.1);
}

/* Hide mobile menu by default */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-menu.open {
    max-height: 500px;
}

/* Language dropdown */
.language-dropdown {
    position: relative;
}

.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 50;
}

.language-dropdown:hover .language-menu,
.language-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.dark-mode .language-menu {
    background-color: rgba(26, 13, 46, 0.95);
    border: 1px solid rgba(125, 55, 195, 0.3);
}

body.light-mode .language-menu {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(125, 55, 195, 0.2);
}

/* Skill bar animation */
.skill-bar {
    transition: width 1s ease-out;
    transition-delay: 0.5s;
}

/* Hover effects */
.project-card {
    position: relative;
    overflow: hidden;
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 7, 26, 0.9), rgba(16, 7, 26, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.project-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease;
}

.project-card img,
.project-card video {
    transition: transform 0.7s ease;
}

@media (hover: hover) {
    .project-card:hover .project-overlay,
    .project-card:hover .project-content {
        opacity: 1;
        transform: translateY(0);
    }

    .project-card:hover img,
    .project-card:hover video {
        transform: scale(1.1);
    }
}

.project-card.is-visible .project-overlay,
.project-card.is-visible .project-content {
    opacity: 1;
    transform: translateY(0);
}

.project-card.is-visible img,
.project-card.is-visible video {
    transform: scale(1.1);
}