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

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

.bg-grid-pattern {
background-image: 
linear-gradient(to right, #80808012 1px, transparent 1px),
linear-gradient(to bottom, #80808012 1px, transparent 1px);
background-size: 24px 24px;
}

.animate-pop-in {
animation: popIn 2.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.5) translateY(20px);
}

100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}

body.modal-open {
overflow: hidden;
}

html {
scroll-behavior: smooth;
}

.backdrop-blur-effect {
backdrop-filter: blur(5px);
transition: backdrop-filter 0.3s ease;
}

.modal-enter {
opacity: 0;
transform: scale(0.95);
}
.modal-enter-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms, transform 300ms;
}
.modal-exit {
opacity: 1;
transform: scale(1);
}
.modal-exit-active {
opacity: 0;
transform: scale(0.95);
transition: opacity 300ms, transform 300ms;
}

body.noscroll {
overflow: hidden;
}

.loader {
width: 40px;
height: 40px;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #333;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#response-data::-webkit-scrollbar {
display: none !important;
}

:root {
--luxury-gold: #D4AF37;
--luxury-purple: #5D3FD3;
}

.gradient-text {
background: linear-gradient(90deg, var(--luxury-gold) 0%, var(--luxury-purple) 100%); 
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.gradient-bg {
background: linear-gradient(135deg, var(--luxury-gold) 0%, var(--luxury-purple) 100%);
}

.card-hover {
transition: all 0.3s ease;
will-change: transform, box-shadow;
}

.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 25px 30px -10px rgba(0, 0, 0, 0.25), 0 10px 15px -5px rgba(0, 0, 0, 0.15);
}

.hero-pattern {
background-image: radial-gradient(circle at 25% 50%, rgba(93, 63, 211, 0.15) 0%, transparent 50%);
background-color: #0F172A;
}

.code-block {
background: #1E293B;
border-radius: 12px;
padding: 1.5rem;
font-family: 'Helvetica', sans-serif;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-badge {
@apply px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-300 hover:scale-105;
}

.pulse-animation {
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5); }
70% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.glass-effect {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}

.glass-card {
background: rgba(30, 30, 40, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 20px;
padding: 2rem;
transition: all 0.3s ease;
}

.floating-element {
animation: float 6s ease-in-out infinite;
}

.neon-border {
position: relative;
}

.neon-border::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background: linear-gradient(45deg, var(--luxury-gold), var(--luxury-purple), var(--luxury-gold));
background-size: 400% 400%;
animation: neonGlow 5s ease-in-out infinite;
border-radius: 20px;
}

@keyframes neonGlow {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}

.section-divider {
width: 120px;
height: 4px;
background: linear-gradient(90deg, var(--luxury-gold), var(--luxury-purple));
margin: 2rem auto;
border-radius: 2px;
}

.gold-text {
color: var(--luxury-gold);
}

.purple-text {
color: var(--luxury-purple);
}

.luxury-border {
border: 1px solid rgba(212, 175, 55, 0.3);
}

.social-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
transform: translateY(-5px);
background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-purple));
}

.experience-item {
position: relative;
padding-left: 30px;
margin-bottom: 40px;
}

.experience-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--luxury-purple);
border: 3px solid rgba(212, 175, 55, 0.3);
}

.experience-item::after {
content: '';
position: absolute;
left: 7px;
top: 24px;
width: 2px;
height: calc(100% + 24px);
background: linear-gradient(to bottom, var(--luxury-purple), transparent);
}

.progress-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--luxury-gold), var(--luxury-purple));
border-radius: 4px;
}

.skill-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.3);
margin: 4px;
font-size: 0.85rem;
transition: all 0.3s ease;
}

.skill-badge:hover {
background: rgba(93, 63, 211, 0.2);
transform: translateY(-3px);
}

.floating {
animation: float 8s ease-in-out infinite;
}

.typewriter {
overflow: hidden;
border-right: 0.15em solid var(--luxury-gold);
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0.15em;
animation: 
typing 3.5s steps(40, end),
blink-caret 0.75s step-end infinite;
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--luxury-gold); }
}

.section-title {
position: relative;
display: inline-block;
margin-bottom: 2rem;
}

.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--luxury-gold), var(--luxury-purple));
border-radius: 3px;
}

@keyframes pulse {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.4; }
}

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

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes underlineExpand {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-15px); }
60% { transform: translateY(-7px); }
}

@keyframes scrollIndicator {
0% { transform: translateY(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(8px); opacity: 0; }
}

.particle {
position: absolute;
background: rgba(212, 175, 55, 0.6);
border-radius: 50%;
pointer-events: none;
}

.particle-1 {
width: 2px;
height: 2px;
top: 20%;
left: 15%;
animation: float 10s ease-in-out infinite;
}

.particle-2 {
width: 3px;
height: 3px;
top: 60%;
right: 20%;
animation: float 8s ease-in-out infinite reverse;
}

.particle-3 {
width: 1px;
height: 1px;
bottom: 30%;
left: 25%;
animation: float 12s ease-in-out infinite;
}

.particle-4 {
width: 2px;
height: 2px;
top: 40%;
right: 30%;
animation: float 9s ease-in-out infinite reverse;
}

.particle-5 {
width: 1px;
height: 1px;
bottom: 20%;
right: 15%;
animation: float 11s ease-in-out infinite;
}

 .bg-luxuryPurple { background-color: #4028D9; }
 .bg-luxuryGold { background-color: #d4af37; }

.gradient-text {
background-image: linear-gradient(45deg, #d4af37, #4028D9, #d4af37);
background-size: 200% auto;
}

.gradient-bg {
background: linear-gradient(45deg, #4028D9, #4028D9);
}

.gold-text { color: #d4af37; }
.purple-text { color: #4028D9; }

.hover\:shadow-luxuryGold\/20:hover { 
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2); 
}

@keyframes float-slower {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(15px) translateX(-15px); }
}

.luxuryGold {
color: #D4AF37;
}

.bg-luxuryGold {
background-color: #D4AF37;
}

.border-luxuryGold {
border-color: #D4AF37;
}

.text-luxuryGold {
color: #D4AF37;
}

.perspective-1000 {
perspective: 1000px;
}

.transform-style-preserve-3d {
transform-style: preserve-3d;
}

.rotate-x-5 {
transform: rotateX(5deg);
}

.backdrop-blur-sm {
backdrop-filter: blur(8px);
}


@keyframes float1 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, 30px) rotate(5deg); }
}

@keyframes float2 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-15px, 20px) rotate(-3deg); }
}

@keyframes float3 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(10px, -15px) rotate(2deg); }
}

@keyframes text-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}

@keyframes rotate-scale {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.05) rotate(2deg); }
100% { transform: scale(1) rotate(0deg); }
}

@keyframes fade-in-up {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes line-grow {
0% { transform: scaleX(0); opacity: 0; }
100% { transform: scaleX(1); opacity: 1; }
}

@keyframes card-enter {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes progress-grow {
0% { width: 0; }
100% { width: attr(data-width); }
}

.animate-float1 { animation: float1 8s ease-in-out infinite; }
.animate-float2 { animation: float2 10s ease-in-out infinite; }
.animate-float3 { animation: float3 12s ease-in-out infinite; }
.animate-text-pulse { animation: text-pulse 3s ease-in-out infinite; }
.animate-rotate-scale { animation: rotate-scale 1s ease-in-out; }
.animate-fade-in-up { animation: fade-in-up 1s ease-out; }
.animate-line-grow { animation: line-grow 1s ease-out; }
.animate-card-enter { animation: card-enter 0.8s ease-out forwards; }
.animate-progress-grow { animation: progress-grow 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; 
}

@keyframes particle-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-10px, 15px); }
}

@keyframes particle-3 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10px, -10px); }
}

@keyframes particle-4 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-15px, -5px); }
}

@keyframes shine {
0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(100%) skewX(-15deg); opacity: 0; }
}

@keyframes progressExpand {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

.animate-particle-1 { animation: particle-1 8s ease-in-out infinite; }
.animate-particle-2 { animation: particle-2 10s ease-in-out infinite; }
.animate-particle-3 { animation: particle-3 12s ease-in-out infinite; }
.animate-particle-4 { animation: particle-4 9s ease-in-out infinite; }
.animate-shine { animation: shine 3s ease-in-out infinite; 
}

@keyframes particle-float-1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(15px, 20px); }
}

@keyframes particle-float-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-10px, 15px); }
}

@keyframes particle-float-3 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10px, -10px); }
}

@keyframes shine-delayed {
0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
20% { opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(100%) skewX(-15deg); opacity: 0; }
}

@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.animate-particle-float-1 { animation: particle-float-1 8s ease-in-out infinite; }
.animate-particle-float-2 { animation: particle-float-2 10s ease-in-out infinite; }
.animate-particle-float-3 { animation: particle-float-3 12s ease-in-out infinite; }
.animate-shine-delayed { animation: shine-delayed 3.5s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 1s ease-out; 
}


@keyframes float-slow {
 0%, 100% { transform: translateY(0) translateX(0); }
 50% { transform: translateY(-20px) translateX(10px); }
}

@keyframes float-medium {
 0%, 100% { transform: translateY(0) translateX(0); }
 50% { transform: translateY(-15px) translateX(-5px); }
}

@keyframes float-fast {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
}

@keyframes text-glow {
 0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
 50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

@keyframes pulse-slow {
 0%, 100% { opacity: 0.2; transform: scale(1); }
 50% { opacity: 0.3; transform: scale(1.05); }
}

@keyframes line-expand {
 0% { transform: scaleX(0); opacity: 0; }
 100% { transform: scaleX(1); opacity: 1; }
}

@keyframes particle-1 {
 0% { transform: translate(0, 0); opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; }
 100% { transform: translate(100px, -150px); opacity: 0; }
}

.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 4s ease-in-out infinite; }
.animate-text-glow { animation: text-glow 3s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-line-expand { animation: line-expand 1.5s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 1s ease-out; }

.animate-particle-1 { animation: particle-1 15s linear infinite; }

.glass-card-luxury {
 backdrop-filter: blur(12px);
 background: rgba(15, 23, 42, 0.6);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.bg-grid-pattern {
 background-image: 
 linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
 linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
 background-size: 40px 40px;
}

.perspective-1000 {
 perspective: 1000px;
}

.transform-style-preserve-3d {
 transform-style: preserve-3d;
}

.particle {
 position: absolute;
 background: rgba(255, 215, 0, 0.4);
 border-radius: 50%;
}

.particle-1 { width: 2px; height: 2px; top: 20%; left: 10%; }
.particle-2 { width: 3px; height: 3px; top: 60%; left: 80%; }

@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
 }
}

.hero-content {
 animation: fadeInScale 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
 opacity: 0;
}

.particle {
 animation: float 15s infinite linear;
 opacity: 0;
}

.particle-1 { animation-delay: 0.5s; }
.particle-2 { animation-delay: 1s; }
.particle-3 { animation-delay: 1.5s; }
.particle-4 { animation-delay: 2s; }
.particle-5 { animation-delay: 2.5s; }

@keyframes float {
 0% { transform: translateY(0) rotate(0deg); opacity: 0; }
 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; }
 100% { transform: translateY(0) rotate(360deg); opacity: 0; }
}

.animate-float-slow {
 animation: float 25s infinite linear;
}

.animate-float-medium {
 animation: float 20s infinite linear;
}

.animate-float-fast {
 animation: float 15s infinite linear;
}

.animate-float-slow-delay {
 animation: float 25s infinite linear 5s;
}

.animate-pulse-slow {
 animation: pulse 6s infinite;
}

.animate-pulse-medium {
 animation: pulse 4s infinite;
}

@keyframes pulse {
 0%, 100% { opacity: 0.2; }
 50% { opacity: 0.4; }
}

@keyframes slide-up {
 0% { transform: translateY(20px); opacity: 0; }
 100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
 animation: slide-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fade-in {
 0% { opacity: 0; }
 100% { opacity: 1; }
}

.animate-fade-in {
 animation: fade-in 1s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.animate-gradient {
background-size: 200% 200%;
animation: gradientShift 5s ease infinite;
}