/* style.css
   Theme, layout, crystal buttons, fades, profile picture, responsive
*/

/* ========== Variables ========== */
:root{
  --bg-dark: #071029;
  --panel-dark: #0b1320;
  --glass: rgba(255,255,255,0.03);
  --muted: #9aa4b2;
  --accent-1: #4fd1c5;
  --accent-2: #2b6cb0;
  --text-light: #e6eef6;

  --max-width: 1100px;
}

/* Light theme vars (body.light class toggles) */
body.light{
  --bg-dark: #f5f7fb;
  --panel-dark: #ffffff;
  --glass: rgba(2,6,23,0.04);
  --muted: #6b7280;
  --text-light: #0b1320;
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;color:var(--text-light);background:linear-gradient(180deg,var(--bg-dark), #071833);-webkit-font-smoothing:antialiased}
a{color:inherit}
.container{max-width:var(--max-width);margin:36px auto;padding:20px}

/* ========== Topbar / Header ========== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#042029;font-weight:800;box-shadow:0 10px 30px rgba(11,19,32,0.6)}
h1{margin:0;font-size:28px}
.subtitle{color:var(--muted);font-size:14px}

/* ========== Layout ========== */
.grid{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-top:22px}
.card{background:var(--panel-dark);border-radius:14px;padding:18px;box-shadow:0 6px 24px rgba(2,6,23,0.6);backdrop-filter: blur(6px)}
.avatar{width:100%;height:220px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;overflow:hidden;position:relative}

/* Profile picture */
.profile-pic{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:10px;
  transition: transform .5s ease, box-shadow .5s ease, filter .4s ease;
  box-shadow: 0 10px 30px rgba(43,108,176,0.15);
  transform-origin:center;
}
.profile-pic:hover{
  transform: scale(1.04) rotate(-0.5deg);
  box-shadow: 0 18px 40px rgba(79,209,197,0.18);
  filter: saturate(1.06) brightness(1.02);
}

/* ========== Meta / Skills ========== */
.meta{margin-top:12px;font-size:14px}
.section-title{display:flex;align-items:center;justify-content:space-between}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:8px 10px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,0.02)}

/* ========== Timeline / Jobs ========== */
.timeline{margin-top:12px}
.job{padding:12px;border-left:3px solid rgba(255,255,255,0.03);margin-bottom:10px}
.job h4{margin:0 0 6px 0}
.muted{color:var(--muted)}

/* ========== Buttons (Crystal) ========== */
.button, .crystal-btn {
  --shineX: 50%;
  --shineY: 50%;
  position:relative;
  display:inline-block;
  padding:12px 20px;
  border-radius:12px;
  color:#042029;
  font-weight:700;
  text-decoration:none;
  overflow:hidden;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 8px 30px rgba(43,108,176,0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* moving sheen */
.button::before, .crystal-btn::before {
  content: "";
  position: absolute;
  left: calc(var(--shineX) - 150%);
  top: calc(var(--shineY) - 150%);
  width: 300%;
  height: 300%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0.15), transparent 40%);
  transform: translate3d(0,0,0);
  pointer-events:none;
  mix-blend-mode: overlay;
  transition: left .12s linear, top .12s linear;
}

/* soft glass outline */
.button::after, .crystal-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events:none;
}

/* hover */
.button:hover, .crystal-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(43,108,176,0.25) }

/* tiny glowing pulse animation */
@keyframes pulseGlow {
  0% { box-shadow: 0 8px 30px rgba(43,108,176,0.12) }
  50% { box-shadow: 0 20px 60px rgba(79,209,197,0.12) }
  100% { box-shadow: 0 8px 30px rgba(43,108,176,0.12) }
}
.button.pulse { animation: pulseGlow 3.5s infinite }

/* ========== Crystal small variants ========== */
.button.small { padding:8px 12px; font-weight:600; border-radius:10px; }

/* ========== Contact form ========== */
input, textarea {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:none;
  background: rgba(255,255,255,0.02);
  color:inherit;
  resize:vertical;
}
input::placeholder, textarea::placeholder { color:rgba(255,255,255,0.35) }

/* ========== Footer ========== */
footer{margin-top:26px;color:var(--muted);text-align:center}

/* ========== Fade-in util (JS will trigger) ========== */
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .7s ease, transform .7s ease}

/* ========== Responsive ========== */
@media(max-width:880px){
  .grid{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ========== Tiny utilities ========== */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hidden{display:none}