/* General */
* { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; font-family:'Poppins', sans-serif; }
body { background:#000; color:#fff; line-height:1.6; overflow-x:hidden; }

/* Navigation */
nav { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 5%; position:fixed; width:100%; background:rgba(0,0,0,0.85); z-index:1000; }
.logo { font-size:2rem; font-weight:700; color:#b74b4b; }
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-links li a { color:#fff; text-decoration:none; font-size:1.2rem; transition:0.3s; }
.nav-links li a:hover { color:#b74b4b; text-shadow:0 0 8px #b74b4b; }
.burger { display:none; cursor:pointer; }
.burger div { width:25px; height:3px; background:#fff; margin:5px; transition:all 0.3s; }

/* Sections */
section { padding:120px 5%; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:relative; overflow:hidden; }
section::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(120deg,#000,#1a1a1a,#000); background-size:300% 300%; z-index:0; opacity:0.3; animation:sectionGradient 15s ease infinite; }
section > * { position:relative; z-index:1; }

h1 { font-size:3.5rem; margin-bottom:1rem; }
h1 span { color:#b74b4b; animation:textGlow 2s infinite alternate; }
h2 { font-size:2.8rem; margin-bottom:2rem; transition:0.3s; }
h2:hover { color:#b74b4b; text-shadow:0 0 15px #b74b4b; }
p { font-size:1.3rem; max-width:700px; margin-bottom:1.5rem; }

/* Buttons */
.btn { padding:1rem 2rem; font-size:1.3rem; cursor:pointer; border-radius:10px; text-decoration:none; color:#fff; border:2px solid #b74b4b; background:none; position:relative; overflow:hidden; transition:0.3s; }
.btn:hover { box-shadow:0 0 25px #fff,0 0 50px #b74b4b; }

/* Ripple */
.ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple-animation 0.6s linear; background: rgba(255, 255, 255, 0.3); pointer-events:none; }
@keyframes ripple-animation { to { transform:scale(4); opacity:0; } }

/* Home */
#home canvas { position:absolute; top:0; left:0; z-index:0; opacity:0; transition:opacity 2s ease-in-out; }
#home canvas.show { opacity:1; }
.home-content { position:relative; z-index:1; }

/* About */
.about-content { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2rem; }
.about-content img { width:270px; border-radius:50%; border:4px solid #b74b4b; transition:transform 0.5s, box-shadow 0.5s; }
.about-content img.hover-animate:hover { transform:scale(1.05) rotate(5deg); box-shadow:0 0 30px #b74b4b; }
.about-content p { max-width:500px; }

/* Skills */
.skills-container { display:flex; flex-direction:column; gap:1.5rem; width:100%; max-width:800px; }
.skill p { margin-bottom:0.5rem; font-weight:600; font-size:1.2rem; }
.skill-bar { width:100%; height:20px; background:#1a1a1a; border-radius:10px; overflow:hidden; }
.skill-fill { height:100%; width:0%; background-color:#b74b4b; border-radius:10px; transition:width 2s; }

/* Projects */
.projects-container { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; }
.project-card { background:#1a1a1a; padding:2rem; border:2px solid #b74b4b; border-radius:25px; width:280px; cursor:pointer; transition:all 0.5s; opacity:0; box-shadow:0 0 15px #b74b4b,0 0 30px #ff4f4f; position:relative; overflow:hidden; }
.project-card:hover { transform:translateY(-10px) scale(1.05); box-shadow:0 0 25px #b74b4b,0 0 50px #ff4f4f,0 0 75px #fff; }

/* Float animations */
.slide-left { transform:translateX(-100px); }
.slide-right { transform:translateX(100px); }
.slide-up { transform:translateY(100px); }

/* Contact */
.socials { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.socials a { background:linear-gradient(270deg,#b74b4b,#ff4f4f,#b74b4b); background-size:600% 600%; animation:gradientBG 6s ease infinite; color:#fff; padding:0.8rem 1.5rem; border-radius:5px; text-decoration:none; display:inline-block; transition:transform 0.3s, box-shadow 0.3s; }
.socials a:hover { transform:scale(1.05); box-shadow:0 0 25px #fff,0 0 50px #b74b4b; }

/* Back to Top */
#back-to-top { position:fixed; bottom:30px; right:30px; width:50px; height:50px; border:none; border-radius:50%; font-size:2rem; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:1000; background:#b74b4b; color:#fff; box-shadow:0 0 15px #b74b4b; transition: all 0.3s; }
#back-to-top:hover { transform:scale(1.2); box-shadow:0 0 25px #fff; }

/* Animations */
@keyframes fadeIn { to{opacity:1;transform:translateY(0);} }
@keyframes gradientBG {0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes textGlow {0%,100%{text-shadow:0 0 8px #b74b4b;}50%{text-shadow:0 0 20px #b74b4b;}}
@keyframes sectionGradient {0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* Responsive */
@media(max-width:768px){ .about-content{flex-direction:column;} .nav-links{display:none;} .burger{display:block;} }
/* About Image Glow & Curvy Animation */
.about-content img.hover-animate {
    border-radius:50%;
    border:4px solid #b74b4b;
    transition:transform 0.5s, box-shadow 0.5s;
    animation:neonGlow 2s infinite alternate;
}

.about-content img.hover-animate:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow:0 0 40px #b74b4b, 0 0 60px #ff4f4f, 0 0 80px #fff;
}

/* Neon pulsing animation */
@keyframes neonGlow {
    0% { box-shadow:0 0 10px #b74b4b, 0 0 20px #ff4f4f; transform: rotate(0deg); }
    50% { box-shadow:0 0 20px #ff4f4f, 0 0 30px #b74b4b; transform: rotate(2deg); }
    100% { box-shadow:0 0 10px #b74b4b, 0 0 20px #ff4f4f; transform: rotate(0deg); }
}