/* ============================================================
   MANN JANODIA — PORTFOLIO STYLES
   style.css

   HOW TO EDIT:
   - Colors → change values in :root {}
   - Fonts  → change font-family in body / body.hi
   - Layout → edit section, .story-g, .proj-grid etc.
   ============================================================ */

/* ── ROOT VARIABLES ── */
:root {
  --primary:   #00d9ff;
  --secondary: #7000ff;
  --accent:    #ff006e;
  --bg:        #0a0e1b;
  --card:      #141824;
  --text:      #e8edf4;
  --dim:       #8892a6;
  --glow:      rgba(0, 217, 255, .45);
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Space Grotesk', sans-serif;
  background:  var(--bg);
  color:       var(--text);
  overflow-x:  hidden;
  line-height: 1.6;
}
body.hi { font-family: 'Hind', 'Space Grotesk', sans-serif; }

/* ── BACKGROUND CANVAS ── */
#bg {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; opacity: .28;
  pointer-events: none;
}

/* ── WRAPPER ── */
.wrap { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════
   NAV
══════════════════════════════════════════════ */
nav {
  position:   fixed; top: 0; width: 100%;
  padding:    1rem 3.5rem;
  display:    flex; justify-content: space-between; align-items: center;
  z-index:    200;
  backdrop-filter: blur(20px);
  background: rgba(10,14,27,.82);
  border-bottom: 1px solid rgba(0,217,255,.12);
}
.logo {
  font-size:   1.4rem; font-weight: 700;
  background:  linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -1px; text-decoration: none;
}
.nav-r     { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  color: var(--dim); text-decoration: none;
  font-weight: 500; font-size: .9rem;
  transition: .3s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--primary); transition: .3s;
}
.nav-links a:hover              { color: var(--primary); }
.nav-links a:hover::after       { width: 100%; }

/* Language button */
.lang { display: flex; gap: .25rem; background: rgba(0,217,255,.07); border: 1px solid rgba(0,217,255,.28); border-radius: 50px; padding: .28rem; }
.lb   { background: none; border: none; color: var(--dim); font-family: inherit; font-size: .82rem; font-weight: 600; padding: .35rem .85rem; border-radius: 50px; cursor: pointer; transition: .3s; }
.lb:hover  { color: var(--primary); }
.lb.on     { background: var(--primary); color: var(--bg); }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display:    flex; align-items: center;
  padding:    7rem 3.5rem 3rem;
  position:   relative; gap: 2rem;
}
.hero-l { flex: 1; max-width: 700px; position: relative; z-index: 2; }

.hero-tag {
  display: inline-block;
  font-size: .82rem; color: var(--primary);
  font-family: 'IBM Plex Mono', monospace;
  border: 1px solid var(--primary); border-radius: 50px;
  padding: .45rem 1.3rem; margin-bottom: 1.4rem;
  animation: up .8s ease .2s both;
}
@keyframes up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero h1 {
  font-size:      clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight:    700; line-height: 1.1;
  letter-spacing: -1.5px; margin-bottom: 1.2rem;
  animation:      up .8s ease .4s both;
}
.grad {
  background:      linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation:       gshift 4s ease infinite;
}
@keyframes gshift {
  0%, 100% { background-position: 0 50%;    }
  50%       { background-position: 100% 50%; }
}

.hero-sub  { font-size: 1.05rem; color: var(--dim); margin-bottom: 1.2rem; animation: up .8s ease .6s both; }
.hero-desc { font-size: .98rem;  color: var(--dim); line-height: 1.85; max-width: 580px; margin-bottom: 2.2rem; animation: up .8s ease .8s both; }

.cta { display: flex; gap: 1rem; animation: up .8s ease 1s both; }
.btn {
  padding: .85rem 2rem; font-size: .92rem; font-weight: 600;
  border-radius: 50px; text-decoration: none;
  transition: .4s cubic-bezier(.4,0,.2,1);
  font-family: inherit; display: inline-flex; align-items: center;
  cursor: pointer; border: none;
}
.btn-p {
  background:  linear-gradient(135deg, var(--primary), var(--secondary));
  color:       var(--bg);
  box-shadow:  0 8px 28px var(--glow);
}
.btn-p:hover { transform: translateY(-3px); box-shadow: 0 14px 40px var(--glow); }

/* ══════════════════════════════════════════════
   PROJECT SHOWCASE (hero right)
══════════════════════════════════════════════ */
.showcase { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-left: 3rem; }
.sc-box {
  width: 100%; height: 360px; position: relative;
  background: var(--card);
  border: 2px solid rgba(0,217,255,.38); border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 50px rgba(0,217,255,.15);
}
.sc-box::before, .sc-box::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-color: var(--primary); border-style: solid; z-index: 3;
}
.sc-box::before { top: 8px;    left: 8px;   border-width: 2px 0 0 2px; }
.sc-box::after  { bottom: 8px; right: 8px;  border-width: 0 2px 2px 0; }

.scene     { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .9s ease; }
.scene.on  { opacity: 1; }
.scene svg { width: 88%; height: 88%; }

.sc-dots { display: flex; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,217,255,.25); border: 1px solid rgba(0,217,255,.4); cursor: pointer; transition: .3s; }
.dot.on { background: var(--primary); box-shadow: 0 0 7px var(--primary); }

.sc-label { padding: .4rem 1.3rem; background: var(--card); border: 1px solid rgba(0,217,255,.28); border-radius: 50px; color: var(--primary); font-family: 'IBM Plex Mono', monospace; font-size: .76rem; display: flex; align-items: center; gap: .5rem; }
.pulse { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: pk 1.2s ease-in-out infinite; }
@keyframes pk { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── SVG animation keyframes ── */
@keyframes blink      { 0%,48%,52%,100%{opacity:1} 50%{opacity:0} }
@keyframes armPivot   { 0%,100%{transform:rotate(0deg)} 40%{transform:rotate(-20deg)} 70%{transform:rotate(16deg)} }
@keyframes tubeGo     { 0%{transform:translate(0,0)} 30%{transform:translate(0,-34px)} 60%{transform:translate(66px,-34px)} 85%,100%{transform:translate(66px,0)} }
@keyframes ringPulse  { 0%,100%{opacity:.6} 50%{opacity:.15} }
@keyframes droneHover { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-8px,-16px)} }
@keyframes propSpin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes handWave   { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(14deg)} }
@keyframes signalDash { 0%{stroke-dashoffset:0;opacity:.8} 100%{stroke-dashoffset:-40;opacity:.2} }
@keyframes botLoop    { 0%{transform:translate(0,0)} 25%{transform:translate(100px,0)} 50%{transform:translate(100px,-55px)} 75%{transform:translate(0,-55px)} 100%{transform:translate(0,0)} }
@keyframes taskSlide  { 0%{transform:translateX(0);opacity:1} 80%{transform:translateX(190px);opacity:1} 100%{transform:translateX(200px);opacity:0} }
@keyframes servoSweep { 0%,100%{transform:rotate(-30deg)} 50%{transform:rotate(30deg)} }
@keyframes botDrive   { 0%{transform:translateX(-120px)} 100%{transform:translateX(50px)} }
@keyframes sensorSweep{ 0%,100%{opacity:.3} 50%{opacity:.8} }
@keyframes ledBlink   { 0%,49%,51%,100%{opacity:1} 50%{opacity:.15} }

.arm-pivot  { animation: armPivot 3.2s ease-in-out infinite; transform-origin: 200px 255px; }
.tube       { animation: tubeGo 3.2s ease-in-out infinite; }
.sc-ring    { animation: ringPulse 2s ease-in-out infinite; }
.d-body     { animation: droneHover 2.6s ease-in-out infinite; }
.prop       { animation: propSpin .12s linear infinite; transform-box: fill-box; transform-origin: center; }
.h-wave     { animation: handWave 2.6s ease-in-out infinite; transform-origin: 110px 285px; }
.sig        { animation: signalDash 2s linear infinite; stroke-dasharray: 10 6; }
.bot        { animation: botLoop 6s linear infinite; transform-origin: 80px 300px; }
.tsk        { animation: taskSlide 3s ease-in-out infinite; }
.tsk:nth-child(2) { animation-delay: -1s; }
.tsk:nth-child(3) { animation-delay: -2s; }
.eyeb       { animation: blink 2.8s ease-in-out infinite; }
.servo-pan  { animation: servoSweep 2s ease-in-out infinite; transform-origin: 200px 220px; }
.bot-drive  { animation: botDrive 4s linear infinite; }
.led-blink  { animation: ledBlink 1s step-end infinite; }
.sensor-arc { animation: sensorSweep 1.5s ease-in-out infinite; }

/* ══════════════════════════════════════════════
   GENERAL SECTIONS
══════════════════════════════════════════════ */
section { padding: 5rem 3.5rem; }
.sh     { text-align: center; margin-bottom: 3rem; }
.stag   { font-size: .78rem; color: var(--primary); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 3px; margin-bottom: .7rem; }
.stit   { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -1px; margin-bottom: .8rem; }
.sdesc  { font-size: .98rem; color: var(--dim); max-width: 660px; margin: 0 auto; line-height: 1.7; }

/* scroll reveal */
.rev     { opacity: 0; transform: translateY(36px); transition: .8s cubic-bezier(.4,0,.2,1); }
.rev.go  { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════
   ABOUT / STORY
══════════════════════════════════════════════ */
.story-g { display: grid; grid-template-columns: 300px 1fr; gap: 3.5rem; max-width: 1050px; margin: 0 auto; align-items: center; }
.photo-box {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--primary);
  box-shadow: 0 0 40px rgba(0,217,255,.28);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
}
.photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}
.photo-ph { display: none !important; }
.photo-ph span { display: none !important; }
.photo-ph p { display: none !important; }
.story-txt h3  { font-size: 1.7rem; margin-bottom: 1rem; color: var(--primary); }
.story-txt p   { font-size: .97rem; line-height: 1.85; color: var(--dim); margin-bottom: .9rem; }
.story-txt strong { color: var(--primary); }

/* ══════════════════════════════════════════════
   PROJECTS GRID
══════════════════════════════════════════════ */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.2rem; max-width: 1280px; margin: 0 auto; }
.pc { background: var(--card); border-radius: 12px; overflow: hidden; border: 2px solid rgba(0,217,255,.1); transition: .35s cubic-bezier(.4,0,.2,1); cursor: pointer; }
.pc:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 14px 38px rgba(0,217,255,.2); }
.pc-head   { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: .95rem 1.2rem; }
.pc-head h3 { font-size: 1rem; font-weight: 700; color: var(--bg); line-height: 1.3; }
.pc-body   { padding: 1rem 1.2rem; }
.pc-body p { color: var(--dim); font-size: .86rem; line-height: 1.6; margin-bottom: .8rem; }
.tags      { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.tag       { padding: .18rem .6rem; background: rgba(0,217,255,.1); color: var(--primary); border-radius: 10px; font-size: .68rem; font-family: 'IBM Plex Mono', monospace; }
.click-hint { font-size: .72rem; color: rgba(0,217,255,.5); font-family: 'IBM Plex Mono', monospace; margin-top: .4rem; }

/* ══════════════════════════════════════════════
   SKILLS
══════════════════════════════════════════════ */
.sk-list { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.sk-row { background: var(--card); border: 2px solid rgba(0,217,255,.1); border-radius: 13px; padding: 1.5rem 1.8rem; display: grid; grid-template-columns: 185px 1fr; gap: 1.5rem; align-items: start; cursor: pointer; transition: .3s; }
.sk-row:hover { border-color: var(--primary); transform: translateX(6px); box-shadow: 0 6px 22px rgba(0,217,255,.14); }
.sk-cat { color: var(--primary); font-weight: 600; font-size: .95rem; padding-top: .1rem; }
.chips  { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip   { padding: .28rem .82rem; background: rgba(0,217,255,.07); border: 1px solid rgba(0,217,255,.2); color: var(--text); border-radius: 20px; font-size: .8rem; }

/* ══════════════════════════════════════════════
   EXPERIENCE
══════════════════════════════════════════════ */
.exp-list { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.exp-row  { background: var(--card); border: 2px solid rgba(0,217,255,.1); border-radius: 13px; padding: 1.6rem 1.8rem; display: grid; grid-template-columns: 150px 1fr; gap: 1.8rem; align-items: start; transition: .3s; }
.exp-row:hover { border-color: var(--primary); transform: translateX(6px); box-shadow: 0 6px 22px rgba(0,217,255,.14); }
.exp-date { color: var(--primary); font-family: 'IBM Plex Mono', monospace; font-size: .83rem; padding-top: .2rem; }
.exp-info h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.exp-co      { color: var(--primary); font-size: .9rem; margin-bottom: .6rem; font-weight: 500; }
.exp-desc    { color: var(--dim); font-size: .88rem; line-height: 1.65; }
.exp-tags    { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.etag        { padding: .22rem .65rem; background: rgba(0,217,255,.1); color: var(--primary); border-radius: 11px; font-size: .7rem; font-family: 'IBM Plex Mono', monospace; }

/* ══════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════ */
.contact-c  { max-width: 560px; margin: 0 auto; text-align: center; padding: 2rem; }
.contact-c h2 { font-size: 2.1rem; margin-bottom: .8rem; letter-spacing: -1px; }
.contact-c .tagline { font-size: 1.05rem; color: var(--dim); margin-bottom: 1.1rem; }
.contact-c .email {
  display: inline-block; font-size: 1.08rem; color: var(--primary);
  text-decoration: none; font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 1.8rem; padding: .35rem 0;
  border-bottom: 2px solid transparent; transition: .3s;
}
.contact-c .email:hover { border-bottom-color: var(--primary); }
.socials { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.soc {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  color: var(--dim); text-decoration: none; font-size: .85rem;
  transition: .3s; padding: .9rem 1.4rem; border-radius: 11px;
  border: 1px solid transparent;
}
.soc:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 7px 18px rgba(0,217,255,.18); }
.soc svg   { width: 25px; height: 25px; }

footer { text-align: center; padding: 1.3rem; border-top: 1px solid rgba(0,217,255,.1); color: var(--dim); font-size: .83rem; }

/* ══════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,18,.82);
  backdrop-filter: blur(10px);
  z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--card); border: 2px solid rgba(0,217,255,.3); border-radius: 20px;
  width: 100%; max-width: 700px; max-height: 88vh; overflow-y: auto;
  position: relative; transform: scale(.94); transition: .3s ease;
}
.overlay.open .modal { transform: scale(1); }

.modal-head {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  padding: 1.4rem 1.8rem; border-radius: 18px 18px 0 0;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.modal-head h2     { font-size: 1.3rem; font-weight: 700; color: var(--bg); }
.modal-head .badge { font-size: .7rem; color: var(--bg); background: rgba(10,14,27,.3); padding: .2rem .6rem; border-radius: 20px; font-family: 'IBM Plex Mono', monospace; margin-top: .3rem; }
.close-btn {
  background: rgba(10,14,27,.3); border: none; color: var(--bg);
  font-size: 1.3rem; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: .2s;
}
.close-btn:hover  { background: rgba(10,14,27,.6); }

.modal-body       { padding: 1.8rem; }
.modal-body h4    { color: var(--primary); font-size: .92rem; margin: 1.1rem 0 .5rem; }
.modal-body h4:first-child { margin-top: 0; }
.modal-body p, .modal-body li { color: var(--dim); font-size: .88rem; line-height: 1.7; margin-bottom: .4rem; }
.modal-body ul    { margin-left: 1.1rem; }
.modal-body code  { background: rgba(0,217,255,.08); color: var(--primary); padding: .1rem .4rem; border-radius: 4px; font-size: .82rem; }

.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin: 1rem 0; padding: .9rem; background: rgba(0,217,255,.05); border-radius: 10px; }
.stat      { text-align: center; }
.sv        { font-size: 1.1rem; font-weight: 700; color: var(--primary); font-family: 'IBM Plex Mono', monospace; }
.sl        { font-size: .7rem; color: var(--dim); margin-top: .12rem; }

.modal-links { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.mlink { padding: .4rem .9rem; background: var(--primary); color: var(--bg); text-decoration: none; border-radius: 8px; font-size: .78rem; font-weight: 600; transition: .3s; }
.mlink:hover { transform: translateY(-2px); box-shadow: 0 5px 14px var(--glow); }

.modal-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.modal-chip  { padding: .3rem .85rem; background: rgba(0,217,255,.08); border: 1px solid rgba(0,217,255,.22); color: var(--text); border-radius: 20px; font-size: .83rem; }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1060px) {
  .showcase { display: none; }
  .hero     { padding: 7rem 2rem 3rem; }
}
@media (max-width: 768px) {
  nav                { padding: 1rem 1.4rem; flex-wrap: wrap; gap: .7rem; }
  .nav-links         { display: none; }
  section            { padding: 3.5rem 1.4rem; }
  .story-g           { grid-template-columns: 1fr; gap: 2rem; }
  .photo-box         { max-width: 240px; margin: 0 auto; }
  .sk-row, .exp-row  { grid-template-columns: 1fr; gap: .4rem; }
  .socials           { gap: .7rem; }
}