/* styles.css - base, variables, layout & components */

/* RESET-ish basics */
* { margin:0; padding:0; box-sizing: border-box; }
:root{
  --primary:#6366f1;
  --secondary:#8b5cf6;
  --accent:#ec4899;
  --dark:#0f172a;
  --light:#f8fafc;
  --gray:#64748b;
}

/* BASE */
html,body { height:100%; }
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--dark);
  color: var(--light);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* CUSTOM CURSOR */
.cursor{
  width:20px; height:20px;
  border:2px solid var(--primary); border-radius:50%;
  position:fixed; pointer-events:none; z-index:9999;
  transition:all 0.1s ease; transform:translate(-50%,-50%);
}
.cursor-follower{
  width:8px; height:8px; background:var(--accent); border-radius:50%;
  position:fixed; pointer-events:none; z-index:9999;
  transition:all 0.15s ease; transform:translate(-50%,-50%);
}

/* NAV */
nav{
  position:fixed; top:0; width:100%;
  padding:1.5rem 5%; display:flex; align-items:center; justify-content:space-between;
  z-index:1000; background: rgba(15,23,42,0.8); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(99,102,241,0.08);
}
.logo{ font-size:1.8rem; font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-links{ display:flex; gap:2rem; list-style:none; }
.nav-links a{ color:var(--light); text-decoration:none; font-weight:500; position:relative; transition:color .25s; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--primary); transition:width .3s; }
.nav-links a:hover::after{ width:100%; }

/* HEBs: sections */
section{ min-height:100vh; padding:5rem 10%; display:flex; align-items:center; justify-content:center; }

/* HERO */
#hero{ position:relative; overflow:hidden; }
.hero-content{ z-index:2; max-width:1200px; }
.hero-content h1{
  font-size:5rem; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: fadeInUp .9s ease;
}
.hero-content .subtitle{ font-size:2rem; color:var(--gray); margin-bottom:2rem; animation: fadeInUp .9s .15s backwards; }
.hero-content p{ font-size:1.1rem; color:var(--gray); max-width:650px; margin-bottom:2rem; animation: fadeInUp .9s .3s backwards; }
.cta-buttons{ display:flex; gap:1rem; animation: fadeInUp .9s .45s backwards; }

/* BUTTONS */
.btn{ padding:1rem 2rem; border:none; border-radius:50px; font-size:1rem; font-weight:600; cursor:pointer; transition:all .3s; text-decoration:none; display:inline-block; }
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow: 0 10px 30px rgba(99,102,241,0.25); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 15px 40px rgba(99,102,241,0.35); }
.btn-secondary{ background:transparent; color:var(--light); border:2px solid var(--primary); }
.btn-secondary:hover{ background:var(--primary); transform:translateY(-3px); }

/* PARTICLES (container only; individual particles created by JS) */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }

/* ABOUT */
#about{ background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(236,72,153,0.03)); }
.about-content{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; max-width:1200px; }
.about-text h2{ font-size:3rem; margin-bottom:1rem; background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.about-text h3{ font-size:1.8rem; margin-bottom:0.8rem; background:linear-gradient(44deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.about-text p{ color:var(--gray); line-height:1.8; margin-bottom:1rem; }

/* SKILLS */
.skills{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem; }
.skill-card{ background: rgba(99,102,241,0.08); padding:1rem; border-radius:10px; border:1px solid rgba(99,102,241,0.12); transition:all .3s; }
.skill-card:hover{ transform:translateY(-5px); border-color:var(--primary); box-shadow:0 10px 30px rgba(99,102,241,0.12); }
.skill-card h4{ color:var(--primary); margin-bottom:.5rem; }

/* PROFILE PICTURE AREA */
.profile-picture-container{ position:relative; width:400px; height:400px; margin:0 auto; }
.animated-border, .animated-border-2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:3px solid transparent; background:linear-gradient(135deg,var(--primary),var(--accent),var(--secondary)); background-clip:padding-box; }
.animated-border{ width:420px; height:420px; animation: rotateBorder 8s linear infinite; }
.animated-border-2{ width:440px; height:440px; border-width:2px; animation: rotateBorder 12s linear infinite reverse; opacity:0.5; }

.profile-picture{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:380px; height:380px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 20px 60px rgba(99,102,241,0.35); display:flex; align-items:center; justify-content:center; }
.profile-picture img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-fallback{ font-size:8rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

/* floating icons */
.floating-icons{ position:absolute; inset:0; pointer-events:none; }
.float-icon{ position:absolute; font-size:2rem; animation: floatAround 6s ease-in-out infinite; animation-delay:var(--delay); opacity:.85; }
.float-icon:nth-child(1){ top:10%; left:10%; }
.float-icon:nth-child(2){ top:10%; right:10%; }
.float-icon:nth-child(3){ bottom:10%; left:10%; }
.float-icon:nth-child(4){ bottom:10%; right:10%; }

/* PROJECTS */
#projects{ flex-direction:column; }
.section-title{ font-size:3rem; text-align:center; margin-bottom:3rem; background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem; max-width:1200px; width:100%; }
.project-card{ background: rgba(99,102,241,0.04); border-radius:20px; overflow:hidden; border:1px solid rgba(99,102,241,0.08); transition:all .3s; cursor:pointer; }
.project-card:hover{ transform:translateY(-10px); border-color:var(--primary); box-shadow:0 20px 50px rgba(99,102,241,0.18); }
.project-image{ width:100%; height:200px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.project-content{ padding:1.5rem; }
.project-content h3{ margin-bottom:1rem; color:var(--light); }
.project-content p{ color:var(--gray); margin-bottom:1rem; }
.project-tags{ display:flex; gap:.5rem; flex-wrap:wrap; }
.tag{ background: rgba(99,102,241,0.12); padding:.3rem .8rem; border-radius:20px; font-size:.85rem; color:var(--primary); }

/* CONTACT */
#contact{ background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(236,72,153,0.02)); flex-direction:column; }
.contact-container{ max-width:600px; width:100%; }
.form-group{ margin-bottom:1.5rem; }
.form-group label{ display:block; margin-bottom:.5rem; color:var(--light); font-weight:500; }
.form-group input, .form-group textarea{ width:100%; padding:1rem; background: rgba(99,102,241,0.08); border:2px solid rgba(99,102,241,0.08); border-radius:10px; color:var(--light); font-size:1rem; transition:all .25s; }
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 20px rgba(99,102,241,0.08); }
.form-status{ margin-top:1rem; padding:1rem; border-radius:10px; display:none; }
.form-status.success{ background: rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.3); color:#86efac; }
.form-status.error{ background: rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.28); color:#fca5a5; }

/* MODAL */
.modal{ display:none; position:fixed; z-index:10000; inset:0; background:rgba(0,0,0,0.9); backdrop-filter: blur(10px); }
.modal-content{ position:relative; background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.95)); margin:5% auto; padding:3rem; width:80%; max-width:800px; border-radius:20px; border:2px solid rgba(99,102,241,0.12); box-shadow:0 30px 80px rgba(99,102,241,0.18); }
.close-modal{ position:absolute; right:2rem; top:1.5rem; font-size:3rem; color:var(--gray); cursor:pointer; background:transparent; border:none; line-height:1; }
.close-modal:hover{ color:var(--accent); transform:rotate(90deg); }
.modal-content img{ width:100%; height:300px; object-fit:cover; border-radius:15px; margin-bottom:2rem; }
.modal-content h2{ font-size:2.5rem; margin-bottom:1rem; background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.modal-buttons{ display:flex; gap:1rem; margin-top:2rem; }

/* SOCIALS (unified) */
/* .about-socials is used when socials are inside about-text; .floating-socials for fixed bottom-right float */
.socials{ display:flex; gap:14px; align-items:center; }
.about-socials{ margin-top:1.5rem; flex-direction:row; justify-content:flex-start; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; padding:8px; text-decoration:none; transition:transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); box-shadow:0 6px 22px rgba(2,6,23,0.18); position:relative; overflow:visible; }
.social-link::before{ content:""; position:absolute; inset:-2px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--accent)); z-index:-1; filter:blur(6px); opacity:0.18; transition:opacity 220ms; }
.social-link img{ width:28px; height:28px; object-fit:contain; display:block; }
.social-link:hover, .social-link:focus{ transform:translateY(-6px) scale(1.03); box-shadow:0 18px 40px rgba(99,102,241,0.12); }
.social-link:hover::before, .social-link:focus::before{ opacity:0.32; }
.social-link:focus-visible{ outline:3px solid rgba(99,102,241,0.08); outline-offset:3px; border-radius:14px; }

/* links adjusted Horizontally  */
.about-socials {
    text-align: center; /* centers everything */
    margin-top: 20px;
  }
  
  .about-socials h3 {
    margin-bottom: 10px; /* space between heading and icons */
    font-size: 1.4rem;
  }
  
  .about-socials .social-link {
    display: inline-block; /* keeps icons horizontal */
    margin: 0 8px; /* spacing between icons */
  }
  
  .about-socials .social-link img {
    width: 35px; /* adjust size */
    height: 35px;
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  
  .about-socials .social-link img:hover {
    transform: scale(1.15);
  }
  
/* floating (global) socials variant — fixed bottom-right */
.floating-socials{ position:fixed; bottom:20px; right:20px; z-index:1000; }
.floating-socials img{ width:32px; height:32px; border-radius:8px; transition:transform .2s ease, opacity .2s ease; }
.floating-socials img:hover{ transform:scale(1.1); opacity:.85; }

/* NAV toggle placeholder (desktop hides by default) */
.nav-toggle{ display:none; }

@media (min-width:769px){ .nav-links{ display:flex !important; } }

/* ===== FOOTER ===== */
.site-footer {
    background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(10,14,24,0.95));
    border-top: 1px solid rgba(99,102,241,0.06);
    color: var(--gray);
    padding: 3rem 10%;
    margin-top: 3rem;
    font-size: 0.95rem;
    text-align: center; /* Center all content */
}

.site-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex; /* Use flex for centering */
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    gap: 2.5rem;
}

/* left column (brand + copy) */
.site-footer .footer-left .footer-title {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-footer .footer-left .footer-desc {
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.site-footer .footer-copy {
    color: #cbd5e1;
    margin-top: 0.8rem;
}

.site-footer .footer-copy a {
    color: #FFD600; /* yellow link for emphasis */
    text-decoration: none;
}

.site-footer .footer-copy a:hover {
    text-decoration: underline;
}

/* right column lists */
.site-footer .footer-right .footer-section-heading {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(44deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.site-footer .footer-links li {
    margin-bottom: 0.5rem;
}

.site-footer .footer-links a {
    color: var(--light);
    text-decoration: none;
    transition: color .18s, transform .18s;
}

.site-footer .footer-links a:hover {
    color: var(--primary);
    transform: translateY(-2px); /* slight lift on hover */
}

/* small devices: stack */
@media (max-width: 900px) {
    .site-footer {
        padding: 2rem 6%;
    }
    .site-footer .footer-content {
        flex-direction: column;
        align-items: center;
    }
    .site-footer .footer-right {
        margin-top: 1rem;
    }
}

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

/* Dynamic Accent Gradient */
.project-card:hover {
  border: 1px solid transparent;
  background: linear-gradient(145deg, #0f172a, #1e293b) padding-box,
              linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899) border-box;
}