/* ============================================
   SASHAN SYSTEMS — Portfolio
   components.css | UI Components
   © 2025 Sashan Systems. MIT License.
   ============================================ */

/* ── Custom Cursor ── */
.cursor {
  width:          12px;
  height:         12px;
  background:     var(--blue-light);
  border-radius:  50%;
  position:       fixed;
  pointer-events: none;
  z-index:        9999;
  transition:     transform 0.1s, opacity 0.1s;
  mix-blend-mode: screen;
}
.cursor-ring {
  width:          36px;
  height:         36px;
  border:         1px solid var(--blue);
  border-radius:  50%;
  position:       fixed;
  pointer-events: none;
  z-index:        9998;
  transition:     width 0.2s, height 0.2s;
}

/* ── Navbar ── */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         1.2rem 5%;
  background:      rgba(8,15,24,0.8);
  backdrop-filter: blur(20px);
  border-bottom:   1px solid var(--border);
}

.logo-nav {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: 'Orbitron', monospace;
  font-size:   1rem;
  font-weight: 700;
  color:       var(--blue);
  text-decoration: none;
}
.logo-nav .bracket { color: var(--blue); }
.logo-nav .slash   { color: var(--green); }

nav ul              { list-style: none; display: flex; gap: 2.5rem; }
nav ul a            { color: var(--gray); text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: color 0.3s; position: relative; }
nav ul a::after     { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--green); transition: width 0.3s; }
nav ul a:hover      { color: var(--white); }
nav ul a:hover::after { width: 100%; }

/* ── Hero ── */
#hero {
  min-height:  100vh;
  display:     flex;
  align-items: center;
  padding:     0 5%;
  position:    relative;
  z-index:     1;
}

.hero-content { max-width: 700px; }

.hero-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    rgba(76,175,80,0.1);
  border:        1px solid rgba(76,175,80,0.3);
  color:         var(--green);
  padding:       0.4rem 1rem;
  font-size:     0.75rem;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom: 1.5rem;
  opacity:       0;
  animation:     fadeUp 0.8s 0.3s forwards;
}
.hero-tag .dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation: pulse 2s infinite; }

h1 {
  font-family:   'Orbitron', monospace;
  font-size:     clamp(2.5rem, 6vw, 5rem);
  font-weight:   900;
  line-height:   1.05;
  margin-bottom: 1rem;
  opacity:       0;
  animation:     fadeUp 0.8s 0.5s forwards;
}
h1 .name { color: var(--blue-light); display: block; }
h1 .role { color: var(--white); display: block; font-size: 0.55em; font-weight: 400; letter-spacing: 4px; margin-top: 0.5rem; }

.hero-desc {
  color:         var(--gray);
  font-size:     1.1rem;
  line-height:   1.7;
  margin-bottom: 2.5rem;
  max-width:     500px;
  opacity:       0;
  animation:     fadeUp 0.8s 0.7s forwards;
}

.hero-cta {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
  opacity:   0;
  animation: fadeUp 0.8s 0.9s forwards;
}

.stats-bar  { display: flex; gap: 3rem; margin-top: 2rem; flex-wrap: wrap; }
.stat-num   { font-family: 'Orbitron', monospace; font-size: 2rem; font-weight: 900; color: var(--blue); }
.stat-label { color: var(--gray); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; }

/* ── Terminal decoration ── */
.hero-terminal {
  position:   absolute;
  right:      5%;
  top:        50%;
  transform:  translateY(-50%);
  width:      420px;
  background: rgba(8,15,24,0.9);
  border:     1px solid var(--border);
  padding:    1.5rem;
  font-family:'Courier New', monospace;
  font-size:  0.8rem;
  opacity:    0;
  animation:  fadeUp 1s 1.1s forwards;
  display:    none;
}
@media(min-width:1100px) { .hero-terminal { display: block; } }

.terminal-header  { display:flex; align-items:center; gap:8px; margin-bottom:1rem; padding-bottom:0.8rem; border-bottom:1px solid var(--border); }
.t-dot            { width:10px; height:10px; border-radius:50%; }
.t-dot.r          { background:#ff5f57; }
.t-dot.y          { background:#febc2e; }
.t-dot.g          { background:#28c840; }
.terminal-title   { color:var(--gray); font-size:0.7rem; margin-left:auto; }
.t-line           { color:var(--gray); margin:0.3rem 0; }
.t-line .t-prompt { color:var(--green); }
.t-line .t-cmd    { color:var(--blue-light); }
.t-line .t-out    { color:var(--white); }
.t-line .t-comment{ color:#4a6a8a; }
.cursor-blink     { display:inline-block; width:8px; height:14px; background:var(--green); vertical-align:middle; animation:blink 1s infinite; }

/* ── About ── */
#about { max-width: 900px; margin: 0 auto; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media(max-width:700px) { .about-grid { grid-template-columns: 1fr; } }

.about-text p          { color:var(--gray); line-height:1.8; font-size:1.05rem; margin-bottom:1rem; }
.about-text p strong   { color:var(--blue-light); }

.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.skill-item  { background:var(--card-bg); border:1px solid var(--border); padding:0.6rem 1rem; font-size:0.85rem; color:var(--blue-light); letter-spacing:1px; display:flex; align-items:center; gap:8px; transition:border-color 0.3s, background 0.3s; }
.skill-item:hover { border-color:var(--blue); background:rgba(26,155,220,0.12); }
.skill-item::before { content:'//'; color:var(--green); font-size:0.7rem; }

/* ── Projects ── */
#projects { background: rgba(26,155,220,0.02); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }

.project-card {
  background:  var(--card-bg);
  border:      1px solid var(--border);
  padding:     2rem;
  position:    relative;
  overflow:    hidden;
  transition:  transform 0.3s, border-color 0.3s;
  clip-path:   polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  cursor:      none;
}
.project-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg, var(--blue), var(--green)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s; }
.project-card:hover   { transform:translateY(-6px); border-color:var(--blue); }
.project-card:hover::before { transform:scaleX(1); }

.project-number { font-family:'Orbitron', monospace; font-size:3rem; font-weight:900; color:rgba(26,155,220,0.08); position:absolute; top:1rem; right:1.5rem; line-height:1; }
.project-tag    { display:inline-block; background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.3); color:var(--green); padding:0.2rem 0.7rem; font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:1rem; }
.project-card h3{ font-family:'Orbitron', monospace; font-size:1rem; font-weight:700; color:var(--white); margin-bottom:0.8rem; }
.project-card p { color:var(--gray); font-size:0.9rem; line-height:1.6; margin-bottom:1.5rem; }
.project-links  { display:flex; gap:1rem; }
.project-link   { color:var(--blue); text-decoration:none; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; display:flex; align-items:center; gap:5px; transition:color 0.3s; }
.project-link:hover { color:var(--blue-light); }
.project-link svg { width:14px; height:14px; }

/* ── Contact ── */
#contact { border-top: 1px solid var(--border); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 900px; margin: 0 auto; }
@media(max-width:700px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info h3  { font-family:'Orbitron', monospace; font-size:1.1rem; color:var(--blue); margin-bottom:1.5rem; }
.contact-detail   { display:flex; align-items:center; gap:12px; margin-bottom:1.2rem; color:var(--gray); font-size:0.95rem; }
.contact-detail svg { color:var(--green); flex-shrink:0; }
.contact-detail a   { color:var(--gray); text-decoration:none; transition:color 0.3s; }
.contact-detail a:hover { color:var(--blue-light); }

form              { display:flex; flex-direction:column; gap:1rem; }
form input,
form textarea     { background:var(--card-bg); border:1px solid var(--border); color:var(--white); padding:0.9rem 1.2rem; font-family:'Rajdhani', sans-serif; font-size:0.95rem; outline:none; transition:border-color 0.3s; width:100%; }
form input:focus,
form textarea:focus { border-color:var(--blue); }
form input::placeholder,
form textarea::placeholder { color:var(--gray); }
form textarea     { resize:vertical; min-height:120px; }
form button       { align-self:flex-start; cursor:none; }

/* ── Footer ── */
footer {
  background:      rgba(8,15,24,0.95);
  border-top:      1px solid var(--border);
  padding:         2rem 5%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             1rem;
  position:        relative;
  z-index:         1;
}
footer p         { color:var(--gray); font-size:0.8rem; }
footer .license  { color:var(--gray); font-size:0.75rem; text-align:right; }
footer .license span { color:var(--green); }
footer .license .fine-print { margin-top:0.3rem; font-size:0.7rem; opacity:0.6; }

/* ── Mobile nav ── */
@media(max-width:600px) {
  nav ul          { display:none; }
  .hero-content   { padding-top:6rem; }
}