/*
Theme Name: Raian Cyberpunk Pro
Theme URI: https://example.com/
Author: Raian
Description: Professional cyberpunk gaming portfolio theme with built-in portfolio builder, projects/skills management, profile image, 3D interactive scene and responsive UI.
Version: 3.0
License: GPL v2 or later
Text Domain: raian-cyberpro
*/
:root{
 --bg:#04050a;--panel:#0b0e17cc;--panel-solid:#0b0e17;--text:#f3f6ff;--muted:#919bb2;
 --cyan:#00f7ff;--pink:#ff1bd7;--purple:#7a5cff;--green:#75ff68;--line:#ffffff16;
 --shadow:0 30px 90px #0009;--radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(circle at 12% 12%,rgba(122,92,255,.18),transparent 28%),
 radial-gradient(circle at 88% 25%,rgba(0,247,255,.11),transparent 24%),
 linear-gradient(180deg,#020307 0%,var(--bg) 50%,#020307 100%);
color:var(--text);font-family:Tahoma,Arial,sans-serif;line-height:1.8;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:
 linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 4px);mix-blend-mode:screen}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1180px,92%);margin:auto}
.site-header{position:fixed;z-index:100;top:14px;left:50%;transform:translateX(-50%);width:min(1180px,94%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 14px;border:1px solid var(--line);
background:rgba(3,5,10,.62);backdrop-filter:blur(18px);border-radius:16px;box-shadow:0 20px 55px #0007}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand-mark{width:35px;height:35px;display:grid;place-items:center;
border:1px solid var(--cyan);color:var(--cyan);box-shadow:0 0 24px #00f7ff33;clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.brand-name{font-size:16px;letter-spacing:1px}.brand-name em{font-style:normal;color:var(--cyan)}
.menu{display:flex;gap:20px;font:700 11px/1 monospace;color:#cbd4e9;letter-spacing:1px}.menu a{position:relative;padding:8px 0}.menu a:after{content:"";position:absolute;right:0;bottom:-2px;width:0;height:1px;background:var(--cyan);transition:.25s;box-shadow:0 0 10px var(--cyan)}.menu a:hover{color:#fff}.menu a:hover:after{width:100%}
.hero{min-height:100vh;display:grid;align-items:center;position:relative;padding:145px 0 85px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero-copy{position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #00f7ff4b;background:#00f7ff0a;
color:var(--cyan);font:700 10px/1.2 monospace;letter-spacing:1.4px;border-radius:6px;text-transform:uppercase}
h1{font-size:clamp(46px,7.5vw,92px);line-height:1.03;letter-spacing:-3px;margin:18px 0 16px;font-weight:950}
.gradient-text{background:linear-gradient(100deg,#fff,var(--cyan) 40%,var(--purple) 70%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.glitch{position:relative;display:inline-block;text-shadow:3px 0 #ff1bd733,-3px 0 #00f7ff33}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.62}.glitch:before{transform:translateX(2px);clip-path:polygon(0 0,100% 0,100% 45%,0 45%);color:var(--cyan)}.glitch:after{transform:translateX(-2px);clip-path:polygon(0 58%,100% 58%,100% 100%,0 100%);color:var(--pink)}
.hero-description{font-size:17px;color:var(--muted);max-width:690px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:1px solid var(--line);border-radius:8px;background:#fff6;font-size:13px;transition:.25s;position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,#fff3 50%,transparent 65%);transform:translateX(-120%);transition:.45s}.btn:hover:before{transform:translateX(120%)}
.btn:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 14px 40px #0008}
.btn.primary{border-color:#00f7ff66;background:linear-gradient(135deg,#00f7ff18,#7a5cff1d);box-shadow:0 0 35px #00f7ff11}
.stats{display:flex;flex-wrap:wrap;gap:11px;margin-top:33px}.stat{min-width:120px;padding:10px 13px;border-right:2px solid var(--cyan);background:linear-gradient(270deg,#00f7ff08,transparent)}.stat b{display:block;font-size:23px}.stat span{font-size:10px;color:var(--muted)}
.hero-visual{height:520px;display:grid;place-items:center;position:relative;perspective:1200px}.hud{position:absolute;right:4%;top:3%;z-index:3;padding:10px 12px;border:1px solid var(--line);background:#05070dd9;backdrop-filter:blur(8px);font:10px/1.7 monospace;color:var(--muted);border-radius:7px}.hud strong{color:var(--green)}
.scene{width:320px;height:320px;position:relative;transform-style:preserve-3d;transition:transform .12s ease-out}
.scene .orbit{position:absolute;inset:0;border:1px solid #00f7ff55;border-radius:50%;box-shadow:0 0 40px #00f7ff11}.scene .o1{transform:rotateX(68deg);animation:orbit1 12s linear infinite}.scene .o2{transform:rotateY(66deg) rotateX(13deg);border-color:#ff1bd74a;animation:orbit2 9s linear infinite reverse}.scene .o3{inset:35px;transform:rotateX(72deg);border-color:#7a5cff45;animation:orbit3 7s linear infinite}
.core3d{position:absolute;left:50%;top:50%;width:155px;height:155px;transform:translate(-50%,-50%);transform-style:preserve-3d;animation:coreFloat 5s ease-in-out infinite}
.cface{position:absolute;inset:0;background:linear-gradient(135deg,#00f7ff17,#7a5cff20);border:1px solid #00f7ff66;backdrop-filter:blur(3px);box-shadow:inset 0 0 35px #00f7ff13,0 0 50px #00f7ff17}
.cfront{transform:translateZ(77px)}.cback{transform:rotateY(180deg) translateZ(77px)}.cright{transform:rotateY(90deg) translateZ(77px)}.cleft{transform:rotateY(-90deg) translateZ(77px)}.ctop{transform:rotateX(90deg) translateZ(77px)}.cbottom{transform:rotateX(-90deg) translateZ(77px)}
.core-label{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;font:700 13px/1.5 monospace;letter-spacing:2px;text-shadow:0 0 18px var(--cyan)}
.crosshair{position:absolute;inset:50%;width:430px;height:430px;transform:translate(-50%,-50%);pointer-events:none}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#00f7ff1d}.crosshair:before{left:50%;top:0;bottom:0;width:1px}.crosshair:after{top:50%;left:0;right:0;height:1px}
.pulse{position:absolute;inset:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:var(--cyan);box-shadow:0 0 25px 8px #00f7ff44}
.section{padding:105px 0;position:relative}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px}.section-tag{font:700 10px/1.2 monospace;letter-spacing:2px;color:var(--cyan)}.section h2{font-size:39px;line-height:1.15;margin:8px 0}.section-desc{max-width:560px;color:var(--muted);font-size:13px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.card{position:relative;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,#ffffff08,#ffffff02);padding:25px;box-shadow:var(--shadow);overflow:hidden;transition:.25s;transform-style:preserve-3d}
.card:before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--cyan);box-shadow:48px 0 var(--pink),96px 0 var(--purple)}.card:hover{border-color:#00f7ff38}
.card-title{margin:10px 0 5px;font-size:21px}.card-text{margin:0;color:var(--muted);font-size:13px}.icon{font-size:28px;color:var(--cyan);text-shadow:0 0 20px #00f7ff44}
.profile-wrap{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:stretch}.profile-card{display:flex;align-items:center;justify-content:center;min-height:280px}.profile-image{width:220px;height:220px;border-radius:10px;object-fit:cover;border:1px solid #00f7ff66;box-shadow:0 0 50px #00f7ff1a;filter:saturate(1.12) contrast(1.05)}.profile-placeholder{width:220px;height:220px;display:grid;place-items:center;border:1px dashed #00f7ff55;color:#68738b;border-radius:10px;font:11px monospace;text-align:center}
.skill-item{margin-top:19px}.skill-top{display:flex;justify-content:space-between;gap:12px;font:700 11px monospace;color:#dfe6f4}.bar{height:7px;background:#fff1;border-radius:99px;overflow:hidden;margin-top:8px}.fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));box-shadow:0 0 20px #00f7ff2a;border-radius:99px}
.project-card{min-height:300px;display:flex;flex-direction:column;justify-content:space-between}.project-image{height:145px;width:100%;object-fit:cover;border-radius:7px;border:1px solid var(--line);margin-bottom:14px}.project-label{font:700 10px monospace;color:var(--cyan);letter-spacing:1.7px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.tag{font:10px monospace;color:#c8d1e3;padding:4px 7px;background:#fff3;border:1px solid var(--line)}
.timeline{position:relative}.timeline:before{content:"";position:absolute;right:16px;top:0;bottom:0;width:1px;background:linear-gradient(var(--cyan),transparent)}.timeline-item{position:relative;padding:0 50px 25px 0}.timeline-dot{position:absolute;right:11px;top:5px;width:12px;height:12px;border:2px solid var(--cyan);background:var(--bg);box-shadow:0 0 16px #00f7ff55}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:17px}.contact-row{display:flex;justify-content:space-between;gap:15px;padding:12px 13px;border:1px solid var(--line);background:#fff2;margin-top:9px}.contact-row span{font:10px monospace;color:var(--muted)}.contact-row strong{font-size:12px}
.footer{padding:45px 0;border-top:1px solid var(--line);text-align:center;color:#677289;font:11px monospace}.footer b{color:var(--cyan)}
.reveal{opacity:0;transform:translateY(20px);transition:.65s}.reveal.visible{opacity:1;transform:none}
#cyber-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.43}
@keyframes orbit1{to{transform:rotateX(68deg) rotateZ(360deg)}}@keyframes orbit2{to{transform:rotateY(66deg) rotateX(13deg) rotateZ(-360deg)}}@keyframes orbit3{to{transform:rotateX(72deg) rotateZ(360deg)}}@keyframes coreFloat{50%{transform:translate(-50%,-50%) translateY(-13px) rotateX(4deg) rotateY(8deg)}}
@media(max-width:850px){.menu{display:none}.hero-grid,.contact-grid,.profile-wrap,.grid-2,.grid-3{grid-template-columns:1fr}.hero-visual{height:390px}.section{padding:78px 0}.section-head{display:block}.section-desc{margin-top:12px}h1{letter-spacing:-1.5px}.profile-card{min-height:0}}

.social-bio{color:var(--cyan);font-size:12px;margin-top:16px;font-weight:700}