/* ==================== FULL styles.css (larger avatar, uniform full-page sections) ==================== */

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg-dark-1: #0a0f1c;
  --bg-dark-2: #111d2f;
  --nav-height: 72px;
  --accent-a: #00c6ff;
  --accent-b: #0072ff;
  --muted: #b3c0c9;
  --divider-height: 4px;           /* main fixed divider thickness */
  --divider-bottom-offset: 2px;    /* adjust to make avatar feet sit on line */
  --max-width: 1400px;
}

/* ---------- GLOBAL ---------- */
html { scroll-behavior: smooth; height:100%; }
body{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-dark-1),var(--bg-dark-2));
  color: #fff;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
  overflow-x:hidden;
}

/* ---------- NAVBAR ---------- */
nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  padding: 14px 8%;
  height: var(--nav-height);
  background: linear-gradient(180deg, #061018, #071421);
  z-index: 1100;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(0,198,255,0.06);
}

.nav-links {
  display: flex;
  gap: 60px; /* increased from 40px */
  list-style: none;
}

.logo{ font-weight:800; font-size:20px; }
.logo span{ color:var(--accent-a); }
.nav-links a{ color:#fff; text-decoration:none; font-weight:600; padding:6px 8px; border-radius:6px; }
.nav-links a:hover{ color:var(--accent-a); background: rgba(0,198,255,0.03); }

/* ---------- GLOBAL FIXED DIVIDER (bottom of viewport) ---------- */
/* Add: <div class="global-divider"></div> before </body> in each page */
.global-divider{
  position:fixed;
  left:0; right:0;
  bottom:0;
  height:var(--divider-height);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,255,0.6) 18%,
    rgba(0,198,255,1) 50%,
    rgba(0,255,255,0.6) 82%,
    transparent 100%);
  box-shadow: 0 -6px 40px rgba(0,198,255,0.35);
  pointer-events:none;
  z-index:20;
}

/* ---------- SECTION BASE (viewport aware) ---------- */
/* exact viewport height used so no bottom gap: 100vh - nav - divider */
section{
  position:relative;
  width:100%;
  min-height: calc(100vh - var(--nav-height) - var(--divider-height));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

/* helper to vertically center content inside a section */
.center-vert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* wrapper for content */
.section-inner{
  width:100%;
  max-width:var(--max-width);
  padding:28px 8%;
  box-sizing:border-box;
}

/* subtle top divider for non-hero sections so they feel separated */
section:not(.hero)::before{
  content:"";
  position:absolute;
  top:-18px; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.22), rgba(0,198,255,0.25), rgba(0,255,255,0.22), transparent);
  box-shadow:0 0 10px rgba(0,198,255,0.06);
  z-index:2;
  pointer-events:none;
}

/* ---------- HERO LAYOUT (stretched across) ---------- */
.hero{
  padding-top:var(--nav-height);
  overflow:visible;
}

/* hero container reserves right space for avatar on desktop */
.hero-container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:36px;
  padding-left:8%;
  padding-right: calc(8% + 420px); /* slightly larger reserve for bigger avatar */
  box-sizing:border-box;
  position:relative;
  z-index:5;
}

.hero-text{
  flex:1 1 60%;
  max-width:900px;
  color:#fff;
}

.animated-text{
  font-size: clamp(36px, 6.2vw, 64px);
  font-weight:800;
  line-height:1.02;
  margin-bottom:8px;
}
.animated-text span{ color:var(--accent-a); }

.typing-text{
  color:var(--muted);
  font-weight:600;
  font-size: clamp(14px,1.6vw,20px);
  min-height:32px;
  margin-bottom:12px;
}
.typing-text::after{ content:"|"; color:var(--accent-a); margin-left:6px; animation:blink 0.8s infinite; }
@keyframes blink{0%,50%,100%{opacity:1}25%,75%{opacity:0}}

/* CTA */
.cta{
  display:inline-block;
  margin-top:18px;
  padding:12px 28px;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  color:#fff; border-radius:28px; text-decoration:none; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,198,255,0.12); }

/* ---------- PARTICLES ---------- */
.particle-container{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.particle{ position:absolute; border-radius:50%; background: radial-gradient(circle, var(--accent-a), transparent); opacity:.78; will-change:transform,opacity; animation: moveParticle linear infinite alternate; }
@keyframes moveParticle {
  0% { transform: translate(0,0) scale(var(--scale,1)); opacity: 0.9; }
  50% { transform: translate(calc(var(--xEnd)/2), calc(var(--yEnd)/2)) scale(var(--scale,1)); opacity: 1; }
  100% { transform: translate(var(--xEnd), var(--yEnd)) scale(var(--scale,1)); opacity: 0.7; }
}

/* ---------- AVATAR (fixed & toggled visible only when home visible) ---------- */
/* The avatar is fixed (attached to divider) but hidden by default; .visible toggles visibility */
/* UPDATED: larger sizing for stronger hero presence */
.hero-avatar{
  position:fixed;
  right:5%;
  bottom: calc(var(--divider-height) - var(--divider-bottom-offset));
  width: clamp(500px, 42vw, 700px); /* <- increased: min 500px, ideal 42vw, max 700px */
  height:auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-right: 40px;
  z-index:25;
  pointer-events:none;

  opacity:0;
  transform: translateY(12px) scale(0.995);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.9,.3,1);
}
.hero-avatar.visible{
  opacity:1;
  transform: translateY(0) scale(1);
}
.hero-avatar img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  filter: drop-shadow(0 14px 40px rgba(0,120,220,0.12));
  transform-origin: center bottom;
}

/* Mobile: avatar becomes absolute inside the hero area and is visible */
@media (max-width:900px){
  .hero-container{ padding-right:8%; }
  .hero-avatar{
    position:absolute;
    right:5%;
    top:6%;
    bottom:auto;
    width: clamp(260px, 46vw, 380px); /* mobile-friendly clamp increased */
    transform: translateY(0);
    z-index:6;
    opacity:1;
  }
}

/* --- Responsive Fix for Mobile View --- */
/* --- Hybrid Scaling: Desktop layout that smoothly scales down on smaller screens --- */
body {
  transform-origin: top center;
}

/* Slightly scale for large laptops */
@media (max-width: 1200px) {
  body {
    transform: scale(0.9);
  }
}

/* Moderate scale for tablets */
@media (max-width: 992px) {
  body {
    transform: scale(0.82);
  }
}

/* Scale further for typical mobile screens */
@media (max-width: 768px) {
  body {
    transform: scale(0.78);
  }
}

/* Very small devices */
@media (max-width: 480px) {
  body {
    transform: scale(0.68);
  }
}

/* ---------- PROJECTS ---------- */
/* Make Projects layout behave like Hero: vertically centered and full-viewport */
.projects{
  background:#0c1323;
}
.projects .section-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  height:100%;
  padding-top: 20px;
  padding-bottom: 20px;
}
.section-title{
  font-size: clamp(28px,4vw,40px);
  font-weight:800;
  text-align:center;
  margin-bottom:40px;
  color:#fff;
}
.project-grid{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
  align-self:center;
}
.project-card{
  background: rgba(255,255,255,0.03);
  padding:26px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.04);
  transition: transform .28s ease, background .28s ease;
}
.project-card:hover{ transform: translateY(-8px); background: rgba(0,198,255,0.05); }

/* ---------- ABOUT ---------- */
/* Make About behave like Hero: centered, full-viewport */
.about{
  background: linear-gradient(180deg,#0b1220,#09101a);
}
.about .section-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
}
.about-inner{ max-width:1100px; margin:0 auto; text-align:left; }
.about-text{ color:#cbd7e0; margin-bottom:20px; font-size:clamp(15px,1.4vw,18px); }
.about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }

/* ---------- CONTACT (kept shorter, centered content) ---------- */
.contact{
  background: linear-gradient(180deg,#08101a,#060b12);
  /* keep standard centered layout but not full-viewport height */
  padding: 80px 0;
}
.contact .section-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  max-width:900px;
  margin:0 auto;
}

/* ---------- FOOTER ---------- */
footer{ padding:26px 8%; text-align:center; background:#060913; color:#7e8a96; font-size:14px; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: linear-gradient(180deg,var(--bg-dark-1),var(--bg-dark-2)); }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,var(--accent-a),var(--accent-b)); border-radius:10px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){ :root{ --max-width:1100px; } }
@media (max-width:900px){
  nav{ padding:12px 6%; height:64px; }
  section{ min-height: calc(100vh - 64px - var(--divider-height)); }
  .hero-avatar{ width: clamp(260px, 46vw, 380px); right:5%; top:6%; position:absolute; }
  .hero-container{ padding-right:8%; padding-left:6%; gap:20px; }
  .animated-text{ font-size: clamp(26px,6.8vw,40px); }
  .project-grid{ gap:20px; width:100%; }
}