@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; --white: #fff; --muted: rgba(255,255,255,.64); --line: rgba(255,255,255,.13); --red: #ee263b; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-width: 320px; overflow: hidden; background: #100104; color: var(--white); font-family: Inter, Arial, sans-serif; }
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
.page-background, .grid, .vignette { position: fixed; inset: 0; pointer-events: none; }
.page-background { z-index: -1; overflow: hidden; background: radial-gradient(circle at 50% 38%, #77000d 0, #340006 37%, #100104 80%); animation: fade-in 1.2s ease both; }
.grid { opacity: .08; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 52px 52px; transform: translate3d(var(--grid-x,0), var(--grid-y,0), 0); animation: grid-enter 1.8s .15s ease both; }
.vignette { background: radial-gradient(ellipse at center, transparent 31%, rgba(0,0,0,.57) 100%); }
.blob { position: absolute; width: 48vw; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .45; will-change: transform; }
.blob-one { top: -25%; left: -12%; background: #d5001c; animation: drift-one 18s ease-in-out infinite alternate; }
.blob-two { right: -15%; bottom: -32%; background: #72000d; animation: drift-two 20s ease-in-out infinite alternate; }
.blob-three { width: 26vw; top: 32%; left: 38%; background: #e00a21; opacity: .2; animation: drift-three 15s ease-in-out infinite alternate; }
.cursor-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(255,48,64,.22), transparent 67%); transform: translate3d(calc(var(--mouse-x, 50vw) - 50%), calc(var(--mouse-y, 50vh) - 50%), 0); transition: opacity .45s ease; }
.enhanced .cursor-glow { opacity: 1; }
.site-header { position: fixed; z-index: 2; top: clamp(20px, 4vw, 48px); left: clamp(20px, 5vw, 72px); right: clamp(20px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; }
.brand { text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: -.04em; text-shadow: 0 0 20px rgba(255,255,255,.27); transition: transform .28s ease, text-shadow .28s ease; }
.brand span { color: rgba(255,255,255,.68); }.brand:hover { transform: scale(1.045); text-shadow: 0 0 22px rgba(255,58,73,.9); }
.online-badge, .visitor-counter { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: rgba(9,3,5,.42); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 35px rgba(0,0,0,.15); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.online-badge { font-size: .67rem; font-weight: 700; letter-spacing: .11em; }.online-badge:hover, .visitor-counter:hover { transform: scale(1.04); border-color: rgba(255,255,255,.27); background: rgba(32,7,10,.58); }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #5ee89b; box-shadow: 0 0 0 0 rgba(94,232,155,.45); animation: pulse 2s infinite; }
.main-content { min-height: 100svh; display: grid; place-items: center; padding: 115px 24px 104px; }
.profile-card { position: relative; width: min(100%, 590px); overflow: hidden; padding: 42px 54px 38px; text-align: center; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 42%, rgba(0,0,0,.34)); box-shadow: 0 25px 70px rgba(0,0,0,.38), 0 0 65px rgba(196,0,20,.24); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .22s ease-out, border-color .3s ease, box-shadow .3s ease; }
.profile-card:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 25px 70px rgba(0,0,0,.38), 0 0 80px rgba(222,12,35,.38); }
.card-shine { position:absolute; inset:-60%; background: linear-gradient(110deg, transparent 43%, rgba(255,255,255,.1) 50%, transparent 57%); transform: translateX(-35%) rotate(12deg); animation: card-sheen 10s ease-in-out infinite; pointer-events:none; }
.avatar { display: block; width: 128px; height: 128px; margin: 0 auto 20px; object-fit: cover; border: 1px solid rgba(255,255,255,.43); border-radius: 50%; background: #48000a; box-shadow: 0 0 0 6px rgba(220,15,35,.11), 0 12px 30px rgba(0,0,0,.44), 0 0 30px rgba(230,21,42,.44); transition: transform .35s ease, box-shadow .35s ease; }
.avatar:hover { transform: scale(1.055); box-shadow: 0 0 0 8px rgba(220,15,35,.18), 0 12px 30px rgba(0,0,0,.44), 0 0 42px rgba(250,28,51,.82); }
h1 { margin:0; color:#fff; font-size:clamp(2rem, 4vw, 2.55rem); letter-spacing:-.07em; line-height:1; text-shadow:0 0 7px rgba(255,255,255,.95), 0 0 19px rgba(255,50,69,.9), 0 0 42px rgba(226,0,26,.66); animation:name-glow 3.5s ease-in-out infinite alternate; }.role { display:flex; justify-content:center; align-items:center; gap:8px; margin:12px 0 29px; color:var(--muted); font-size:.9rem; }.role span:first-child { width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.social-links { display:flex; justify-content:center; flex-wrap:wrap; gap:11px; }.social-link { width:49px; height:49px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.17); border-radius:14px; background:linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(255,255,255,.055); transition:transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; }.social-link:hover { transform:translateY(-4px) scale(1.07); background:rgba(255,44,61,.15); border-color:rgba(255,255,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px rgba(220,0,22,.43), 0 0 16px rgba(255,255,255,.18); }.social-link svg { filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,47,65,.66)); transition:filter .28s ease, transform .28s ease; }.social-link:hover svg { filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 11px rgba(255,38,59,.95)); transform:scale(1.04); }.social-link svg, .email-link svg, .copy-button svg, .visitor-counter svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.contact { margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); }.contact h2 { margin:0 0 13px; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); }.email-row { display:flex; align-items:center; gap:8px; padding:7px 8px 7px 14px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(0,0,0,.17); transition:border-color .25s ease, background .25s ease; }.email-row:hover { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06); }.email-link { min-width:0; flex:1; display:flex; align-items:center; gap:10px; overflow:hidden; text-align:left; color:rgba(255,255,255,.84); text-decoration:none; font-size:.87rem; }.email-link svg { flex:none; width:17px; color:var(--red); }.email-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.copy-button { flex:none; width:36px; height:36px; display:grid; place-items:center; padding:0; cursor:pointer; border:0; border-radius:10px; background:rgba(255,255,255,.08); transition:background .22s ease, transform .22s ease; }.copy-button:hover { background:rgba(232,28,49,.3); transform:scale(1.05); }.copy-button svg { width:17px; }
.site-footer { position:fixed; z-index:1; bottom:clamp(18px, 3vw, 34px); left:50%; color:rgba(255,255,255,.47); font-size:.72rem; transform:translateX(-50%); white-space:nowrap; }.visitor-counter { position:fixed; z-index:1; right:clamp(20px, 5vw, 72px); bottom:clamp(20px, 4vw, 43px); gap:10px; padding:10px 13px; }.visitor-counter svg { width:20px; color:rgba(255,255,255,.82); }.visitor-counter div { display:grid; gap:2px; }.visitor-counter span { color:rgba(255,255,255,.57); font-size:.58rem; font-weight:700; letter-spacing:.1em; }.visitor-counter strong { font-size:.9rem; line-height:1; }.toast { position:fixed; z-index:4; left:50%; bottom:86px; padding:10px 15px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(15,4,7,.82); box-shadow:0 12px 30px rgba(0,0,0,.32); backdrop-filter:blur(14px); opacity:0; pointer-events:none; transform:translate(-50%, 12px); transition:opacity .25s ease, transform .25s ease; font-size:.8rem; }.toast.is-visible { opacity:1; transform:translate(-50%, 0); }
.reveal { opacity:0; transform:translateY(15px) scale(.985); animation:reveal .75s cubic-bezier(.2,.8,.2,1) forwards; }.reveal-avatar { animation-delay:.46s; }.reveal-name { animation-delay:.61s; }.reveal-social { animation-delay:.77s; }.reveal-contact { animation-delay:.93s; }
:focus-visible { outline:2px solid #ff8d99; outline-offset:4px; } .social-link:focus-visible { outline-offset:3px; }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } } @keyframes grid-enter { from { opacity:0 } to { opacity:.08 } } @keyframes reveal { to { opacity:1; transform:translateY(0) scale(1) } } @keyframes name-glow { from { text-shadow:0 0 7px rgba(255,255,255,.92), 0 0 19px rgba(255,50,69,.75), 0 0 38px rgba(226,0,26,.48) } to { text-shadow:0 0 8px #fff, 0 0 23px rgba(255,58,77,1), 0 0 52px rgba(236,0,28,.8) } } @keyframes pulse { 70% { box-shadow:0 0 0 7px rgba(94,232,155,0) } 100% { box-shadow:0 0 0 0 rgba(94,232,155,0) } } @keyframes drift-one { to { transform:translate3d(13vw, 8vh, 0) scale(1.1) } } @keyframes drift-two { to { transform:translate3d(-14vw, -11vh, 0) scale(.9) } } @keyframes drift-three { to { transform:translate3d(-7vw, 10vh, 0) scale(1.15) } } @keyframes card-sheen { 0%, 45% { transform:translateX(-35%) rotate(12deg) } 65%,100% { transform:translateX(35%) rotate(12deg) } }
@media (max-width: 640px) { body { overflow:auto; } .site-header { top:20px; }.main-content { padding:105px 18px 110px; }.profile-card { padding:32px 22px 27px; border-radius:24px; }.avatar { width:112px; height:112px; margin-bottom:18px; }.social-links { gap:9px; }.social-link { width:46px; height:46px; }.contact { margin-top:26px; padding-top:22px; }.visitor-counter { right:18px; bottom:18px; padding:8px 10px; }.site-footer { bottom:24px; left:18px; transform:none; }.blob { filter:blur(65px); }.blob-one { width:78vw; }.blob-two { width:78vw; }.blob-three { width:50vw; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }