/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* Glass effect */
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
body {
background-color: #0f172a;
color: #f8fafc;
font-family: "Inter", sans-serif;
overflow-x: hidden;
}
/* Animated gradient background */
.bg-gradient-animated {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background:
radial-gradient(
circle at 20% 50%,
rgba(96, 165, 250, 0.08) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(167, 139, 250, 0.08) 0%,
transparent 50%
),
radial-gradient(
circle at 40% 20%,
rgba(52, 211, 153, 0.05) 0%,
transparent 50%
);
animation: bgShift 20s ease-in-out infinite;
}
@keyframes bgShift {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(-20px, -20px);
}
50% {
transform: translate(20px, 10px);
}
75% {
transform: translate(-10px, 20px);
}
}
/* Floating particles */
.particle {
position: fixed;
background: rgba(255, 255, 255, 0.02);
border-radius: 50%;
pointer-events: none;
animation: float linear infinite;
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(720deg);
opacity: 0;
}
}
/*
* Language toggle: the language is set via a class on ;
* JS knows nothing about display — the layout stays intact.
* EN is the default.
*/
html:not(.lang-ru) .lang-ru,
html:not(.lang-ru) .lang-text-ru,
html.lang-ru .lang-en,
html.lang-ru .lang-text-en {
display: none;
}
/* AI Gradient text */
.ai-gradient {
background: linear-gradient(135deg, #60a5fa 0%, #34d399 50%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Scroll animations */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays */
.delay-100 {
transition-delay: 100ms;
}
.delay-200 {
transition-delay: 200ms;
}
.delay-300 {
transition-delay: 300ms;
}
/* Button hover glow */
.btn-glow {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-glow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(96, 165, 250, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition:
width 0.6s ease,
height 0.6s ease;
}
.btn-glow:hover::before {
width: 300px;
height: 300px;
}
/* Tech stack icon hover */
.tech-icon {
transition: all 0.3s ease;
}
.tech-icon:hover {
transform: translateY(-6px) scale(1.1);
color: #60a5fa;
}
/* Navigation dots */
.nav-dots {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: none;
padding: 0;
cursor: pointer;
appearance: none;
transition: all 0.3s ease;
}
.nav-dot:hover,
.nav-dot.active {
background: #60a5fa;
transform: scale(1.5);
}
.nav-dot:focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 4px;
}
@media (max-width: 768px) {
.nav-dots {
display: none;
}
}
/* Scroll hint button (at the bottom of the hero) */
.scroll-hint {
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.scroll-hint:focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 4px;
border-radius: 4px;
}
/* Loading animation for hero */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-animate {
animation: fadeIn 1s ease-out forwards;
}
.hero-animate-delay {
animation: fadeIn 1s ease-out 0.3s forwards;
opacity: 0;
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.particle {
display: none;
}
}
/* Icon sprite: map the parent's text color (text-* utilities) to the icon fill */
use {
fill: currentColor;
}