/* styles.css
   - Dark theme portfolio styles
   - Mobile-first responsive design
   - Well-commented for easy customization
*/

/* --------------------------
   Root & Theme variables
   -------------------------- */
:root{
  --bg: #0b0f13;
  --surface: #0f1720;
  --muted: #94a3b8;
  --text: #e6eef6;
  --accent: #2563eb; /* blue accent */
  --glass: rgba(255,255,255,0.03);

  --radius: 12px;
  --gap: 1.25rem;
  --container: 1100px;
  --transition: 200ms ease;
  --max-width-sm: 820px;
}

/* Base setups */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg), #07101a 120%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  scroll-behavior:smooth;
}

/* Utility containers */
.container{
  width:calc(100% - 2rem);
  max-width:var(--container);
  margin:0 auto;
  padding:2rem 0;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(6,9,11,0.45), rgba(6,9,11,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  font-weight:800;
  letter-spacing:0.2px;
  color:var(--text);
  text-decoration:none;
  font-size:1.05rem;
}
.nav ul{
  list-style:none;
  display:flex;
  gap:0.5rem;
  margin:0;
  padding:0;
}
.nav a{
  color:var(--muted);
  text-decoration:none;
  padding:0.6rem 0.8rem;
  border-radius:8px;
  transition:all var(--transition);
  font-weight:600;
  font-size:0.95rem;
}
.nav a:hover{ color:var(--text); background:var(--glass); transform:translateY(-2px)}

/* Nav toggle (mobile) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:0.5rem;
  cursor:pointer;
}
.hamburger{
  width:22px;
  height:2px;
  background:var(--text);
  display:block;
  position:relative;
}
.hamburger::before, .hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:var(--text);
}
.hamburger::before{ top:-7px }
.hamburger::after{ top:7px }

/* Hero */
.hero{
  padding-top:3rem;
  padding-bottom:3rem;
}
.hero-inner{
  display:flex;
  gap:2rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* Hero text */
.hero-text{ max-width:640px }
.name{ font-size:clamp(1.6rem, 4vw, 2.8rem); margin:0; font-weight:800 }
.accent{ color:var(--accent) }
.role{ margin:0.3rem 0; color:var(--muted); font-weight:600; font-size:1.05rem }
.tagline{ color:var(--muted); margin-top:0.75rem; max-width:48ch }

/* Buttons */
.btn{
  background:var(--accent);
  color:white;
  text-decoration:none;
  padding:0.6rem 0.9rem;
  border-radius:10px;
  display:inline-block;
  font-weight:700;
  transition:transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 6px 18px rgba(37,99,235,0.12);
  margin-right:0.6rem;
}
.btn:hover{ transform:translateY(-3px) }
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
}

/* Hero illustration */
.hero-card{
  width:240px;
  height:240px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  transition:transform var(--transition);
}
.hero-card:hover{ transform:translateY(-8px) }

/* Animated dots in SVG */
@keyframes pulse-dot {
  0%, 100% { r:3; opacity:1 }
  50% { r:6; opacity:0.5 }
}
.dot-animate {
  animation:pulse-dot 2s ease-in-out infinite;
}

/* Sections */
.section{ padding:3rem 0 }
.section-title{
  font-size:1.25rem;
  margin:0 0 0.75rem 0;
  font-weight:800;
}
.section-sub{ color:var(--muted); margin-bottom:1.25rem; }

/* About */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.profile-picture{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.1);
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
  height:280px;
  transition:box-shadow var(--transition), transform var(--transition);
  cursor:pointer;
}
.profile-picture:hover{
  box-shadow:0 0 30px rgba(37,99,235,0.6), 0 0 60px rgba(37,99,235,0.3);
  transform:scale(1.02);
}
.profile-picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:filter var(--transition);
}
.profile-picture:hover img{
  filter:grayscale(100%) brightness(1.1);
}
.about-bio p{ margin:0 0 0.9rem 0 }
.about-details ul{ list-style:none; padding:0; margin:0; color:var(--muted) }
.about-details li{ padding:0.35rem 0 }

/* Skills */
.skills-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.skill{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:0.9rem;
  border-radius:12px;
  transition:transform var(--transition);
}
.skill:hover{ transform:translateY(-6px) }
.skill-head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem }
.skill-head h3{ margin:0; font-size:1rem }
.skill-percent{ color:var(--muted); font-weight:700 }
.skill-icon{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(255,255,255,0.02) }

/* Progress bar */
.skill-bar{
  background:rgba(255,255,255,0.03);
  height:10px;
  border-radius:999px;
  margin-top:0.6rem;
  overflow:hidden;
}
.skill-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent), #7c3aed);
  border-radius:inherit;
  transition:width 900ms cubic-bezier(.2,.9,.2,1);
}

/* Hobbies */
.hobbies-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.7rem;
}
.hobby-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:0.75rem;
  border-radius:12px;
  text-align:center;
  transition:all var(--transition);
  border:1px solid rgba(255,255,255,0.05);
}
.hobby-card:hover{
  transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(37,99,235,0.1), rgba(37,99,235,0.05));
  border-color:rgba(37,99,235,0.3);
  box-shadow:0 6px 16px rgba(37,99,235,0.15);
}
.hobby-icon{
  font-size:1.8rem;
  margin-bottom:0.4rem;
  display:inline-block;
  transition:transform var(--transition);
}
.hobby-card:hover .hobby-icon{
  transform:scale(1.15) rotate(10deg);
}
.hobby-card h3{
  margin:0.3rem 0;
  font-size:0.95rem;
  font-weight:700;
}
.hobby-card p{
  margin:0.3rem 0 0 0;
  font-size:0.85rem;
  color:var(--muted);
}

/* Projects */
.project-filters{ display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap }
.filter-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  padding:0.45rem 0.7rem;
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;
  font-weight:700;
}
.filter-btn.active{ border-color:var(--accent); color:var(--text); background:rgba(37,99,235,0.06) }

.projects-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.project-card{
  display:flex;
  gap:1rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:1rem;
  border-radius:12px;
  align-items:flex-start;
  transition:transform var(--transition);
}
.project-card:hover{ transform:translateY(-8px) }
.project-meta{ font-size:0.9rem; color:var(--muted) }
.project-actions{ margin-top:0.6rem; display:flex; gap:0.5rem; }

/* Timeline */
.timeline{ display:flex; flex-direction:column; gap:1rem }
.timeline-item{ display:flex; gap:1rem; align-items:flex-start }
.time{ font-weight:700; color:var(--muted); min-width:110px }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.contact-form{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:1rem;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:0.65rem;
}
.contact-form label{ display:block; font-size:0.9rem }
.contact-form input, .contact-form textarea{
  width:100%;
  padding:0.6rem 0.75rem;
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;
  color:var(--text);
}
.form-actions{ display:flex; gap:1rem; align-items:center }
.form-status{ color:var(--muted) }

/* Contact card */
.contact-card{ background:rgba(255,255,255,0.02); padding:1rem; border-radius:12px }
.social-links{ list-style:none; padding:0; margin:0; display:flex; gap:0.6rem; flex-direction:column }
.social-links a{ 
  color:var(--accent); 
  text-decoration:none; 
  font-weight:700;
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 0.75rem;
  border-radius:8px;
  transition:all var(--transition);
  position:relative;
}
.social-links a::before{
  content:'';
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
.social-links a.github-icon::before{ content:'🔗' }
.social-links a.linkedin-icon::before{ content:'in' }
.social-links a.email-icon::before{ content:'✉️' }
.social-links a.whatsapp-icon::before{ content:'💬' }
.social-links a:hover{
  background:rgba(37,99,235,0.15);
  transform:translateX(8px);
  box-shadow:0 4px 12px rgba(37,99,235,0.2);
}
.social-links a:active{
  transform:scale(0.98);
}

/* Icon-specific animations */
@keyframes float {
  0%, 100% { transform:translateY(0px) }
  50% { transform:translateY(-4px) }
}
.social-links a.github-icon{
  animation:float 3s ease-in-out infinite;
}
.social-links a.linkedin-icon{
  animation:float 3.5s ease-in-out 0.5s infinite;
}
.social-links a.email-icon{
  animation:float 4s ease-in-out 1s infinite;
}
.social-links a.whatsapp-icon{
  animation:float 3s ease-in-out 1.5s infinite;
}

@keyframes slideIn {
  0% { opacity:0; transform:translateX(-20px) }
  100% { opacity:1; transform:translateX(0) }
}
.social-links li:nth-child(1) { animation:slideIn 0.5s ease-out }
.social-links li:nth-child(2) { animation:slideIn 0.5s ease-out 0.1s both }
.social-links li:nth-child(3) { animation:slideIn 0.5s ease-out 0.2s both }
.social-links li:nth-child(4) { animation:slideIn 0.5s ease-out 0.3s both }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,0.03); padding:1.2rem 0; margin-top:2rem }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem }

/* Scroll top button */
.scroll-top{
  position:fixed;
  right:1rem;
  bottom:1.2rem;
  background:var(--accent);
  color:white;
  width:44px;
  height:44px;
  border-radius:10px;
  border:0;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(37,99,235,0.18);
}

/* Responsive layout rules */
@media (min-width:700px){
  .about-grid{ grid-template-columns:280px 1fr }
  .skills-grid{ grid-template-columns:repeat(2,1fr) }
  .hobbies-grid{ grid-template-columns:repeat(2,1fr) }
  .projects-grid{ grid-template-columns:repeat(2,1fr) }
  .contact-grid{ grid-template-columns:1fr 320px }
  .timeline-item{ gap:2rem }
}

@media (min-width:1100px){
  .hero-inner{ flex-wrap:nowrap }
}

/* Mobile nav */
@media (max-width:820px){
  .nav{ position:fixed; inset:0; background:linear-gradient(180deg, rgba(2,6,23,0.95), rgba(2,6,23,0.99)); display:flex; align-items:center; justify-content:center; transform:translateY(-120%); transition:transform 250ms; z-index:70 }
  .nav.open{ transform:translateY(0) }
  .nav ul{ flex-direction:column; gap:0.25rem }
  .nav a{ font-size:1.2rem; padding:0.9rem 1.1rem }
  .nav-toggle{ display:block }
  .header-inner{ padding:0.6rem 0 }
  .container{ padding-left:1rem; padding-right:1rem }
}

/* Accessibility focus */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid rgba(37,99,235,0.16);
  outline-offset:2px;
  border-radius:6px;
}

/* Small helper */
.small{ color:var(--muted); font-size:0.95rem }