.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-left.visible {
opacity: 1;
transform: translateX(0);
}
.fade-in-right {
opacity: 0;
transform: translateX(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-right.visible {
opacity: 1;
transform: translateX(0);
}
.scale-in {
opacity: 0;
transform: scale(0.9);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible {
opacity: 1;
transform: scale(1);
} .delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; } @keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(108, 92, 231, 0.3);
}
50% {
box-shadow: 0 0 40px rgba(108, 92, 231, 0.6);
}
} .animate-pulse {
animation: pulse 2s ease-in-out infinite;
}
.animate-bounce {
animation: bounce 2s ease-in-out infinite;
}
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-glow {
animation: glow 2s ease-in-out infinite;
} .skeleton {
background: linear-gradient(
90deg,
var(--bg-tertiary) 25%,
var(--bg-secondary) 50%,
var(--bg-tertiary) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--border-radius-sm);
} .hero-title {
animation: heroFadeIn 1s ease forwards;
animation-delay: 0.2s;
opacity: 0;
}
.hero-subtitle {
animation: heroFadeIn 1s ease forwards;
animation-delay: 0.4s;
opacity: 0;
}
.hero-cta {
animation: heroFadeIn 1s ease forwards;
animation-delay: 0.6s;
opacity: 0;
}
@keyframes heroFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
color: var(--text-muted);
font-size: var(--font-size-sm);
animation: fadeInUp 1s ease forwards;
animation-delay: 1s;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.scroll-indicator::after {
content: '';
width: 24px;
height: 40px;
border: 2px solid var(--text-muted);
border-radius: 12px;
position: relative;
}
.scroll-indicator::before {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 8px;
background: var(--text-muted);
border-radius: 2px;
animation: scrollBounce 1.5s ease-in-out infinite;
}
@keyframes scrollBounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
50% {
transform: translateX(-50%) translateY(10px);
opacity: 0.3;
}
} .page-transition {
animation: pageIn 0.4s ease forwards;
}
@keyframes pageIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} .btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
opacity: 0;
transition: opacity var(--transition-base);
border-radius: inherit;
}
.btn-primary:hover::before {
opacity: 1;
} .ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.ripple:active::after {
transform: translate(-50%, -50%) scale(2);
opacity: 1;
transition: 0s;
} .card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(108, 92, 231, 0.1) 0%, transparent 50%);
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
border-radius: inherit;
}
.card:hover::before {
opacity: 1;
} .text-gradient {
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.fade-in,
.fade-in-up,
.fade-in-left,
.fade-in-right,
.scale-in {
opacity: 1;
transform: none;
}
}