/* Light, motion and depth — Kicyao visual edition. */
body{isolation:isolate}
.page-light{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--light-x,75%) var(--light-y,30%),rgba(var(--accent-rgb),.055),transparent 75%);transition:opacity .6s}
.header{background:linear-gradient(90deg,#080808dd,#10101599,#080808dd);backdrop-filter:blur(18px)}
.header:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#9855ff80,var(--accent),transparent);opacity:.5;transform-origin:left;animation:headerLight 9s ease-in-out infinite}
.hero-aura{position:absolute;inset:0;z-index:-6;pointer-events:none;background:radial-gradient(ellipse at 81% 38%,#6117a943,transparent 53%),radial-gradient(ellipse at 63% 90%,#284b962e,transparent 53%);animation:auraBreathe 12s ease-in-out infinite alternate}
.aurora-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-5;pointer-events:none;opacity:.78;mask-image:linear-gradient(180deg,transparent 0%,black 15%,black 85%,transparent 100%)}
.ambient-canvas{z-index:1;pointer-events:none;opacity:1;mix-blend-mode:screen}
.hero-wireframe{position:absolute;z-index:-3;left:0;right:0;bottom:-125px;height:370px;background-image:linear-gradient(rgba(var(--accent-rgb),.18) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.18) 1px,transparent 1px);background-size:64px 64px;transform:perspective(400px) rotateX(62deg);mask-image:radial-gradient(ellipse at 68% 50%,#000,transparent 68%);opacity:.47;pointer-events:none}
.hero-art{transition:transform .8s var(--ease);filter:drop-shadow(0 0 34px #851ffa20)}
.hero-art img{filter:hue-rotate(var(--art-hue,0deg)) saturate(1.18) contrast(1.04)}
.art-float{animation:sculptureFloat 12s ease-in-out infinite}
.hero-orbit{border-color:#ffffff19;box-shadow:0 0 80px #863aff0a,inset 0 0 80px #863aff09}
.hero-orbit:before{content:"";position:absolute;top:12%;left:14%;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 26px var(--accent);animation:orbitSpark 8s ease-in-out infinite alternate}
.orbit-two{border-style:dashed;border-color:#ac6bf124;animation:orbitTurn 45s linear infinite}
.orbit-label{position:absolute;z-index:2;display:flex;align-items:center;gap:13px;padding:13px 18px;border:1px solid #ffffff26;border-radius:5px;backdrop-filter:blur(16px);background:#12101b75;font-size:12px;letter-spacing:1px;pointer-events:none;box-shadow:0 10px 40px #0003}
.orbit-label-one{right:5%;top:15%;transform:rotate(9deg);animation:labelFloat 7s ease-in-out infinite alternate}
.orbit-label-one>span{color:var(--accent);font-size:28px;line-height:1}
.orbit-label-two{right:31%;bottom:18%;transform:rotate(-10deg);border-color:rgba(var(--accent-rgb),.3);animation:labelFloat 8s ease-in-out -3s infinite alternate}
.orbit-label-two>span{font-size:23px;color:var(--accent)}
.hero h1{overflow:visible;isolation:isolate;text-shadow:0 0 65px #0006}
.hero h1>span{width:max-content;max-width:100%;background:linear-gradient(110deg,#fff 14%,#f5f4f0 37%,#b7bbc7 44%,#fff 49%,#dcdde7 54%,#fafaf6 64%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:titleIn 1.15s var(--ease) both,chromeSweep 12s 1.2s ease-in-out infinite;text-shadow:none}
.hero h1 i{color:var(--accent);text-shadow:0 0 50px rgba(var(--accent-rgb),.3)}
.hero-statement>span{background:linear-gradient(105deg,#bdbab5,#bc9de1 60%,#aabccd);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-description{color:#c3c1c5}.hero-intro{color:#d7d5dc}
.button-primary{background:linear-gradient(120deg,#1e2020b8,#0d0d138c);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 0 35px rgba(var(--accent-rgb),.07),inset 0 1px 0 #ffffff16;position:relative;overflow:hidden}
.button-primary:before{content:"";position:absolute;top:-70%;bottom:-70%;left:-70%;width:30%;background:linear-gradient(90deg,transparent,#ffffff1c,transparent);transform:rotate(24deg);animation:buttonSheen 7s 2s ease-in-out infinite;pointer-events:none}
.button-primary:hover{box-shadow:0 0 50px rgba(var(--accent-rgb),.18)}
.button-arrow{box-shadow:0 0 19px rgba(var(--accent-rgb),.23)}
.marquee{position:relative;transform:rotate(-1.6deg) scale(1.025);z-index:4;background:linear-gradient(100deg,#16121f,#101a16 65%,#111119);border-top-color:#b181ff45;border-bottom-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 80px #9963ff0c}
.marquee-track i{filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.2))}.outline-word{-webkit-text-stroke-color:#b8aac8}
.about{position:relative;isolation:isolate;overflow:hidden;padding-top:125px;padding-bottom:130px}
.about:before{content:"";position:absolute;z-index:-2;left:-14%;bottom:-40%;width:80%;height:130%;background:radial-gradient(ellipse,#613d6b24,transparent 68%);pointer-events:none}
.about-title-wrap{position:relative;padding-bottom:10px}
.about-watermark{position:absolute;left:-.06em;top:-.22em;z-index:-1;font-size:clamp(130px,17vw,255px);font-weight:800;letter-spacing:-.09em;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff09;pointer-events:none}
.signature{display:flex;align-items:center;gap:16px;margin-top:40px;color:#aaa4af;font-size:15px}.signature-line{width:42px;height:1px;background:linear-gradient(90deg,#ae7cf5,var(--accent))}.signature i{font-style:normal;color:#68616e;margin:0 9px}.signature-star{color:var(--accent);font-size:30px;line-height:1;animation:slowSpin 25s linear infinite}
.about-copy{position:relative;padding:30px 32px;background:linear-gradient(135deg,#26212b8c,#14161770);border:1px solid #ffffff15;border-radius:5px;box-shadow:inset 0 1px 0 #ffffff0a}
.about-copy:before{content:"";position:absolute;left:-1px;top:18%;height:65%;width:1px;background:linear-gradient(transparent,#b888ff,var(--accent),transparent)}
.name-highlight{color:var(--accent)}.skill-tags span{background:#ffffff04;border-color:#59505f;padding:10px 13px}
.social-section{position:relative;isolation:isolate}.social-section:before{content:"";position:absolute;inset:7% 0 -2%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 3% 56%,#ff79270c,transparent 45%),radial-gradient(ellipse at 97% 80%,#793cf31c,transparent 55%)}
.social-grid{perspective:1300px;gap:19px}
.social-card{--platform-rgb:220,255,95;background:linear-gradient(145deg,rgba(var(--platform-rgb),.12),#101016 58%);border-color:rgba(var(--platform-rgb),.24);border-radius:10px;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s var(--ease),border-color .4s,box-shadow .5s,opacity .8s;isolation:isolate;box-shadow:inset 0 1px 0 #ffffff0c;min-height:285px}
.social-card.soundcloud{--platform-rgb:255,119,56}.social-card.telegram{--platform-rgb:54,175,226}.social-card.discord{--platform-rgb:148,154,255}.social-card.russia{--platform-rgb:239,101,101}.social-card.steam{--platform-rgb:105,184,233}
.social-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(460px circle at var(--spot-x,70%) var(--spot-y,0%),rgba(var(--platform-rgb),.2),transparent 75%);opacity:.3;transition:opacity .5s;pointer-events:none}
.social-card:after{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--spot-x,0%) var(--spot-y,0%),rgba(var(--platform-rgb),.9),transparent 80%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:0;transition:opacity .4s;pointer-events:none}
.social-card:hover{border-color:rgba(var(--platform-rgb),.65);box-shadow:0 20px 60px #0005,0 0 35px rgba(var(--platform-rgb),.09)}.social-card:hover:before,.social-card:hover:after{opacity:1}
.js-ready .social-card.reveal.is-visible{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px));transition:opacity .8s var(--ease),transform .6s var(--ease),border-color .4s,box-shadow .5s}
.card-top{min-height:48px}.platform-logo{filter:drop-shadow(0 0 14px rgba(var(--platform-rgb),.26));transition:transform .6s var(--ease),filter .6s}.social-card:hover .platform-logo{transform:scale(1.12) rotate(-7deg);filter:drop-shadow(0 0 19px rgba(var(--platform-rgb),.6))}.steam .platform-logo,.steam:hover .platform-logo{filter:brightness(0) invert(1) drop-shadow(0 0 14px #499ee755)}
.card-arrow{height:42px;width:42px;border:1px solid #ffffff17;border-radius:50%;display:grid;place-items:center;font-size:25px}.social-card:hover .card-arrow{background:rgba(var(--platform-rgb),.1)}
.card-body h3{letter-spacing:-1.2px}.card-eyebrow{color:#bbb6c0}.card-handle{color:#c5c0ca}.soundcloud-watermark{width:255px;height:165px;right:24px;bottom:24px;opacity:.14}
.sound-waves{position:absolute;right:15px;bottom:0;height:75%;width:50%;display:flex;justify-content:center;align-items:center;gap:6px;opacity:.12;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent)}
.sound-waves i{display:block;width:5px;flex-shrink:0;height:var(--bar-height,45%);border-radius:10px;background:linear-gradient(#ffa5b7,#ffab57);transform-origin:center;animation:soundWave var(--bar-time,3s) ease-in-out var(--bar-delay,0s) infinite alternate}.soundcloud:hover .sound-waves{opacity:.23}
.contact-section{isolation:isolate;position:relative;overflow:hidden;border-top-color:#8875a53b;background:linear-gradient(180deg,#110e1740,#080808 92%)}
.contact-aura{position:absolute;z-index:-2;width:85%;height:90%;right:-26%;top:-20%;background:conic-gradient(from 20deg at 50% 50%,transparent,#8447ea45,#3a29a033,#82ffd626,transparent 65%);filter:blur(75px);border-radius:50%;animation:contactGlow 20s ease-in-out infinite alternate;pointer-events:none}
.contact-watermark{position:absolute;z-index:-1;top:100px;right:-.05em;writing-mode:vertical-rl;line-height:.8;color:transparent;-webkit-text-stroke:1px #b594ec10;font-size:clamp(100px,15vw,215px);font-weight:800;letter-spacing:-.06em;pointer-events:none}
.contact-heading h2 em{background:linear-gradient(105deg,var(--accent) 5%,#ebffd5 45%,#baa1ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.contact-heading h2 .end-asterisk{filter:drop-shadow(0 0 35px rgba(var(--accent-rgb),.22))}
.contact-row{position:relative;isolation:isolate}.contact-row:before{content:"";position:absolute;inset:0 -20px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.07),#be86ff08,transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1;pointer-events:none}.contact-row:hover:before{transform:scaleX(1)}
.contact-value{color:#bbb5c4}.contact-index{color:#a19aaa}.footer{position:relative;background:linear-gradient(90deg,#12101988,#080808)}
@keyframes sculptureFloat{0%,100%{transform:translate3d(0,-13px,0) rotate(-6deg) scale(1)}50%{transform:translate3d(0,14px,0) rotate(5deg) scale(1.045)}}
@keyframes chromeSweep{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@keyframes auraBreathe{from{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}
@keyframes orbitTurn{from{transform:rotate(30deg) scaleY(.82)}to{transform:rotate(390deg) scaleY(.82)}}
@keyframes orbitSpark{from{opacity:.4;filter:blur(0px)}to{opacity:1;filter:blur(1px)}}
@keyframes labelFloat{from{translate:0 -6px}to{translate:0 10px}}
@keyframes buttonSheen{0%,60%{left:-70%}95%,100%{left:160%}}
@keyframes headerLight{0%,100%{opacity:.25;transform:scaleX(.65)}50%{opacity:.8;transform:scaleX(1)}}
@keyframes soundWave{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes contactGlow{from{transform:rotate(-15deg) scale(.9)}to{transform:rotate(35deg) scale(1.15)}}
@media(max-width:1100px){.about-grid{gap:5%}.about-copy{padding:24px}.orbit-label-one{top:12%;right:4%}.orbit-label-two{right:16%;bottom:15%}.hero-art{opacity:.95}.social-card{min-height:285px}}
@media(max-width:760px){.hero-intro{gap:10px;letter-spacing:1px}.hero-aura{background:radial-gradient(ellipse at 90% 63%,#9225df4d,transparent 58%),radial-gradient(ellipse at 20% 95%,#233d7a44,transparent 50%)}.aurora-canvas{opacity:.5;mask-image:linear-gradient(180deg,transparent 10%,#000 45%,#000 90%,transparent)}.hero-art{opacity:.95}.hero h1>span{animation:titleIn 1.15s var(--ease) both,chromeSweep 12s 1.2s ease-in-out infinite}.hero-wireframe{bottom:-85px;height:280px;opacity:.4}.orbit-label{font-size:12px;padding:10px 12px;gap:8px}.orbit-label-one{top:auto;bottom:21%;right:6%;font-size:12px;max-width:230px}.orbit-label-one>span{font-size:20px}.orbit-label-two{bottom:10%;right:auto;left:var(--gutter);font-size:12px;padding:9px 11px}.hero-bottom{bottom:20px}.about{padding-top:90px;padding-bottom:75px}.about-grid{gap:35px}.about-watermark{font-size:36vw;top:-.09em}.about-copy{padding:25px 22px}.signature{margin-top:26px;font-size:14px;gap:12px}.signature-star{font-size:25px}.social-grid{gap:14px}.social-card{min-height:253px}.card-top{min-height:42px}.card-arrow{width:34px;height:34px;font-size:22px}.soundcloud-watermark{width:190px;right:15px;bottom:20px}.sound-waves{gap:4px}.sound-waves i{width:4px}.contact-aura{width:130%;right:-70%;filter:blur(50px)}.contact-watermark{font-size:24vw;right:-.2em;top:140px}.contact-heading h2{font-size:clamp(80px,17vw,120px)}.contact-value{font-size:14px}.contact-row:before{inset:0 -12px}.marquee{transform:rotate(-2deg) scale(1.04)}}
@media(max-width:380px){.hero-intro{font-size:12px;gap:7px;letter-spacing:.5px}.hero-intro .small-cross{font-size:20px}.orbit-label-one{bottom:22%;right:5%;font-size:12px;max-width:205px}.orbit-label-two{bottom:11%;left:19px}.about-copy{padding:23px 18px}}
@media(hover:none){.social-card,.js-ready .social-card.reveal.is-visible{transform:none}.page-light{display:none}}
.is-paused .social-card,.is-paused .js-ready .social-card.reveal.is-visible{transform:none}.is-paused .social-card:before{background:radial-gradient(460px circle at 70% 0%,rgba(var(--platform-rgb),.2),transparent 75%)}.is-paused .page-light{opacity:0}.is-paused .hero h1>span{background-position:50% 50%}
@media(prefers-reduced-motion:reduce){.social-card,.js-ready .social-card.reveal.is-visible{transform:none!important}.page-light{display:none}.hero h1>span{background-position:50% 50%}.hero-aura,.hero-wireframe,.orbit-label,.marquee{animation:none!important}}