.aurora-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    overflow: hidden;
    background: #040914;
}

.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.65;
    mix-blend-mode: screen;
    pointer-events: none;
}

.orb-1 { width: 60vw; height: 60vw; background: radial-gradient(circle, #2563EB, transparent 60%); top: -20%; left: -10%; animation: float 20s ease-in-out infinite alternate; }
.orb-2 { width: 50vw; height: 50vw; background: radial-gradient(circle, #10B981, transparent 60%); bottom: -10%; right: -10%; animation: float 25s ease-in-out infinite alternate-reverse; }
.orb-3 { width: 45vw; height: 45vw; background: radial-gradient(circle, #8B5CF6, transparent 60%); top: 40%; left: 30%; animation: float 22s ease-in-out infinite alternate; }

.aurora-noise {
    position: absolute; inset: 0;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.05; mix-blend-mode: overlay; pointer-events: none;
}

@keyframes float {
    0% { transform: scale(1) translate(0, 0) rotate(0deg); }
    33% { transform: scale(1.1) translate(5%, 5%) rotate(10deg); }
    66% { transform: scale(0.9) translate(-5%, 5%) rotate(-5deg); }
    100% { transform: scale(1) translate(0, -5%) rotate(0deg); }
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}




.btn { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s; }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 15px 40px -10px #10B981, 0 0 20px rgba(37, 99, 235, 0.5); }
.btn-primary::before {
    content: ''; position: absolute; inset: -3px; border-radius: 102px;
    background: linear-gradient(90deg, #2563EB, #10B981, #8B5CF6, #2563EB);
    background-size: 300% auto; opacity: 0; transition: opacity 0.4s; animation: gradientFlowBtn 2s linear infinite;
    z-index: -1; pointer-events: none;
}
.btn-primary:hover::before { opacity: 1; }
@keyframes gradientFlowBtn { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.05); border-color: #fff; }

.tech-tag { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.tech-tag:hover { border-color: #10B981; background: rgba(16, 185, 129, 0.1); box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); transform: scale(1.1) translateY(-2px); color: #fff; z-index: 10; }

.btn-text-link { transition: gap 0.3s; }
.btn-text-link:hover { gap: 16px; }


.contact-link { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.contact-link::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at right bottom, var(--hover-color), transparent 60%);
    opacity: 0; transition: opacity 0.4s; z-index: 0;
}
.contact-link:hover { transform: scale(1.05) translateY(-5px); border-color: rgba(255,255,255,0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.contact-link:hover::before { opacity: 0.15; }

.whatsapp-card { --hover-color: #25D366; }
.linkedin-card { --hover-color: #0077b5; }
.github-card { --hover-color: #fff; }

.whatsapp-card:hover .contact-icon { color: #25D366; }
.linkedin-card:hover .contact-icon { color: #0077b5; }
.github-card:hover .contact-icon { color: #fff; }
.contact-icon { transition: color 0.4s; }


.tilt-glow { transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.project-row:hover .tilt-glow { transform: scale(1.03) translateZ(10px); }
.project-content::before {
    content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(52, 211, 153, 0), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    transition: background 0.5s, opacity 0.5s; opacity: 0.5; pointer-events: none;
}
.project-row:hover .project-content::before {
    opacity: 1; background: linear-gradient(45deg, #2563EB, #10B981, #8B5CF6, #2563EB);
    background-size: 200% auto; animation: gradientFlowBtn 2s linear infinite;
}

.project-visual i { transition: transform 0.5s ease, color 0.5s ease; z-index: 2; position: relative; filter: drop-shadow(0 0 20px rgba(255,255,255,0.1)); }
.project-row:hover .project-visual i { color: rgba(255,255,255,0.7); transform: scale(1.1); }

.animated-gradient-overlay {
    position: absolute; inset: -50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%);
    animation: rotateOverlay 10s linear infinite; opacity: 0.2; z-index: 0; pointer-events: none;
}
@keyframes rotateOverlay { 100% { transform: rotate(360deg); } }

.close-modal { transition: background 0.3s, transform 0.3s; }
.close-modal:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }