/* ----------------------
   Inside My Codeverse — CSS only
   Author: Generated for Manjiri Kench
   ---------------------- */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@300;400;600&display=swap');

:root{
  --bg-1: #04040a;
  --bg-2: #0b0b14;
  --accent-1: #00fff7;
  --accent-2: #ff00ff;
  --muted: rgba(255,255,255,0.07);
  --card-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(0,255,247,0.12);
  --glass-border-2: rgba(255,0,255,0.10);
  --glass-shadow: rgba(0,255,247,0.08);
}

/* Reset */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: 'Inter', system-ui, sans-serif; background: var(--bg-1); color: #e9f8f8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color: var(--accent-1); text-decoration: none; }

/* ---------- Background layers ---------- */
.bg-gradient {
  position: fixed; inset:0; z-index:-3;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(16, 16, 16, 0.06), transparent 10%),
              radial-gradient(900px 600px at 90% 80%, rgba(255,0,255,0.04), transparent 10%),
              linear-gradient(180deg, var(--bg-2), var(--bg-1));
  background-size: 200% 200%, 200% 200%, auto;
  animation: bgShift 18s linear infinite;
  filter: blur(12px) saturate(1.05);
}
@keyframes bgShift { 0% {background-position:0% 0%,0% 0%} 50% {background-position:100% 100%,100% 100%} 100% {background-position:0% 0%,0% 0%} }

/* Binary rain layer (visual depth) */
.binary-rain {
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient( rgba(0,0,0,0.0) 0 1px, rgba(0,255,247,0.02) 1px 2px);
  background-size: 8px 16px;
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: rainMove 12s linear infinite;
}
.binary-rain span { position:absolute; inset:0; display:block; background-image:
  linear-gradient( to bottom, rgba(255,255,255,0.00), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.00) 100%);
  transform: translateZ(0); }
.binary-rain span:nth-child(1){opacity:0.22; filter:blur(0.6px); animation: move1 14s linear infinite;}
.binary-rain span:nth-child(2){opacity:0.16; filter:blur(1px); animation: move2 18s linear infinite;}
.binary-rain span:nth-child(3){opacity:0.10; filter:blur(1.4px); animation: move3 22s linear infinite;}
.binary-rain span:nth-child(4){opacity:0.08; filter:blur(2px); animation: move4 26s linear infinite;}
.binary-rain span:nth-child(5){opacity:0.06; filter:blur(2.6px); animation: move5 32s linear infinite;}
@keyframes rainMove { from {background-position: 0 0} to {background-position: 0 400px} }
@keyframes move1 { from {background-position:0 0} to {background-position: 0 1000px} }
@keyframes move2 { from {background-position:0 0} to {background-position: 0 1600px} }
@keyframes move3 { from {background-position:0 0} to {background-position: 0 2200px} }
@keyframes move4 { from {background-position:0 0} to {background-position: 0 2800px} }
@keyframes move5 { from {background-position:0 0} to {background-position: 0 3400px} }

/* Particles (glow dots) */
.particles { position: fixed; inset:0; z-index:-1; pointer-events:none; }
.particles i {
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background: linear-gradient(135deg, rgba(0,255,247,0.9), rgba(255,0,255,0.9));
  filter: blur(4px); opacity:0.08;
  animation: floaty 14s ease-in-out infinite;
}
.particles i:nth-child(1){left:6%; top:18%; animation-delay:0s; transform:scale(1.6)}
.particles i:nth-child(2){left:28%; top:6%; animation-delay:-2s; transform:scale(1.2)}
.particles i:nth-child(3){left:62%; top:22%; animation-delay:-6s; transform:scale(1.4)}
.particles i:nth-child(4){left:82%; top:60%; animation-delay:-4s; transform:scale(1.1)}
.particles i:nth-child(5){left:40%; top:82%; animation-delay:-8s; transform:scale(1.3)}
.particles i:nth-child(6){left:14%; top:70%; animation-delay:-5s; transform:scale(1.2)}
.particles i:nth-child(7){left:74%; top:12%; animation-delay:-3s; transform:scale(1.3)}
.particles i:nth-child(8){left:52%; top:50%; animation-delay:-7s; transform:scale(0.95)}
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-30px)} 100%{transform:translateY(0)} }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 6%;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.brand { display:flex; gap:12px; align-items:center; }
.logo { font-family: 'Orbitron', monospace; color: var(--accent-2); letter-spacing: 0.8px; }
.whoami { font-weight:600; color: #fff; opacity:0.9; }
.nav a { margin-left:18px; font-weight:600; color:rgba(230,255,255,0.9); opacity:0.9; }

/* ---------- Hero ---------- */
.hero { padding:80px 6% 60px; text-align:center; }
.boot { max-width:980px; margin:0 auto; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:36px; border-radius:14px; border:1px solid var(--glass-border); box-shadow: 0 8px 30px var(--glass-shadow); }
.terminal-line { color:var(--accent-1); opacity:0.95; margin:0 0 8px 0; font-family: 'Orbitron', monospace; font-weight:400; }
.typing { margin: 6px 0 8px; font-size: clamp(1.1rem, 4vw, 2.8rem); font-family: 'Orbitron', monospace; letter-spacing:1px; display:inline-block; }
.typing .mono { color: #9ff; opacity:0.9; font-weight:600; }
.typing .name { color: #fff; margin-left:6px; }
.typing .accent { color: var(--accent-2); text-shadow: 0 0 18px rgba(255,0,255,0.16); }
.caret { display:inline-block; width:8px; height:22px; background:var(--accent-1); margin-left:8px; vertical-align:middle; animation: blink 1s steps(2,end) infinite; border-radius:2px; }
@keyframes blink { 50% { opacity:0 } }

.lead { color: rgba(230,255,255,0.88); margin-top:6px; font-weight:500; }
.mini { color: rgba(255,255,255,0.6); margin-top:6px; font-size:0.95rem; }

.hero-actions { margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:10px 18px; border-radius:999px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); color:#021; font-weight:700; box-shadow:0 8px 30px rgba(0,255,247,0.06); transform:translateZ(0); }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color: #e9f8f8; }

/* ---------- Sections ---------- */
.section { padding:56px 6%; }
.section-title { font-family: 'Orbitron', monospace; text-align:center; color:var(--accent-2); margin:6px 0 18px; font-size:1.6rem; text-shadow:0 0 14px rgba(255,0,255,0.12); }

/* cards */
.card { background: var(--card-bg); border-radius:12px; padding:18px; border:1px solid var(--glass-border); box-shadow:0 6px 18px var(--glass-shadow); color:#eafdfc; }

/* ---------- ABOUT GRID ---------- */
.about-grid { display:grid; grid-template-columns: 320px 1fr; gap:20px; align-items:start; justify-content:center; max-width:1200px; margin:0 auto; }
.profile-card { text-align:center; padding-top:22px; }
.profile-pic { width:128px; height:128px; border-radius:50%; object-fit:cover; border:3px solid var(--accent-2); box-shadow:0 10px 30px rgba(255,0,255,0.06); display:block; margin: 0 auto 10px; }
.profile-card h3 { margin:8px 0; font-size:1.12rem; }
.profile-card p { color: rgba(230,255,255,0.9); font-size:0.95rem; }
.meta { list-style:none; padding:0; margin:10px 0 0; color: rgba(255,255,255,0.7); }
.meta li { margin:6px 0; }


.story p { margin:8px 0; color: rgba(235,255,255,0.9); }


.skills-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:18px; max-width:1100px; margin:18px auto 6px; }
.skill-module h4 { margin:0 0 8px; font-family:'Orbitron', monospace; color: #fff; }
.skill-module p { margin:0 0 10px; color: rgba(255,255,255,0.85); font-size:0.95rem; }


.bar { background: rgba(255,255,255,0.04); border-radius:999px; height:16px; overflow:hidden; width:100%; position:relative; }
.bar span { display:block; height:100%; line-height:16px; padding-right:10px; text-align:right; color:#021; font-weight:700; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); transform-origin:left; animation: grow 1.8s ease-out both; border-radius:999px; }
@keyframes grow { from { width:0 } to { width: var(--w, 70%) } }


.stack-chips { max-width:1100px; margin:18px auto 0; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.stack-chips span { background: rgba(255,255,255,0.03); padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); color:rgba(255,255,255,0.9); font-weight:600; }


.projects-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; max-width:1200px; margin:22px auto; }
.project.holo { position:relative; overflow:hidden; border:1px solid var(--glass-border-2); }
.project.holo::after {
  content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,255,247,0.015)); pointer-events:none;
  mix-blend-mode:overlay;
}
.project ul { margin:10px 0 0; padding-left:18px; color:rgba(255,255,255,0.85); }


.quote { font-style:italic; color: #fff; text-align:center; font-size:1.05rem; margin-bottom:12px; }


.terminal-footer { background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5)); padding:34px 6%; border-top:1px solid rgba(255,255,255,0.02); margin-top:40px; }
.terminal { max-width:980px; margin:0 auto; background: rgba(0,0,0,0.2); border:1px solid rgba(0,255,247,0.08); padding:20px; border-radius:8px; font-family: monospace; color:var(--accent-1); }
.terminal .online { color: #9fffbf; font-weight:700; }
.credit { text-align:center; margin-top:12px; opacity:0.85; color: rgba(255,255,255,0.6); }


@media (max-width:980px) {
  .about-grid { grid-template-columns: 1fr; padding:0 8px; }
  .hero { padding:48px 4% }
  .topbar { padding:10px 4% }
}


@media (prefers-reduced-motion: reduce) {
  .bg-gradient, .binary-rain, .particles, .bar span, .btn, .project, .card { animation-duration: 0.001ms !important; animation-iteration-count:1 !important; transition: none !important; }
  .caret { display:none; }
}