/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === RESET & BASE === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:#000;
  color:#00ff41;
  font-family:'Share Tech Mono',monospace;
  overflow-x:hidden;
  line-height:1.6;
}
a{color:#00ff41;text-decoration:none}
a:hover{color:#fff;text-shadow:0 0 10px #00ff41}
.hidden{opacity:0;pointer-events:none}

/* === MATRIX RAIN === */
#matrix-rain{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;opacity:0.15;
}

/* === SCANLINES === */
.scanlines{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.1) 0px,
    rgba(0,0,0,0.1) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* === BOOT SCREEN === */
#boot-screen{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:100;background:#000;
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:2rem;
  transition:opacity 0.8s ease;
}
#boot-screen.fade-out{opacity:0;pointer-events:none}
.boot-text{
  font-size:0.9rem;white-space:pre-wrap;color:#00ff41;
  text-shadow:0 0 5px #00ff41;
}

/* === MAIN CONTENT === */
#main-content{
  position:relative;z-index:2;
  transition:opacity 1s ease;
}
#main-content.visible{opacity:1;pointer-events:all}

/* === HERO === */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:2rem;
}

/* Glitch effect */
.glitch-container{position:relative;display:inline-block}
.glitch{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2rem,7vw,5rem);
  font-weight:900;
  color:#fff;
  text-shadow:0 0 10px #00ff41,0 0 40px #00ff41,0 0 80px #00882a;
  position:relative;
  animation:glitch-skew 4s infinite linear alternate-reverse;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
  overflow:hidden;
}
.glitch::before{
  color:#0ff;
  animation:glitch-1 2s infinite linear alternate-reverse;
  clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
}
.glitch::after{
  color:#f0f;
  animation:glitch-2 3s infinite linear alternate-reverse;
  clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
}
@keyframes glitch-1{
  0%,100%{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(3px,-3px)}60%{transform:translate(-2px)}80%{transform:translate(3px,2px)}
}
@keyframes glitch-2{
  0%,100%{transform:translate(0)}20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,3px)}80%{transform:translate(-2px,-3px)}
}
@keyframes glitch-skew{
  0%,100%{transform:skew(0deg)}30%{transform:skew(0.4deg)}60%{transform:skew(-0.3deg)}
}

.subtitle-line{
  font-size:clamp(1rem,3vw,1.6rem);
  margin-top:1.5rem;
  color:#00ff41;
}
.bracket{color:#888}
.cursor{
  animation:blink 0.8s step-end infinite;
  color:#00ff41;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.location{
  margin-top:1.5rem;
  font-size:0.95rem;
  color:#888;
}
.location .prompt{color:#00ff41}
.highlight{color:#0ff;text-shadow:0 0 8px rgba(0,255,255,0.4)}
.blink{animation:blink 1.5s infinite;color:#0f0;margin-left:1rem}

.scroll-hint{
  margin-top:3rem;
  font-size:0.75rem;
  color:#555;
  animation:pulse 2s infinite;
  letter-spacing:4px;
}
.arrow{color:#00ff41}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* === SECTIONS === */
.section{
  max-width:900px;
  margin:0 auto;
  padding:4rem 2rem;
}
.section-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1rem,3vw,1.4rem);
  color:#00ff41;
  margin-bottom:2rem;
  text-shadow:0 0 10px #00882a;
  border-bottom:1px solid #0a3a0a;
  padding-bottom:0.5rem;
}
.section-title .prompt{color:#888}

/* === TERMINAL WINDOW === */
.terminal-window{
  background:#0a0a0a;
  border:1px solid #1a3a1a;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 0 30px rgba(0,255,65,0.05);
}
.terminal-header{
  background:#111;
  padding:0.6rem 1rem;
  display:flex;align-items:center;gap:0.5rem;
  border-bottom:1px solid #1a3a1a;
}
.dot{
  width:12px;height:12px;border-radius:50%;
}
.dot.red{background:#ff5f57}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#28c840}
.terminal-title{color:#666;font-size:0.75rem;margin-left:0.5rem}
.terminal-body{padding:1.5rem}
.terminal-line{
  margin-bottom:0.8rem;
  font-size:0.9rem;
  opacity:0;
  animation:fadeInLine 0.4s forwards;
}
.terminal-line .prompt{color:#888;margin-right:0.5rem}
.comment{color:#555;font-style:italic}

/* === SKILLS === */
.skills-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.skill-category{
  background:#0a0a0a;
  border:1px solid #1a3a1a;
  border-radius:8px;
  padding:1.5rem;
}
.cat-title{
  font-size:0.85rem;
  color:#888;
  margin-bottom:1rem;
}
.skill-item{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:0.8rem;
  font-size:0.85rem;
}
.skill-item span{min-width:120px;color:#ccc}
.bar{
  flex:1;height:8px;
  background:#111;
  border-radius:4px;
  overflow:hidden;
  border:1px solid #1a3a1a;
}
.fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#00ff41,#0ff);
  border-radius:4px;
  box-shadow:0 0 10px #00ff41;
  transition:width 1.5s ease;
}

/* Tags */
.tag-cloud{display:flex;flex-wrap:wrap;gap:0.5rem}
.tag{
  background:#0a1a0a;
  border:1px solid #00ff41;
  color:#00ff41;
  padding:0.3rem 0.8rem;
  border-radius:3px;
  font-size:0.8rem;
  transition:all 0.3s;
  cursor:default;
}
.tag:hover{
  background:#00ff41;
  color:#000;
  box-shadow:0 0 15px #00ff41;
  transform:translateY(-2px);
}

/* === TIMELINE === */
.timeline{position:relative;padding-left:2rem}
.timeline::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:linear-gradient(180deg,#00ff41,#0ff,#00ff41);
  box-shadow:0 0 10px #00ff41;
}
.timeline-item{
  position:relative;
  margin-bottom:3rem;
  padding-left:1.5rem;
  opacity:0;transform:translateX(-20px);
  transition:all 0.6s ease;
}
.timeline-item.visible{
  opacity:1;transform:translateX(0);
}
.timeline-marker{
  position:absolute;left:-2.35rem;top:0.3rem;
  width:12px;height:12px;
  background:#00ff41;
  border-radius:50%;
  box-shadow:0 0 10px #00ff41,0 0 20px #00882a;
  animation:marker-pulse 2s infinite;
}
@keyframes marker-pulse{
  0%,100%{box-shadow:0 0 10px #00ff41}50%{box-shadow:0 0 20px #00ff41,0 0 40px #00882a}
}
.timeline-date{
  font-size:0.8rem;
  color:#0ff;
  text-shadow:0 0 5px rgba(0,255,255,0.3);
  margin-bottom:0.3rem;
}
.timeline-content h3{
  font-size:1rem;color:#fff;
  text-shadow:0 0 5px rgba(255,255,255,0.1);
  margin-bottom:0.5rem;
}
.timeline-content h3 .comment{font-size:0.85rem}
.timeline-content ul{
  list-style:none;
  padding:0;
}
.timeline-content li{
  font-size:0.85rem;
  color:#aaa;
  margin-bottom:0.4rem;
  padding-left:1.2rem;
  position:relative;
}
.timeline-content li::before{
  content:'>';
  position:absolute;left:0;
  color:#00ff41;
}

/* === CONTACT === */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
}
.contact-card{
  background:#0a0a0a;
  border:1px solid #1a3a1a;
  border-radius:8px;
  padding:1.5rem;
  text-align:center;
  transition:all 0.3s;
  display:block;
}
.contact-card:hover{
  border-color:#00ff41;
  box-shadow:0 0 30px rgba(0,255,65,0.15);
  transform:translateY(-4px);
}
.contact-icon{font-size:2rem;margin-bottom:0.5rem}
.contact-card div:last-child{font-size:0.85rem;color:#aaa}
.contact-card:hover div:last-child{color:#00ff41}

/* Footer */
.footer-ascii{
  text-align:center;
  margin-top:4rem;
  padding:2rem 0;
}
.footer-ascii pre{
  display:inline-block;
  font-size:0.7rem;
  color:#333;
  text-align:left;
}

/* Fade-in for terminal lines */
@keyframes fadeInLine{
  to{opacity:1}
}
.terminal-line:nth-child(1){animation-delay:0.2s}
.terminal-line:nth-child(2){animation-delay:0.5s}
.terminal-line:nth-child(3){animation-delay:0.8s}
.terminal-line:nth-child(4){animation-delay:1.1s}
.terminal-line:nth-child(5){animation-delay:1.4s}
.terminal-line:nth-child(6){animation-delay:1.7s}

/* Responsive */
@media(max-width:600px){
  .skill-item{flex-direction:column;align-items:flex-start;gap:0.3rem}
  .skill-item span{min-width:unset}
  .timeline{padding-left:1.5rem}
  .timeline-item{padding-left:1rem}
  .timeline-marker{left:-1.85rem}
  .wopr-line{font-size:0.72rem;line-height:1.4}
  .wopr-terminal{max-height:60vh}
  .wopr-header{font-size:0.8rem}
  .wopr-final{font-size:0.9rem}
}

/* === WOPR TERMINAL === */
.wopr-terminal{
  max-height:70vh;
  overflow-y:auto;
  scroll-behavior:smooth;
}
.wopr-terminal .terminal-body{
  min-height:200px;
}
.wopr-line{
  white-space:pre-wrap;
  word-break:break-word;
  font-size:0.85rem;
  line-height:1.5;
  color:#00ff41;
}
.wopr-label{
  color:#00ff41;
  text-shadow:0 0 10px #00ff41;
  font-size:1rem;
}
.wopr-bright{
  color:#fff;
  text-shadow:0 0 8px #00ff41;
}
.wopr-dim{color:#448844}
.wopr-input{
  color:#0ff;
  text-shadow:0 0 5px rgba(0,255,255,0.4);
}
.wopr-cyan{
  color:#0ff;
  text-shadow:0 0 10px rgba(0,255,255,0.5);
}
.wopr-red{
  color:#ff3333;
  text-shadow:0 0 10px rgba(255,0,0,0.4);
}
.wopr-header{
  color:#ff0;
  text-shadow:0 0 15px rgba(255,255,0,0.4);
  font-size:0.95rem;
  font-weight:bold;
}
.wopr-bar{
  color:#00ff41;
  text-shadow:0 0 5px #00882a;
}
.wopr-flash{
  animation:wopr-blink 1s ease 3;
}
@keyframes wopr-blink{
  0%,100%{opacity:1}50%{opacity:0.3}
}
.wopr-final{
  color:#fff;
  text-shadow:0 0 20px #00ff41, 0 0 40px #00882a;
  font-size:1.1rem;
  font-weight:bold;
  letter-spacing:2px;
}
.wopr-terminal::-webkit-scrollbar{width:6px}
.wopr-terminal::-webkit-scrollbar-track{background:#0a0a0a}
.wopr-terminal::-webkit-scrollbar-thumb{background:#00ff41;border-radius:3px}

/* === PROJECTS === */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.project-card{
  background:#0a0a0a;
  border:1px solid #1a3a1a;
  border-radius:8px;
  padding:1.5rem;
  transition:all 0.3s;
  display:block;
  position:relative;
  overflow:hidden;
}
.project-card::before{
  content:'';
  position:absolute;top:0;left:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,#00ff41,#0ff,#00ff41);
  opacity:0;transition:opacity 0.3s;
}
.project-card:hover{
  border-color:#00ff41;
  box-shadow:0 0 30px rgba(0,255,65,0.1);
  transform:translateY(-4px);
}
.project-card:hover::before{opacity:1}
.project-card .project-url{
  font-size:1.1rem;
  color:#0ff;
  text-shadow:0 0 8px rgba(0,255,255,0.3);
  margin-bottom:0.5rem;
}
.project-card .project-desc{
  font-size:0.8rem;
  color:#888;
  line-height:1.5;
}
.project-card .project-tag{
  display:inline-block;
  font-size:0.7rem;
  color:#00ff41;
  border:1px solid #1a3a1a;
  padding:0.15rem 0.5rem;
  border-radius:3px;
  margin-top:0.8rem;
  margin-right:0.3rem;
}