:root{
  --bg:#0b132b;              
  --text:#e6edf3;            
  --muted:#9aa4b2;           
  --accent:#7c3aed;          
  --accent-rgb:124,58,237;   
  --hover:rgba(124,58,237,0.16);
  --line:rgba(230,237,243,0.08); 
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  line-height:1.65;
}

section{scroll-margin-top:84px}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(8px);
  background:rgba(11,19,43,0.82);
  border-bottom:1px solid var(--line);
  transition:transform .35s ease;
}
.site-header.nav-hide{transform:translateY(-100%)}

.nav{
  max-width:1200px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-left{display:flex;align-items:center;gap:24px}
.brand{color:var(--text);font-weight:800;text-decoration:none;letter-spacing:.2px}
.brand:hover{color:var(--accent)}

.nav-links{display:flex;gap:22px;margin:0;padding:0;list-style:none}
.nav-links a{
  color:var(--text);opacity:.9;text-decoration:none;font-weight:600;
  transition:color .2s ease,background .2s ease,opacity .2s ease;
  padding:6px 10px;border-radius:8px;position:relative;
}
.nav-links a:hover{color:var(--accent);background:var(--hover)}
.nav-links a.active{color:var(--accent);background:var(--hover)}
.nav-links a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;opacity:.95;
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

.nav-right{display:flex;align-items:center;gap:12px}
.icon-btn{
  color:var(--text);opacity:.9;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;text-decoration:none;
  transition:transform .15s ease,background .2s ease,color .2s ease,opacity .2s;
}
.icon-btn:hover{background:var(--hover);color:var(--accent);transform:translateY(-1px)}

/* ===== Hero ===== */
.hero{
  min-height:calc(100vh - 72px);max-width:900px;margin:0 auto;padding:96px 24px 64px;
  text-align:center;display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative;overflow:hidden;
}
.hero h1{font-size:clamp(36px,6vw,72px);margin:0;font-weight:800}
.accent{color:var(--accent)}
.hero h2{color:var(--muted);font-weight:500;margin:0 0 10px;font-size:clamp(18px,2.5vw,28px)}
.hero p{color:var(--muted);margin:0 auto;max-width:60ch}

.hero::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(rgba(230,237,243,0.15) 1px,transparent 2px) 0 0/22px 22px,
    radial-gradient(rgba(230,237,243,0.07) 1px,transparent 2px) 11px 11px/22px 22px;
  opacity:.25;pointer-events:none;transform:translateY(var(--para,0px));transition:transform .1s linear;
}

/* ===== Tree Container ===== */
.tree-container {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: -50px;
  opacity: 0;
  animation: fadeInTree 2s ease-out forwards;
  animation-delay: 0.5s;
  overflow: visible;
}

#treeCanvas {
  filter: 
    drop-shadow(0 0 30px rgba(124, 58, 237, 0.4))
    drop-shadow(0 0 60px rgba(124, 58, 237, 0.2));
  transition: filter 0.3s ease, transform 0.3s ease;
}

#treeCanvas:hover {
  filter: 
    drop-shadow(0 0 40px rgba(124, 58, 237, 0.6))
    drop-shadow(0 0 80px rgba(124, 58, 237, 0.3));
  transform: scale(1.02);
}

@keyframes fadeInTree {
  from { 
    opacity: 0; 
    transform: translateY(-30px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* ===== Sections ===== */
.section{max-width:900px;margin:0 auto;padding:56px 24px 84px}
.section h2{margin:0 0 12px;font-size:clamp(22px,3vw,32px)}

.tech-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px 16px;padding-left:18px;color:var(--muted)
}
.tech-list li::marker{color:var(--accent)}

/* ===== Footer ===== */
.site-footer{
  text-align:center;color:var(--muted);
  padding:28px 16px 40px;border-top:1px solid var(--line)
}

/* ===== Reveal Animations ===== */
.hidden{opacity:0;transform:translateY(40px);transition:all .8s ease}
.revealed{opacity:1;transform:translateY(0)}

/* ===== About Grid ===== */
.about-grid{
  display:grid;grid-template-columns:3fr 2fr;gap:clamp(24px,4vw,48px);align-items:start;
}

.section-title{
  display:flex;align-items:center;gap:12px;font-size:clamp(22px,3vw,32px);margin:0 0 16px;color:var(--text);position:relative;
}
.section-title::before{content:"/";color:var(--text);opacity:.9;font-weight:700}
.section-title::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(to right,rgba(230,237,243,0.14),rgba(230,237,243,0.06));
  transform:translateY(2px);
}

.about .about-text p{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin:0 0 14px}

.tech-list.chevron{
  list-style:none;padding-left:0;margin-top:10px;
  display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:10px 32px;color:var(--text)
}
@media (min-width:900px){
  .tech-list.chevron{grid-template-columns:repeat(3,minmax(180px,1fr))}
}
.tech-list.chevron li{
  position:relative;padding-left:18px;color:var(--muted);font-weight:500
}
.tech-list.chevron li::before{
  content:"▸";position:absolute;left:0;top:0;color:var(--accent)
}

.about-photo{perspective:900px}
.about-photo img{
  height:320px;
  border-radius:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.about-photo:hover img{box-shadow:0 18px 40px rgba(0,0,0,.38)}

/* ===== Typing Effect ===== */
.name-typing{position:relative;color:var(--accent)}
.name-typing::after{display:none;}

.caret{
  display:inline-block;
  width:3px;
  height:1em;
  background:var(--accent);
  margin-left:4px;
  vertical-align:bottom;
  border-radius:1px;
  animation:blink 1s steps(1) infinite;
}

@keyframes blink{50%{opacity:0}}

.tech-list.chevron li{opacity:0;transform:translateY(12px);transition:all .5s ease}
.tech-list.chevron.reveal li{opacity:1;transform:translateY(0)}
.tech-list.chevron.reveal li:nth-child(1){transition-delay:.05s}
.tech-list.chevron.reveal li:nth-child(2){transition-delay:.1s}
.tech-list.chevron.reveal li:nth-child(3){transition-delay:.15s}
.tech-list.chevron.reveal li:nth-child(4){transition-delay:.2s}
.tech-list.chevron.reveal li:nth-child(5){transition-delay:.25s}
.tech-list.chevron.reveal li:nth-child(6){transition-delay:.3s}
.tech-list.chevron.reveal li:nth-child(7){transition-delay:.35s}
.tech-list.chevron.reveal li:nth-child(8){transition-delay:.4s}
.tech-list.chevron.reveal li:nth-child(9){transition-delay:.45s}

.glow{
  text-shadow:
    0 0 10px rgba(var(--accent-rgb),.35),
    0 0 20px rgba(var(--accent-rgb),.22)
}

/* ===== Responsive ===== */
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{order:-1;width:320px;margin:0 auto 12px}
  .about-photo img{height:320px}
}

@media (max-width: 768px) {
  .tree-container {
    height: 240px;
    margin-bottom: -30px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}



@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 50px rgba(124, 58, 237, 0.9));
  }
}

#animatedLogo {
  cursor: pointer;
}

@media (max-width: 768px) {
  #animatedLogo {
    width: 150px !important;
    height: 150px !important;
  }
}