/* Updated styles.css — includes About section styles and base styles */
:root{
  --bg:#0d070f;
  --panel:#151017;
  --accent1:#ff2be2;
  --accent2:#63f0ff;
  --muted:#a99ab0;
  --glass: rgba(255,255,255,0.04);
  --radius:28px;
  --max-width:1200px;
  --theme-transition: 320ms;
  --theme-ease: cubic-bezier(.2,.8,.2,1);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* --- Light Theme Variables --- */
html.light {
  --bg: #f4f6fc;
  --panel: #ffffff;
  --accent1: #e60073;
  --accent2: #007bff;
  --muted: #6a738b;
  --glass: rgba(0,0,0,0.03);
  color-scheme: light;
}

html{
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(circle at 10% 20%, rgba(90,34,106,0.45), transparent 12%),
              radial-gradient(circle at 90% 60%, rgba(108,35,207,0.25), transparent 10%),
              var(--bg);
  color: #e1e1e1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition: background-color var(--theme-transition) var(--theme-ease),
              color var(--theme-transition) var(--theme-ease),
              background calc(var(--theme-transition) + 80ms) var(--theme-ease);
}


/* container */
.container{
  width:92%;
  max-width:var(--max-width);
  margin:0 auto;
  
 
  border-radius:4
}

/* topbar */
.topbar{
  position:sticky;
  top:20px;
  z-index:50;
  padding:10px 0;
}
.topbar .container{display:flex;align-items:center;gap:20px}
.brand{font-weight:900;font-size:28px;letter-spacing:1px;transition: color .25s ease}
.nav{display:flex;gap:24px; margin-left:40px}
.brand:hover, .brand:focus-visible{ color: var(--accent1); outline: none; }
.nav a{position:relative;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;padding:6px 2px;transition:color .2s ease}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));opacity:0;transform:translateY(4px) scaleX(0.4);transform-origin:left center;transition:transform .25s ease,opacity .25s ease}
.nav a:hover{color:#fff}
.nav a:focus-visible{outline:none;color:#fff}
.nav a:hover::after,.nav a:focus-visible::after{opacity:1;transform:translateY(0) scaleX(1)}
.controls{margin-left:auto;display:flex;align-items:center;gap:16px}
.theme-toggle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
#toggle{
  width:36px;height:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(90deg, rgba(255,43,206,0.2), rgba(99,240,255,0.1));
  position:relative;cursor:pointer;
}
#toggle::after{
  content:'';position:absolute;width:12px;height:12px;border-radius:50%;top:2px;left:2px;background:#fff;transition:all .25s;
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
}
.light #toggle::after{left:22px;background:#ff2be2}

/* Smooth theme transition utility */
html.theme-transition, html.theme-transition * , html.theme-transition *::before, html.theme-transition *::after{
  transition: background-color var(--theme-transition) var(--theme-ease),
              color var(--theme-transition) var(--theme-ease),
              border-color var(--theme-transition) var(--theme-ease),
              box-shadow var(--theme-transition) var(--theme-ease),
              fill var(--theme-transition) var(--theme-ease),
              stroke var(--theme-transition) var(--theme-ease) !important;
}
@media (prefers-reduced-motion: reduce){
  html.theme-transition, html.theme-transition * , html.theme-transition *::before, html.theme-transition *::after, html, body{
    transition: none !important;
  }
}

/* CTA */
.btn-cta{display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:10px 20px;border-radius:28px;color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.2);font-weight:700}

/* HERO */
.hero{padding:60px 0;min-height:100vh;display:flex;align-items:center}
.hero-inner{display:flex;align-items:center;gap:20px}
.hero-left{flex:1}
.hero-right{flex:1;position:relative;height:550px}
.big-name{font-size:180px;line-height:0.85;margin:0 0 20px;font-weight:900;letter-spacing:-2px; color: #fff;}
.tagline{max-width:460px;color:var(--muted);border-left:2px solid rgba(255,255,255,0.06);padding-left:16px;margin-top:20px;font-size:20px;line-height:1.6}

/* CV pill */
.cv-pill{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:14px 18px;border-radius:50px;background:linear-gradient(90deg,var(--accent1),#b35fff2e);color:#fff;text-decoration:none;font-weight:700}
.cv-pill .icon{background:rgba(255,255,255,0.12);padding:6px 8px;border-radius:50%}

/* blobs */
.glow-blob{position:absolute;border-radius:50%;filter:blur(20px);mix-blend-mode:screen;box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.glow-blob.large{right:-150px;bottom:-50px;width:700px;height:700px;background:radial-gradient(circle at 30% 30%, var(--accent2), var(--accent1));}
.glow-blob.small{right:100px;top:40px;width:200px;height:200px;background:linear-gradient(90deg,var(--accent1),var(--accent2))}

/* social stack */
.social-stack{
  position:absolute;
  right:12px;
  top:140px;
  display:flex;
  flex-direction:column;
  gap:22px; /* slightly bigger gap */
}

/* social icons – increased size */
.social{
  width:62px;
  height:62px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--glass);
  text-decoration:none;
  color:#000;
  font-weight:700;
  font-size:26px;          /* icon/text size */
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  transition:transform .2s ease;
}

/* SKILLS */
.skills{padding:60px 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.section-title{font-size:140px;margin:0 0 50px;font-weight:800;line-height:0.9; color: #fff;}
.skills-grid{display:flex;gap:60px}
.skills-column{flex:1}
.skill-row{display:flex;align-items:center;gap:20px;margin:24px 0}
.skill-name{width:180px;color:var(--muted);font-size:18px; font-weight: 500;}
.dots{display:grid;grid-template-columns:repeat(8,20px);gap:12px}
.dots span{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.06)}
.dots span.active{background:var(--accent1);box-shadow:0 6px 12px rgba(255,43,230,0.18)}

/* PROJECTS */
.projects{padding:60px 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.projects-list{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
.project-card{display:flex;gap:30px;align-items:center;background:transparent}
.project-media{width:320px;height:200px;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.project-media.placeholder{background:var(--panel);color:var(--muted);font-weight:700;font-size:18px}
.project-info h3{margin:0;font-size:32px; color: #fff;}
.project-info .date{color:var(--muted);margin-top:8px;font-size:16px}

/* Compact project list (title + GitHub link only) */
.project-list-compact{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.project-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-radius:16px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.06);
}
.project-title{margin:0;font-size:22px;color:#fff;font-weight:800}
.project-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent2);text-decoration:none;font-weight:800;padding:10px 14px;border-radius:12px}
.project-link:hover{background:rgba(255,255,255,0.06)}

/* CONTACT */
/* CONTACT */
.contact{padding:60px 0 120px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center}
.contact-form{max-width:740px}
.contact-form label{display:block;margin:16px 0 10px;color:var(--muted);font-size:16px;font-weight:600}
.contact-form input, .contact-form textarea{
  width:100%;padding:20px;border-radius:28px;border:none;background:var(--glass);color:#fff;outline:none;font-size:16px;resize:vertical;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.02);
}
.contact-form textarea{height:180px}
.btn-submit{margin-top:24px;padding:16px 28px;border-radius:28px;background:linear-gradient(90deg,var(--accent1),#b35fff);border:none;color:#fff;font-weight:700;font-size:16px;cursor:pointer}

/* decorative arc */
.contact-art .large-arc{width:420px;height:420px;border-radius:50%;background:conic-gradient(from 180deg,#0000, rgba(255,43,206,0.8));opacity:0.9;transform:translateX(40px)}

/* footer */
.site-footer{padding:24px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:40px; position: relative; z-index: 2}
.site-footer .small{display:flex;justify-content:center;color:var(--muted)}

/* elevate main content above background effect */
main{ position: relative; z-index: 2 }

/* --- PORTFOLIO DESIGN --- */
.portfolio-design{padding:60px 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.portfolio-design .section-title{ text-align:center; }
.section-subtitle{margin:8px auto 10px; text-align:center; color: var(--muted); max-width:780px; font-size:20px}

.pd-grid{
  margin-top:28px;
  background: var(--glass);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:22px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:22px;
}

.pd-card{
  background: transparent;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.pd-card.small .pd-thumb{ height:120px; }

.pd-thumb{
  height:160px;
  border-radius:12px;
  background: 
              var(--panel);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  /* hover motion base */
  transform: translate3d(0,0,0);
  transition: transform var(--theme-transition) var(--theme-ease),
              box-shadow var(--theme-transition) var(--theme-ease);
  will-change: transform, box-shadow;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24);
}

/* Coming-out hover effect */
.pd-card:hover .pd-thumb,
.pd-thumb:hover{
  transform: translate3d(8px,-8px,0);
  box-shadow: 0 16px 40px rgba(0,0,0,0.38);
}
@media (prefers-reduced-motion: reduce){
  .pd-card:hover .pd-thumb, .pd-thumb:hover{ transform:none; }
}

.pd-thumb span{ color:#111; background:#e5e7eb; border-radius:10px; padding:6px 10px; font-weight:700; font-size:12px }
.pd-thumb span{ color:#111; background:#e5e7eb; border-radius:10px; padding:6px 10px; font-weight:700; font-size:12px }

.pd-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px }
.pd-tag{ color: var(--muted); font-size:13px; font-weight:700; letter-spacing:.4px }
.pd-name{ display:inline-flex; align-items:center; gap:8px; color: var(--accent2); text-decoration:none; font-weight:800; padding:8px 10px; border-radius:10px }
.pd-name:hover{ background: rgba(255,255,255,0.06) }
.pd-name ion-icon{ font-size:18px }

/* ===== About section styling (updated to match wireframe) ===== */
.about{
  padding:80px 0;
  min-height:90vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:visible;
}

/* layout container inside about */
.about-inner{
  display:flex;
  align-items:center;
  gap:80px;
  width:100%;
}

/* left column with image */
.about-left{
  flex:0 0 48%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:540px;
}

/* circular mask wrapper */
.about-circle-mask{
  width:520px;
  height:520px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 600px at 20% 40%, rgba(99,240,255,0.06), rgba(255,43,230,0.02));
  box-shadow: inset 0 10px 60px rgba(0,0,0,0.6), 0 30px 70px rgba(0,0,0,0.5);
  z-index:2;
}

/* the actual image should cover the circle */
.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  mix-blend-mode: normal;
  filter: saturate(1.05) contrast(1.02);
}

/* soft glowing circle behind image */
.glow-circle, .about-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

/* subtle large glow behind the circular image */
.glow-circle{
  width:560px;
  height:560px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle at 30% 30%, rgba(99,240,255,0.14), rgba(255,43,230,0.12) 40%, transparent 60%);
  filter: blur(36px);
  z-index:1;
  opacity:0.9;
}

/* small floating orb that sits bottom-left of the circle */
.about-orb{
  width:88px;
  height:88px;
  left:-24px;
  bottom:36px;
  background: radial-gradient(circle at 35% 35%, var(--accent2), var(--accent1));
  box-shadow: 0 12px 36px rgba(99,240,255,0.08);
  z-index:3;
  filter: blur(6px);
}

/* huge "About me" title overlay (top-right of the left column) */
.about-title-overlay{
  position:absolute;
  right:-40px;
  top:-18px;
  font-size:132px;
  line-height:0.85;
  margin:0;
  font-weight:900; 
  color:#fff;
  z-index:20;
  text-align:right;
  letter-spacing:-2px;
  text-shadow: 0 12px 40px rgba(0,0,0,0.7);
  transform: translateY(-6px);
  pointer-events:none;
}

/* right column content */
.about-right{
  flex:1;
  padding-left:20px;
  max-width:640px;
}

/* paragraph copy */
.about-text{
  color:var(--muted);
  line-height:1.9;
  margin-bottom:36px;
  font-size:18px;
  letter-spacing:0.4px;
}


/* CTA button */
.btn-contact{
  display:inline-block;
  padding:14px 44px;
  border-radius:40px;
  background: linear-gradient(135deg, var(--accent1), #ff2a9b);
  color:#fff;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  box-shadow: 0 14px 32px rgba(255,43,206,0.16);
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn-contact:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(255,43,206,0.24); }

/* decorative magenta arrow on the right */
.about-arrow{
  position:absolute;
  right:6%;
  top:12%;
  font-size:100px;
  color:var(--accent1);
  transform: translateY(-10%);
  filter: drop-shadow(0 10px 20px rgba(255,43,206,0.08));
  z-index:40;
  opacity:0.98;
}

/* subtle vignette to match wireframe */
.about::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 400px at 92% 50%, rgba(108,35,207,0.12), transparent 20%);
  pointer-events:none;
}
.project-media img{
  height:100%;
  width:100%;

}

/* --- Light Theme Overrides --- */
html.light body{
  background: var(--bg);
  color: #2c3e50;
}
html.light .brand,
html.light .big-name,
html.light .section-title,
html.light .project-info h3,
html.light .about-title-overlay {
  color: #1f2937;
}
html.light .nav a{
  color: #4a5568;
}
html.light .nav a:hover,
html.light .nav a:focus-visible{color:#111827}
html.light .tagline,
html.light .about-text {
  color: #4a5568;
}
html.light .project-row{border-color:rgba(0,0,0,0.06);background:var(--glass)}
html.light .project-title{color:#1f2937}
html.light .dots span{
  background:rgba(0,0,0,0.06);
}
html.light .contact-form input, 
html.light .contact-form textarea{
  color: #1f2937;
}

/* Typewriter (hero tagline) */
.text-type{ display:inline-block; white-space:pre-wrap; }
.text-type__cursor{ margin-left:0.25rem; display:inline-block; animation: text-cursor-blink 1s steps(2, start) infinite; }
@keyframes text-cursor-blink{ to{ visibility:hidden; } }

/* AOS accessibility fallbacks: if animations are disabled, show content */
@media (prefers-reduced-motion: reduce){
  [data-aos]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
body.aos-disabled [data-aos]{
  opacity: 1 !important;
  transform: none !important;
}

/* responsive adjustments */
@media (max-width:1100px){
  .about-inner{gap:36px}
  .about-circle-mask{width:420px;height:420px; transform: translateX(0); }
  .about-title-overlay{font-size:96px; right:-10px}
  .about-arrow{right:4%; font-size:44px}
  .about-orb{width:64px;height:64px;left:6px;bottom:18px}
}

@media (max-width:820px){
  .about-inner{flex-direction:column-reverse;align-items:center}
  .about-left{flex-basis:auto;height:360px;margin-bottom:24px}
  .about-circle-mask{width:320px;height:320px}
  .about-title-overlay{position:relative;right:auto;top:auto;text-align:left;font-size:64px;margin-bottom:8px}
  .about-arrow{display:none}
  .about-right{padding-left:0}
}

/* responsive */
@media (max-width:900px){
  .big-name{font-size:64px}
  .hero-inner{flex-direction:column}
  .projects-list{grid-template-columns:1fr}
  .project-row{padding:14px 16px}
  .project-title{font-size:18px}
  .contact-grid{grid-template-columns:1fr}
  .social-stack{display:none}
}

.github a{
  border-radius:30px;
  height:100%;
  width:100%;

}

/* === Responsive enhancements (added) === */
/* Fluid, scalable typography overrides */
.big-name{ font-size: clamp(48px, 12vw, 180px); }
.section-title{ font-size: clamp(32px, 9vw, 140px); }
.tagline{ font-size: clamp(16px, 2.2vw, 20px); }

/* Make media scale by default */
img, video, canvas{ max-width:100%; height:auto; }

/* Very large screens */
@media (min-width:1600px){
  .hero-right{ height:640px; }
  .glow-blob.large{ width:820px; height:820px; right:-200px; bottom:-80px; }
}

/* Desktops / laptops */
@media (max-width:1200px){
  .hero-right{ height:520px; }
  .skills-grid{ gap:40px; }
}

@media (max-width:1024px){
  .nav{ gap:16px; margin-left:24px; }
  .project-media{ width:280px; height:180px; }
}

/* Tablets */
@media (max-width:768px){
  .topbar{ top:12px; }
  .topbar .container{ flex-wrap:wrap; row-gap:10px; }
  .brand{ font-size:24px; }
  .nav{ order:3; width:100%; justify-content:center; flex-wrap:wrap; gap:12px; }
  .controls{ margin-left:0; }
  #toggle{ width:32px; height:16px; }
  #toggle::after{ width:10px; height:10px; }
  .light #toggle::after{ left:18px; }

  .hero{ padding:44px 0; }
  .hero-inner{ gap:12px; }
  .hero-right{ height:420px; }
  .glow-blob.large{ right:-220px; width:520px; height:520px; }
  .glow-blob.small{ right:40px; top:20px; width:140px; height:140px; }

  .skills-grid{ flex-direction:column; gap:24px; }
  .skill-name{ width:140px; font-size:16px; }
  .dots{ grid-template-columns:repeat(8,18px); gap:10px; }
  .dots span{ width:14px; height:14px; }

  .project-row{ gap:12px; padding:12px 14px; }
  .project-title{ font-size:20px; }

  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-art .large-arc{ width:360px; height:360px; transform:none; margin:0 auto; }
}

/* Large phones / small tablets */
@media (max-width:600px){
  .container{ width:94%; }
  .theme-toggle span{ display:none; }
  .btn-cta, .cv-pill{ padding:10px 14px; font-size:14px; }
  .cv-pill .icon{ padding:4px 6px; }
  .tagline{ padding-left:12px; }

  .hero-right{ height:360px; }
  .glow-blob.large, .glow-blob.small{ display:none; }

  .about-left{ height:320px; }
  .about-circle-mask{ width:280px; height:280px; }
  .about-title-overlay{ font-size:54px; margin-bottom:6px; }
}

/* Small phones */
@media (max-width:480px){
  .brand{ font-size:22px; }
  .nav a{ font-size:12px; }
  .topbar .container{ gap:12px; }

  .hero{ padding:32px 0; }
  .hero-right{ height:300px; }
  .cv-pill{ gap:10px; }

  .section-title{ letter-spacing:-0.5px; }
  .skill-row{ gap:14px; }
  .skill-name{ width:120px; font-size:15px; }
  .dots{ grid-template-columns:repeat(8,16px); gap:8px; }
  .dots span{ width:12px; height:12px; }

  .project-link span{ display:none; }
  .contact-form input, .contact-form textarea{ padding:16px; }
}

/* Very small devices (e.g., 360–375px) */
@media (max-width:375px){
  .big-name{ font-size: clamp(40px, 14vw, 64px); }
  .section-title{ font-size: clamp(28px, 10vw, 56px); }
  .brand{ font-size:20px; }
  .btn-cta{ padding:8px 12px; font-size:13px; }
}