/* tech.css — loads after style.css and layers the new look on top */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{--cyan:#4de2ff;--violet:#8b5cf6;--glass:rgba(255,255,255,.045);--glass-line:rgba(255,255,255,.14)}
body::before,body::after{content:"";position:fixed;z-index:-2;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.38;pointer-events:none}
body::before{background:radial-gradient(circle,var(--violet),transparent 65%);top:-25vmax;right:-15vmax;animation:drift 22s ease-in-out infinite alternate}
body::after{background:radial-gradient(circle,var(--cyan),transparent 65%);bottom:-30vmax;left:-20vmax;opacity:.22;animation:drift 28s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
body::selection,::selection{background:var(--star);color:#fff}

.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(77,226,255,.13),transparent 62%);transition:opacity .3s}

/* floating glass nav */
.nav{top:12px;margin:12px auto 0;width:min(1100px,92%);padding:.55rem 1rem;border:1px solid var(--glass-line);border-radius:99px;background:rgba(10,15,36,.55);box-shadow:0 10px 40px rgba(0,0,0,.35)}
#nav-links a{border:0;border-radius:99px}
#nav-links a:hover,#nav-links a.active{background:rgba(255,255,255,.09)}
#bar{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--star))}

/* hero */
.name{background:linear-gradient(100deg,#fff 20%,#c9d6ff 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.streak{background:linear-gradient(90deg,transparent,var(--cyan),var(--star))}
.streak i{-webkit-text-fill-color:var(--star)}
.role{font:500 1.15rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cyan);margin-top:1.4rem;min-height:1.8em;animation:rise .9s 1.3s both}
.caret{display:inline-block;width:.55ch;height:1.1em;background:var(--cyan);margin-left:3px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lead{margin-top:1rem}

/* portrait: rotating neon ring + 3D tilt */
.arch{width:min(210px,62vw);border:0;padding:3px;background:conic-gradient(from var(--a),var(--cyan),var(--violet),var(--star),var(--cyan));animation:rise 1.2s .7s both,ring 6s linear infinite;box-shadow:0 30px 90px rgba(139,92,246,.3);perspective:800px}
.arch img{border-radius:inherit;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.03);transition:transform .25s ease-out}
@keyframes ring{to{--a:360deg}}

/* buttons */
.btn{backdrop-filter:blur(8px);background:var(--glass)}
.btn.primary{background:linear-gradient(120deg,var(--red),#b4137a 60%,var(--violet));border:0}
.btn.primary:hover{background:linear-gradient(120deg,var(--red),#b4137a 60%,var(--violet));box-shadow:0 10px 34px rgba(139,92,246,.5)}

/* skills ticker */
.ticker{overflow:hidden;border-block:1px solid var(--glass-line);padding:1.1rem 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);width:100%}
.ticker div{display:flex;gap:2.5rem;width:max-content;animation:tick 28s linear infinite;font:800 clamp(1.4rem,3.5vw,2.2rem) 'Bricolage Grotesque',sans-serif;color:rgba(242,240,255,.85)}
.ticker span:nth-child(even){color:var(--star)}
@keyframes tick{to{transform:translateX(-50%)}}

/* glass surfaces with a pointer spotlight */
.code,.robot,.gallery-item,#contact-form,.areas li{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px)}
#contact-form{padding:1.8rem;border-radius:24px}
.code{background:rgba(13,19,48,.7)}
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(77,226,255,.2),transparent 70%)}
.spot:hover::after{opacity:1}
.robot.spot::after{opacity:0}
.gallery-item{transition:transform .3s,border-color .3s,box-shadow .3s}
.gallery-item:hover{transform:translateY(-6px);border-color:rgba(77,226,255,.55);box-shadow:0 18px 50px rgba(77,226,255,.14)}
.areas li{transition:color .2s,border-color .2s}
.areas li:hover{color:#fff;border-color:var(--cyan)}
.facts dd{transition:transform .35s var(--ease),color .3s}
.facts div:hover dd{transform:translateX(14px);color:var(--cyan)}
input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(77,226,255,.15)}
h2{background:linear-gradient(100deg,#fff,#aab6e8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

@media(max-width:900px){.arch{width:min(180px,52vw)}}
@media(max-width:768px){.nav{border-radius:22px;top:8px}.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){.arch{animation:none}.ticker div{animation:none}.cursor-glow{display:none}}

/* robot photo: smaller so the low-res image stays sharp */
.robot{width:100%;max-width:210px;min-height:0;aspect-ratio:1/1;justify-self:center}
.robot img{min-height:0;height:100%;object-position:center top}

/* compact avatar: round photo, neon ring, orbiting star */
.arch{width:min(190px,60vw);aspect-ratio:1/1;border-radius:50%;overflow:visible;position:relative;box-shadow:0 0 0 6px rgba(8,12,26,.6),0 20px 60px rgba(139,92,246,.35)}
.arch img{border-radius:50%;object-position:50% 38%;border:3px solid var(--ink)}
.arch::before,.arch::after{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;animation:orbit 10s linear infinite}
.arch::after{border:1px dashed rgba(77,226,255,.35);animation-duration:24s;animation-direction:reverse}
.arch::before{background:radial-gradient(circle at 50% 0,var(--star) 0 4px,transparent 5px);filter:drop-shadow(0 0 8px var(--star));z-index:2}
@keyframes orbit{to{rotate:360deg}}
@media(max-width:900px){.arch{width:min(150px,46vw)}}
@media(prefers-reduced-motion:reduce){.arch::before,.arch::after{animation:none}}

/* About: compact glass cards with small type */
#about-section h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:1.6rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.facts div,.facts div:last-child{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.4rem;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.facts div::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--cyan),var(--violet),transparent);opacity:.8}
.facts div:hover{transform:translateY(-4px);border-color:rgba(77,226,255,.5);box-shadow:0 14px 36px rgba(77,226,255,.12)}
.facts dt{display:flex;align-items:center;gap:.5rem;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.facts dt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--star);box-shadow:0 0 8px var(--star)}
.facts dd,.facts div:hover dd{font:700 1.15rem/1.35 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;color:var(--text);transform:none}

/* ticker: small mono chips */
.ticker{padding:.8rem 0;border:0;background:linear-gradient(90deg,transparent,rgba(77,226,255,.05),transparent)}
.ticker div{gap:.9rem;align-items:center;font:500 .78rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;animation-duration:36s}
.ticker:hover div{animation-play-state:paused}
.ticker span{color:var(--text-muted)}
.ticker span:nth-child(odd){padding:.5rem 1.1rem;border:1px solid var(--glass-line);border-radius:99px;background:var(--glass);backdrop-filter:blur(10px);transition:color .2s,border-color .2s,box-shadow .2s}
.ticker span:nth-child(odd):hover{color:#fff;border-color:var(--cyan);box-shadow:0 0 18px rgba(77,226,255,.25)}
.ticker span:nth-child(even){font-size:.6rem;color:var(--star);text-shadow:0 0 8px var(--star)}