/* FILE: bio.css */
:root{
--glass: rgba(255,255,255,0.04);
--glass-2: rgba(255,255,255,0.02);
--silver: #c6c8cc;
--muted: #9da3a8;
--accent-from: #7fb2ff;
--accent-to: #bfe8ff;
--accent-speed: 6s;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;}
body{background:#02050a;color:var(--silver);overflow:auto}
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.overlay{position:fixed;inset:0;background:linear-gradient(180deg, rgba(2,3,6,0.3), rgba(2,3,6,0.6));backdrop-filter:blur(6px) saturate(120%);z-index:1}
.card{position:relative;z-index:2;max-width:1100px;margin:40px auto;padding:22px;display:grid;grid-template-columns:420px 1fr;gap:18px}
.block{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));padding:18px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,0.6);backdrop-filter:blur(10px) saturate(120%);border:1px solid rgba(255,255,255,0.04);transition:transform 220ms ease,box-shadow 220ms ease}
.interactive:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,0.6)}
.about{display:flex;gap:16px;align-items:center}
.avatar{width:96px;height:96px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,0.06)}
.about-text{min-width:0}
.greeting{font-size:28px;margin:0;line-height:1.05;font-weight:700}
.silver-text{color:var(--silver);font-weight:600;margin-right:8px}
.name{font-weight:900; background:linear-gradient(90deg,var(--accent-from),var(--accent-to)); -webkit-background-clip: text; background-clip:text; color:transparent; background-size:200% 100%; animation:gradShift var(--accent-speed) linear infinite}
.name-link{background:linear-gradient(90deg,var(--accent-from),var(--accent-to));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradShift var(--accent-speed) linear infinite}
.sub{color:var(--muted);font-size:13px;margin-top:8px}
.accent-link{color:inherit;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.accent-link:hover{border-bottom-color:rgba(255,255,255,0.08)}

.widgets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.widget h3{margin:0 0 10px 0;font-size:13px;color:var(--silver);font-weight:700;display:flex;align-items:center;gap:8px}
.time #time{font-family:monospace;font-size:20px}
.tz{font-size:11px;color:var(--muted);margin-top:6px}
.weather-main{display:flex;gap:12px;align-items:center}
.weather-icon{font-size:36px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px}
.weather-icon i{font-size:26px}
.weather-temp{font-size:18px;font-weight:700}

/* weather variants */
.w-sunny{background:linear-gradient(180deg, rgba(191,232,255,0.06), rgba(127,178,255,0.03));color:var(--accent-from)}
.w-cloud{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--muted)}
.w-rain{background:linear-gradient(180deg, rgba(127,178,255,0.04), rgba(191,232,255,0.02));color:var(--accent-from)}
.w-thunder{background:linear-gradient(180deg, rgba(200,150,255,0.04), rgba(200,150,255,0.02));color:#ffd27a}
.w-snow{background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));color:#9bdcff}
.w-fog{background:linear-gradient(180deg, rgba(180,180,180,0.03), rgba(180,180,180,0.01));color:var(--muted)}

.projects-list{display:flex;flex-direction:column;gap:12px}
.project{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));}
.github{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.02);font-weight:600;color:var(--silver)}
.legendcraft{display:flex;flex-direction:column;gap:8px}
.online-row{display:flex;align-items:center;gap:8px}

/* Donut */
.donut{display:block}
.donut-bg{stroke:rgba(255,255,255,0.04)}
.donut-progress{stroke: #9fc9ff;}
.donut-text{font-size:14px;fill:var(--silver);font-weight:700}

/* Stack blocks */
.stack-grid{display:flex;flex-wrap:wrap;gap:12px}
.lang{position:relative;padding:12px;border-radius:12px;background:rgba(255,255,255,0.02);color:var(--silver);font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;text-align:center;overflow:hidden;z-index:0;transition:transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease}
.lang-name{z-index:2}
.lang-below{font-size:12px;color:var(--muted);margin-top:6px;z-index:2}
.lang.active:hover{transform:translateY(-8px);box-shadow:0 14px 30px rgba(0,0,0,0.6)}

/* Radial overlay that looks like a circular fill (donut-ish) */
.lang::after{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:1;transform:scale(0);transform-origin:50% 50%;transition:transform 420ms cubic-bezier(.2,.9,.2,1),opacity 320ms ease;opacity:0}
.lang.active::after{background:radial-gradient(circle at 50% 30%, rgba(191,232,255,0.55) 0%, rgba(127,178,255,0.25) 40%, rgba(127,178,255,0.12) 60%, rgba(255,255,255,0.02) 100%)}
.lang.active:hover::after{transform:scale(1.05);opacity:1}

/* Java specific: red border, static (no hover transform, no fill) */
.lang.java{border:2px solid rgba(255,92,122,0.95);color:#3b2430;background:linear-gradient(180deg, rgba(255,224,236,0.04), rgba(255,224,236,0.02))}
.lang.java.static{cursor:default}
.lang.java.static:hover{transform:none;box-shadow:none}
.lang.java::after{display:none}

/* ensure text stays above overlay */
.lang *{position:relative}

/* footer */
.footer{grid-column:1/-1;text-align:center;opacity:0.5;font-size:12px;color:var(--silver);margin-top:4px}

/* hover movement for other elements */
.block .project, .github, .avatar{transition:transform 220ms ease,box-shadow 220ms ease}
.block .project:hover, .github:hover{transform:translateY(-6px)}

/* responsive */
@media (max-width:920px){
.card{grid-template-columns:1fr;max-width:920px;margin:20px}
.widgets{grid-template-columns:1fr}
}

@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}