/* ======================================================
   PROFF PORTFOLIO
   HOLLOWFROST EDITION
====================================================== */

:root{

--bg:#050816;
--bg2:#0a1025;
--primary:#8B5CF6;
--secondary:#6D5CFF;
--text:#ffffff;
--muted:#b5b5d3;
--glass:rgba(255,255,255,.07);
--border:rgba(255,255,255,.12);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

cursor:none;

}

/* ===================================
BACKGROUND
=================================== */

.background-gradient{

position:fixed;

inset:0;

background:

radial-gradient(circle at 20% 20%,rgba(139,92,246,.25),transparent 35%),

radial-gradient(circle at 80% 10%,rgba(95,111,255,.18),transparent 35%),

radial-gradient(circle at 50% 100%,rgba(95,255,255,.08),transparent 40%),

linear-gradient(180deg,#050816,#080b18,#050816);

z-index:-5;

animation:bgmove 15s ease-in-out infinite;

}

@keyframes bgmove{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* ===================================
SNOW CANVAS
=================================== */

#snow{

position:fixed;

inset:0;

pointer-events:none;

z-index:-2;

}

/* ===================================
CURSOR
=================================== */

#cursor{

width:18px;
height:18px;

border-radius:50%;

background:#8B5CF6;

position:fixed;

left:0;
top:0;

pointer-events:none;

z-index:9999;

box-shadow:

0 0 20px #8B5CF6,

0 0 40px #8B5CF6;

transition:

transform .15s ease;

}

#cursor-blur{

width:55px;
height:55px;

position:fixed;

border-radius:50%;

background:rgba(139,92,246,.18);

filter:blur(18px);

pointer-events:none;

z-index:9998;

}

/* ===================================
HEADER
=================================== */

header{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

padding:18px 35px;

display:flex;

justify-content:space-between;

align-items:center;

border:1px solid var(--border);

background:rgba(12,16,35,.55);

backdrop-filter:blur(25px);

border-radius:18px;

z-index:100;

}

.logo{

font-size:24px;

font-weight:800;

letter-spacing:2px;

color:white;

}

nav{

display:flex;

gap:30px;

}

nav a{

text-decoration:none;

color:var(--muted);

transition:.3s;

font-weight:500;

position:relative;

}

nav a:hover{

color:white;

}

nav a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}

nav a:hover::after{

width:100%;

}

/* ===================================
SECTIONS
=================================== */

section{

min-height:100vh;

padding:140px 10%;

display:flex;

justify-content:center;

flex-direction:column;

}

/* ===================================
HOME
=================================== */

#home{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.small{

color:var(--primary);

letter-spacing:5px;

font-size:13px;

margin-bottom:18px;

}

h1{

font-size:82px;

font-weight:900;

line-height:1;

}

h1 span{

display:block;

background:linear-gradient(90deg,#8B5CF6,#C89CFF);

-webkit-background-clip:text;

color:transparent;

}

.description{

margin-top:30px;

max-width:550px;

line-height:1.8;

color:var(--muted);

font-size:18px;

}

.buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.buttons a{

padding:16px 34px;

border-radius:15px;

text-decoration:none;

color:white;

font-weight:700;

transition:.35s;

}

.buttons a:first-child{

background:linear-gradient(135deg,#8B5CF6,#6D5CFF);

box-shadow:0 0 40px rgba(139,92,246,.4);

}

.buttons a:last-child{

border:1px solid var(--border);

background:rgba(255,255,255,.05);

}

.buttons a:hover{

transform:translateY(-6px);

}

/* ===================================
AVATAR
=================================== */

.glass-avatar{

display:flex;

justify-content:center;

align-items:center;

}

.circle{

width:280px;

height:280px;

border-radius:50%;

background:

linear-gradient(145deg,#8B5CF6,#5E5EFF);

display:flex;

justify-content:center;

align-items:center;

font-size:120px;

font-weight:900;

box-shadow:

0 0 60px rgba(139,92,246,.45);

animation:float 5s ease-in-out infinite;

}

@keyframes float{

50%{

transform:translateY(-18px);

}

}

/* ===================================
CARDS
=================================== */

.glass-card,
.card,
.project,
.game-card{

background:var(--glass);

backdrop-filter:blur(20px);

border:1px solid var(--border);

border-radius:22px;

padding:30px;

transition:.35s;

}

.card:hover,
.project:hover,
.game-card:hover,
.glass-card:hover{

transform:

translateY(-8px);

box-shadow:

0 20px 50px rgba(139,92,246,.25);

}

/* ===================================
GRID
=================================== */

.info-grid,
.skills-grid,
.projects,
.gaming-grid{

display:grid;

gap:25px;

margin-top:50px;

}

.info-grid{

grid-template-columns:repeat(2,1fr);

}

.skills-grid{

grid-template-columns:repeat(4,1fr);

}

.projects{

grid-template-columns:repeat(3,1fr);

}

.gaming-grid{

grid-template-columns:repeat(2,1fr);

}

/* ===================================
SKILLS
=================================== */

.skill{

padding:25px;

text-align:center;

border-radius:18px;

background:rgba(255,255,255,.05);

border:1px solid var(--border);

font-weight:700;

transition:.3s;

}

.skill:hover{

background:#8B5CF6;

transform:translateY(-5px);

}

/* ===================================
CONTACT
=================================== */

.contact-buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.contact-buttons a{

padding:18px 40px;

border-radius:16px;

background:

linear-gradient(135deg,#8B5CF6,#6D5CFF);

text-decoration:none;

color:white;

font-weight:700;

transition:.35s;

}

.contact-buttons a:hover{

transform:scale(1.05);

}

/* ===================================
FOOTER
=================================== */

footer{

padding:45px;

text-align:center;

color:var(--muted);

border-top:1px solid rgba(255,255,255,.08);

}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:1000px){

#home{

grid-template-columns:1fr;

text-align:center;

}

.circle{

width:220px;
height:220px;

font-size:90px;

}

h1{

font-size:56px;

}

.skills-grid,
.projects,
.info-grid,
.gaming-grid{

grid-template-columns:1fr;

}

nav{

display:none;

}

}