/* Starfield + nebula live inside the hero only; the rest of the page keeps the grid */
.starfield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* .nebula{position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(24px);
    background:
    radial-gradient(40% 35% at 25% 30%,rgba(92, 90, 200, 0.17),transparent 70%),
    radial-gradient(35% 30% at 75% 60%,rgba(217,185,138,.09),transparent 70%),
    radial-gradient(30% 30% at 50% 92%,rgba(70,120,200,.13),transparent 70%);
    animation:nebulaDrift 70s ease-in-out infinite alternate}
@keyframes nebulaDrift{to{transform:translate(4%,-3%) rotate(6deg) scale(1.08)}} */

/* Planets orbiting the profile photo */
.orbit{position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(217,185,138,.18);animation:orbit 28s linear infinite}
.orbit.o1{inset:-13%}
.orbit.o2{inset:-26%;border-color:rgba(130,150,230,.16);animation-duration:46s;animation-direction:reverse}
.planet{position:absolute;top:0;left:50%;border-radius:50%;transform:translate(-50%,-50%)}
.o1 .planet{width:16px;height:16px;background:radial-gradient(circle at 30% 30%,#f7e7c6,#d9b98a 45%,#6b4f26);box-shadow:0 0 18px rgba(217,185,138,.6)}
.o2 .planet{width:22px;height:22px;background:radial-gradient(circle at 30% 30%,#c4d0ff,#5a6fd6 50%,#1b2250);box-shadow:0 0 22px rgba(110,140,255,.5)}
.o2 .planet::after{content:"";position:absolute;left:-60%;top:38%;width:220%;height:24%;border:1.5px solid rgba(196,208,255,.55);border-radius:50%;transform:rotate(-20deg)}
@keyframes orbit{to{transform:rotate(360deg)}}

/* Scroll progress: glowing comet head on the bar */
header::before{content:"";position:absolute;bottom:-3px;left:calc(var(--p,0) * 100%);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px var(--accent);z-index:1}

/* Timeline dots twinkle like stars
.timeline-item.show .timeline-dot{animation:twinkle 3s ease-in-out 1s infinite}
@keyframes twinkle{50%{box-shadow:0 0 0 4px var(--bg2),0 0 18px 5px rgba(217,185,138,.7)}} */

/* ===== Body sections ===== */

/* Numbered section labels + drawn line */
.section-title{position:relative}
.section-title[data-no]::before{content:attr(data-no);display:block;margin-bottom:12px;color:var(--accent);font-size:.9rem;letter-spacing:.2em}
.section-title[data-no]::after{content:"";position:absolute;left:2.6rem;top:.55rem;width:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent);transition:width 1.2s ease .3s}
.section-title.show[data-no]::after{width:120px}

/* Outlined watermark word behind each heading (parallax on scroll) */
.wm{position:absolute;left:-.04em;top:-.45em;white-space:nowrap;pointer-events:none;text-transform:uppercase;font:500 clamp(4rem,12vw,9rem)/1 var(--font-head);color:transparent;-webkit-text-stroke:1px rgba(217,185,138,.13);translate:var(--wx,0px) 0}

/* Drifting planets in the margins */
section[id]:not(.hero){position:relative}
.deco{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;translate:0 var(--py,0px);animation:bob 9s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px)}}
.deco.p-gold{width:170px;height:170px;opacity:.5;background:radial-gradient(circle at 32% 30%,#f2dcae,#d9b98a 40%,#5d4421 85%);box-shadow:inset -18px -14px 40px rgba(0,0,0,.55),0 0 60px rgba(217,185,138,.15)}
.deco.p-gold::after{content:"";position:absolute;left:-45%;top:38%;width:190%;height:26%;border:2px solid rgba(242,220,174,.45);border-radius:50%;transform:rotate(-18deg)}
.deco.p-blue{width:120px;height:120px;opacity:.45;background:radial-gradient(circle at 30% 30%,#c4d0ff,#4f63c9 50%,#141a45);box-shadow:inset -14px -10px 30px rgba(0,0,0,.6),0 0 50px rgba(110,140,255,.15)}
.deco.p-moon{width:70px;height:70px;opacity:.4;background:radial-gradient(circle at 32% 30%,#e9e6ef,#8f8a9c 55%,#34303d);box-shadow:inset -8px -6px 18px rgba(0,0,0,.6)}
@media(max-width:1000px){.deco,.wm{display:none}}

/* Stats band overlapping the hero's lower edge */
.stats{padding-block:0;margin-top:-48px;position:relative;z-index:3}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.stat{padding:28px;text-align:center}
.stat+.stat{border-left:1px solid var(--line)}
.stat strong{display:block;font:500 clamp(2rem,4vw,3rem)/1 var(--font-head);color:var(--accent);margin-bottom:6px}
.stat span{color:var(--muted);font-size:.95rem}
@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid var(--line)}}

/* Card borders: a gold light travels around on hover
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spinAng{to{--ang:360deg}}
.project-card,.certificate-card{position:relative}
.project-card::after,.certificate-card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
    background:conic-gradient(from var(--ang),transparent 0 70%,var(--accent) 90%,transparent);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinAng 4s linear infinite}
.project-card:hover::after,.certificate-card:hover::after{opacity:1} */

/* Footer as a planet horizon */
.footer{position:relative;margin-top:40px;border-radius:50% 50% 0 0 / 70px 70px 0 0;box-shadow:inset 0 1px 0 rgba(217,185,138,.45),0 -12px 60px rgba(217,185,138,.12)}

/* Rocket back-to-top
.to-top{position:fixed;right:24px;bottom:24px;z-index:900;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);
     background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .3s,border-color .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--accent)}
.to-top i{transform:rotate(-45deg)}
.to-top.launch{pointer-events:none;animation:launch .9s ease-in forwards}
.to-top.launch i{filter:drop-shadow(0 10px 8px rgba(255,170,70,.9))}
@keyframes launch{to{transform:translateY(-110vh) scale(1.3);opacity:0}} */