/**
 * Premium UI Effects - Silicon Valley style
 * Glassmorphism, gradients, particles, floating elements, parallax
 */

/* Lenis smooth scroll - required when using Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ========== Glassmorphism ========== */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}
.glass-dark {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 40px -8px rgba(37, 99, 235, 0.12);
}

/* ========== Gradient Section Backgrounds ========== */
.section-gradient {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%);
}
.section-gradient-alt {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 30%, #f8fafc 100%);
}
.hero-gradient {
    background: 
        radial-gradient(ellipse 100% 80% at 50% -30%, rgba(37, 99, 235, 0.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 90% 50%, rgba(34, 197, 94, 0.06), transparent 40%),
        radial-gradient(ellipse 60% 40% at 10% 80%, rgba(37, 99, 235, 0.06), transparent 40%);
}
.gradient-mesh {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 40% 20%, rgba(37, 99, 235, 0.06) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(34, 197, 94, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(37, 99, 235, 0.04) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(34, 197, 94, 0.04) 0px, transparent 50%);
}

/* ========== Animated Background Particles ========== */
.particles-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(37, 99, 235, 0.3);
    border-radius: 50%;
    animation: particleFloat 20s ease-in-out infinite;
}
.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 18s; }
.particle:nth-child(2) { left: 25%; top: 60%; animation-delay: -2s; animation-duration: 22s; width: 6px; height: 6px; opacity: 0.5; }
.particle:nth-child(3) { left: 60%; top: 30%; animation-delay: -4s; animation-duration: 16s; background: rgba(34, 197, 94, 0.25); }
.particle:nth-child(4) { left: 80%; top: 70%; animation-delay: -6s; animation-duration: 24s; width: 3px; height: 3px; }
.particle:nth-child(5) { left: 15%; top: 80%; animation-delay: -3s; animation-duration: 20s; background: rgba(37, 99, 235, 0.2); }
.particle:nth-child(6) { left: 70%; top: 15%; animation-delay: -5s; animation-duration: 19s; width: 5px; height: 5px; }
.particle:nth-child(7) { left: 45%; top: 45%; animation-delay: -7s; animation-duration: 21s; background: rgba(34, 197, 94, 0.3); }
.particle:nth-child(8) { left: 90%; top: 50%; animation-delay: -1s; animation-duration: 17s; }
.particle:nth-child(9) { left: 5%; top: 40%; animation-delay: -8s; animation-duration: 23s; width: 3px; height: 3px; }
.particle:nth-child(10) { left: 50%; top: 85%; animation-delay: -4s; animation-duration: 18s; background: rgba(37, 99, 235, 0.15); }
@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    25% { transform: translate(30px, -40px) scale(1.1); opacity: 0.4; }
    50% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.8; }
    75% { transform: translate(20px, 30px) scale(1.05); opacity: 0.5; }
}

/* ========== Floating Elements ( decorative orbs) ========== */
.float-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    animation: floatOrb 15s ease-in-out infinite;
}
.float-orb--1 {
    width: 300px;
    height: 300px;
    background: rgba(37, 99, 235, 0.15);
    top: -100px;
    right: -50px;
    animation-delay: 0s;
}
.float-orb--2 {
    width: 200px;
    height: 200px;
    background: rgba(34, 197, 94, 0.12);
    bottom: 20%;
    left: -80px;
    animation-delay: -5s;
}
.float-orb--3 {
    width: 150px;
    height: 150px;
    background: rgba(37, 99, 235, 0.1);
    top: 40%;
    right: 10%;
    animation-delay: -10s;
}
@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -30px) scale(1.05); }
    66% { transform: translate(-15px, 20px) scale(0.95); }
}

/* ========== Skill Progress Bar ========== */
.skill-progress {
    margin-top: 1rem;
}
.skill-progress-track {
    height: 6px;
    background: rgba(226, 232, 240, 0.8);
    border-radius: 3px;
    overflow: hidden;
}
.skill-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-green));
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.skill-card.animated .skill-progress-fill {
    width: var(--skill-width, 85%);
}
.skill-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.skill-progress-value {
    font-weight: 600;
    color: var(--accent);
}

/* ========== Interactive Project Card ========== */
.project-card-interactive {
    position: relative;
    overflow: hidden;
}
.project-card-interactive::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        transparent 40%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 60%
    );
    transform: translateX(-100%) rotate(25deg);
    transition: transform 0.7s ease;
    pointer-events: none;
}
.project-card-interactive:hover::before {
    transform: translateX(100%) rotate(25deg);
}
.project-card-glow {
    position: relative;
    z-index: 0;
}
.project-card-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-green), var(--accent));
    background-size: 200% 200%;
    opacity: 0;
    z-index: -1;
    filter: blur(12px);
    transition: opacity 0.4s ease;
    animation: gradientShift 4s ease infinite;
}
.project-card-glow:hover::after {
    opacity: 0.4;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ========== Parallax layers ========== */
.parallax-slow { transition: transform 0.1s linear; }
.parallax-medium { transition: transform 0.1s linear; }
.parallax-fast { transition: transform 0.1s linear; }