.neon-text {
text-shadow:
0 0 7px rgba(var(--primary-rgb), 0.6),
0 0 20px rgba(var(--primary-rgb), 0.4),
0 0 42px rgba(var(--primary-rgb), 0.2),
0 0 82px rgba(var(--primary-rgb), 0.1);
}
.neon-text--accent {
text-shadow:
0 0 7px rgba(var(--accent-rgb), 0.6),
0 0 20px rgba(var(--accent-rgb), 0.4),
0 0 42px rgba(var(--accent-rgb), 0.2),
0 0 82px rgba(var(--accent-rgb), 0.1);
}
.neon-text--white {
text-shadow:
0 0 7px rgba(255,255,255,0.5),
0 0 20px rgba(255,255,255,0.3),
0 0 42px rgba(255,255,255,0.15);
}
.neon-box {
box-shadow:
0 0 5px rgba(var(--primary-rgb), 0.3),
0 0 15px rgba(var(--primary-rgb), 0.15),
0 0 40px rgba(var(--primary-rgb), 0.08),
inset 0 0 15px rgba(var(--primary-rgb), 0.05);
}
.neon-box--accent {
box-shadow:
0 0 5px rgba(var(--accent-rgb), 0.3),
0 0 15px rgba(var(--accent-rgb), 0.15),
0 0 40px rgba(var(--accent-rgb), 0.08),
inset 0 0 15px rgba(var(--accent-rgb), 0.05);
}
.neon-box--intense {
box-shadow:
0 0 8px rgba(var(--primary-rgb), 0.5),
0 0 25px rgba(var(--primary-rgb), 0.3),
0 0 60px rgba(var(--primary-rgb), 0.15),
0 0 120px rgba(var(--primary-rgb), 0.06),
inset 0 0 20px rgba(var(--primary-rgb), 0.08);
}
.neon-border {
border: 1px solid rgba(var(--primary-rgb), 0.5);
box-shadow:
0 0 5px rgba(var(--primary-rgb), 0.2),
inset 0 0 5px rgba(var(--primary-rgb), 0.1);
}
.neon-border--accent {
border-color: rgba(var(--accent-rgb), 0.5);
box-shadow:
0 0 5px rgba(var(--accent-rgb), 0.2),
inset 0 0 5px rgba(var(--accent-rgb), 0.1);
}
.neon-pulse {
animation: neon-pulse-kf 2s ease-in-out infinite;
}
@keyframes neon-pulse-kf {
0%, 100% {
box-shadow:
0 0 5px rgba(var(--primary-rgb), 0.3),
0 0 15px rgba(var(--primary-rgb), 0.15);
}
50% {
box-shadow:
0 0 10px rgba(var(--primary-rgb), 0.5),
0 0 30px rgba(var(--primary-rgb), 0.25),
0 0 60px rgba(var(--primary-rgb), 0.12);
}
}
.neon-flicker {
animation: neon-flicker-kf 3s infinite;
}
@keyframes neon-flicker-kf {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 7px rgba(var(--primary-rgb), 0.6),
0 0 20px rgba(var(--primary-rgb), 0.4),
0 0 42px rgba(var(--primary-rgb), 0.2);
}
20%, 24%, 55% {
text-shadow: none;
}
}
.neon-underline {
position: relative;
display: inline-block;
}
.neon-underline::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: var(--primary);
box-shadow:
0 0 5px rgba(var(--primary-rgb), 0.5),
0 0 15px rgba(var(--primary-rgb), 0.3);
}
@media (prefers-reduced-motion: reduce) {
.neon-pulse { animation: none; }
.neon-flicker { animation: none; }
}
.gradient-shift {
background: linear-gradient(
-45deg,
var(--primary),
var(--accent),
var(--secondary, var(--primary)),
var(--primary)
);
background-size: 400% 400%;
animation: gradient-shift-kf 8s ease infinite;
}
.gradient-shift--fast {
animation-duration: 4s;
}
.gradient-shift--slow {
animation-duration: 15s;
}
@keyframes gradient-shift-kf {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-text-animate {
background: linear-gradient(
90deg,
var(--primary),
var(--accent),
var(--primary)
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-text-kf 4s linear infinite;
}
@keyframes gradient-text-kf {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.gradient-border {
position: relative;
border-radius: var(--image-radius, 12px);
overflow: hidden;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
padding: 2px;
border-radius: inherit;
background: conic-gradient(
from var(--gradient-border-angle, 0deg),
var(--primary),
var(--accent),
var(--primary)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: gradient-border-spin 3s linear infinite;
pointer-events: none;
}
@keyframes gradient-border-spin {
to { --gradient-border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
.gradient-border::before {
background: linear-gradient(
var(--primary),
var(--accent)
);
}
}
.gradient-overlay {
position: relative;
}
.gradient-overlay::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(var(--primary-rgb), 0.05) 50%,
transparent 100%
);
pointer-events: none;
}
.gradient-divider {
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--primary),
var(--accent),
transparent
);
border: none;
margin: 2rem 0;
}
.gradient-divider--thick {
height: 4px;
border-radius: 2px;
}
.gradient-spotlight {
position: relative;
overflow: hidden;
}
.gradient-spotlight::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
rgba(var(--primary-rgb), 0.08) 0%,
transparent 50%
);
pointer-events: none;
transition: opacity 0.3s;
}
.gradient-mesh {
background:
radial-gradient(at 40% 20%, rgba(var(--primary-rgb), 0.12) 0%, transparent 50%),
radial-gradient(at 80% 80%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
radial-gradient(at 10% 70%, rgba(var(--primary-rgb), 0.06) 0%, transparent 50%);
}
@media (prefers-reduced-motion: reduce) {
.gradient-shift,
.gradient-shift--fast,
.gradient-shift--slow { animation: none; background-size: 100% 100%; }
.gradient-text-animate { animation: none; background-size: 100% 100%; }
.gradient-border::before { animation: none; }
}
.glass-light {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-dark {
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-colored {
background: rgba(var(--primary-rgb), 0.1);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba(var(--primary-rgb), 0.2);
}
.glass-colored--accent {
background: rgba(var(--accent-rgb), 0.1);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.glass-card {
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(24px) saturate(1.2);
-webkit-backdrop-filter: blur(24px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--image-radius, 16px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.glass-frosted {
background: rgba(var(--background-rgb, 10,10,20), 0.7);
backdrop-filter: blur(40px) saturate(1.5);
-webkit-backdrop-filter: blur(40px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.glass-pill {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 6px 16px;
}
.glass-morph {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition:
background var(--transition-normal, 250ms) ease,
backdrop-filter var(--transition-normal, 250ms) ease,
border-color var(--transition-normal, 250ms) ease,
box-shadow var(--transition-normal, 250ms) ease;
}
.glass-morph:hover {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.glass-ice {
background: rgba(200, 220, 255, 0.06);
backdrop-filter: blur(20px) brightness(1.1);
-webkit-backdrop-filter: blur(20px) brightness(1.1);
border: 1px solid rgba(200, 220, 255, 0.15);
box-shadow:
inset 0 0 30px rgba(200, 220, 255, 0.05),
0 4px 20px rgba(0, 0, 0, 0.1);
}
.glass-nav {
background: rgba(var(--background-rgb, 10,10,20), 0.6);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@supports not (backdrop-filter: blur(1px)) {
.glass-light { background: rgba(255, 255, 255, 0.85); }
.glass-dark { background: rgba(0, 0, 0, 0.85); }
.glass-colored { background: rgba(var(--primary-rgb), 0.75); }
.glass-card { background: rgba(20, 20, 30, 0.92); }
.glass-frosted { background: rgba(var(--background-rgb, 10,10,20), 0.95); }
.glass-pill { background: rgba(255, 255, 255, 0.6); }
.glass-morph { background: rgba(255, 255, 255, 0.4); }
.glass-ice { background: rgba(200, 220, 255, 0.5); }
.glass-nav { background: rgba(var(--background-rgb, 10,10,20), 0.92); }
}
.particles {
position: relative;
overflow: hidden;
}
.particles-gold::before,
.particles-gold::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
}
.particles-gold::before {
top: 10%;
left: 15%;
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
box-shadow:
0 0 8px rgba(var(--primary-rgb), 0.6),
60px 80px 0 rgba(var(--primary-rgb), 0.4),
120px -40px 0 rgba(var(--primary-rgb), 0.3),
200px 120px 0 rgba(var(--primary-rgb), 0.5),
320px 20px 0 rgba(var(--primary-rgb), 0.25),
400px 160px 0 rgba(var(--primary-rgb), 0.35),
500px -20px 0 rgba(var(--primary-rgb), 0.45),
620px 100px 0 rgba(var(--primary-rgb), 0.3),
750px 50px 0 rgba(var(--primary-rgb), 0.4),
850px 140px 0 rgba(var(--primary-rgb), 0.2);
animation: particles-float 12s ease-in-out infinite;
}
.particles-gold::after {
top: 30%;
right: 10%;
width: 4px;
height: 4px;
background: var(--accent, var(--primary));
border-radius: 50%;
box-shadow:
0 0 6px rgba(var(--accent-rgb), 0.5),
-50px 60px 0 rgba(var(--accent-rgb), 0.3),
-130px -30px 0 rgba(var(--accent-rgb), 0.4),
-210px 90px 0 rgba(var(--accent-rgb), 0.25),
-300px 40px 0 rgba(var(--accent-rgb), 0.35),
-420px 130px 0 rgba(var(--accent-rgb), 0.2),
-520px -10px 0 rgba(var(--accent-rgb), 0.4),
-650px 70px 0 rgba(var(--accent-rgb), 0.3);
animation: particles-float 15s ease-in-out infinite reverse;
}
.particles-star::before,
.particles-star::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
}
.particles-star::before {
top: 5%;
left: 10%;
width: 3px;
height: 3px;
background: #fff;
border-radius: 50%;
box-shadow:
40px 80px 0 #fff,
100px 20px 0 1px rgba(255,255,255,0.7),
180px 140px 0 #fff,
260px 60px 0 1px rgba(255,255,255,0.5),
340px 100px 0 #fff,
420px 30px 0 rgba(255,255,255,0.6),
500px 150px 0 1px #fff,
580px 70px 0 rgba(255,255,255,0.8),
660px 120px 0 #fff,
740px 40px 0 rgba(255,255,255,0.5),
820px 90px 0 1px rgba(255,255,255,0.7),
900px 160px 0 #fff;
animation: particles-twinkle 4s ease-in-out infinite;
}
.particles-star::after {
top: 20%;
right: 5%;
width: 2px;
height: 2px;
background: #fff;
border-radius: 50%;
box-shadow:
-30px 50px 0 1px rgba(255,255,255,0.6),
-90px 120px 0 rgba(255,255,255,0.4),
-160px 30px 0 1px #fff,
-230px 100px 0 rgba(255,255,255,0.5),
-310px 70px 0 #fff,
-380px 140px 0 rgba(255,255,255,0.7),
-460px 20px 0 1px rgba(255,255,255,0.4),
-540px 110px 0 #fff;
animation: particles-twinkle 5s ease-in-out 1s infinite;
}
.particles-bubble::before,
.particles-bubble::after {
content: '';
position: absolute;
bottom: -20px;
pointer-events: none;
z-index: 0;
border-radius: 50%;
}
.particles-bubble::before {
left: 20%;
width: 20px;
height: 20px;
background: rgba(var(--primary-rgb), 0.08);
border: 1px solid rgba(var(--primary-rgb), 0.15);
animation: particles-rise 8s ease-in infinite;
}
.particles-bubble::after {
left: 60%;
width: 14px;
height: 14px;
background: rgba(var(--accent-rgb), 0.06);
border: 1px solid rgba(var(--accent-rgb), 0.12);
animation: particles-rise 10s ease-in 2s infinite;
}
.particles-dust {
position: relative;
overflow: hidden;
}
.particles-dust::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(var(--primary-rgb), 0.4), transparent),
radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.3), transparent),
radial-gradient(1.5px 1.5px at 60% 20%, rgba(var(--primary-rgb), 0.3), transparent),
radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.25), transparent),
radial-gradient(1.5px 1.5px at 15% 80%, rgba(var(--accent-rgb), 0.3), transparent),
radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,0.2), transparent),
radial-gradient(1px 1px at 50% 40%, rgba(var(--primary-rgb), 0.25), transparent),
radial-gradient(1.5px 1.5px at 90% 15%, rgba(255,255,255,0.3), transparent);
animation: particles-shimmer-drift 20s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes particles-float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
25% { transform: translateY(-20px) translateX(10px); opacity: 1; }
50% { transform: translateY(-8px) translateX(-8px); opacity: 0.8; }
75% { transform: translateY(-25px) translateX(15px); opacity: 0.9; }
}
@keyframes particles-twinkle {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@keyframes particles-rise {
0% { transform: translateY(0) scale(1); opacity: 0.6; }
50% { opacity: 0.3; }
100% { transform: translateY(-400px) scale(0.5); opacity: 0; }
}
@keyframes particles-shimmer-drift {
0% { transform: translateY(0); }
100% { transform: translateY(-100px); }
}
@media (prefers-reduced-motion: reduce) {
.particles-gold::before,
.particles-gold::after,
.particles-star::before,
.particles-star::after,
.particles-bubble::before,
.particles-bubble::after,
.particles-dust::before {
animation: none;
}
}
.parallax-bg {
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.parallax-container {
perspective: 1200px;
perspective-origin: center;
overflow: hidden;
}
.parallax-slow {
transform: translateZ(-200px) scale(1.4);
will-change: transform;
}
.parallax-normal {
transform: translateZ(-100px) scale(1.2);
will-change: transform;
}
.parallax-fast {
transform: translateZ(0);
}
.depth-float {
animation: depth-float-kf 6s ease-in-out infinite;
}
.depth-float--slow {
animation-duration: 10s;
}
.depth-float--offset {
animation-delay: -3s;
}
@keyframes depth-float-kf {
0%, 100% { transform: translateY(0) translateZ(0); }
50% { transform: translateY(-12px) translateZ(10px); }
}
.bg-scroll-hint {
position: relative;
overflow: hidden;
}
.bg-scroll-hint::before {
content: '';
position: absolute;
inset: -10%;
background: inherit;
background-size: cover;
background-position: center;
transition: transform 0.6s ease-out;
z-index: -1;
}
.bg-scroll-hint:hover::before {
transform: scale(1.05);
}
.depth-layers {
position: relative;
}
.depth-layers::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(var(--primary-rgb), 0.06) 0%, transparent 60%),
radial-gradient(ellipse at 80% 50%, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%);
animation: depth-layers-drift 15s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes depth-layers-drift {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(20px); }
}
.ken-burns {
overflow: hidden;
}
.ken-burns > img,
.ken-burns > .ken-burns__target {
animation: ken-burns-kf 20s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes ken-burns-kf {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.08) translate(-2%, -1%); }
}
.tilt-hover {
transition: transform 0.4s ease;
transform-style: preserve-3d;
}
.tilt-hover:hover {
transform: perspective(800px) rotateX(2deg) rotateY(-2deg);
}
@media (prefers-reduced-motion: reduce) {
.parallax-bg { background-attachment: scroll; }
.depth-float,
.depth-float--slow { animation: none; }
.depth-layers::before { animation: none; }
.ken-burns > img,
.ken-burns > .ken-burns__target { animation: none; }
.tilt-hover:hover { transform: none; }
}
.text-neon {
color: #fff;
text-shadow:
0 0 7px rgba(var(--primary-rgb), 0.8),
0 0 20px rgba(var(--primary-rgb), 0.5),
0 0 42px rgba(var(--primary-rgb), 0.3),
0 0 80px rgba(var(--primary-rgb), 0.15);
}
.text-stroke {
-webkit-text-stroke: 1px var(--primary);
-webkit-text-fill-color: transparent;
}
.text-stroke--thick {
-webkit-text-stroke: 2px var(--primary);
}
.text-stroke--white {
-webkit-text-stroke: 1px rgba(255,255,255,0.6);
-webkit-text-fill-color: transparent;
}
.text-shimmer {
background: linear-gradient(
110deg,
var(--foreground, #fff) 35%,
rgba(var(--primary-rgb), 0.8) 50%,
var(--foreground, #fff) 65%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: text-shimmer-kf 3s linear infinite;
}
@keyframes text-shimmer-kf {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.text-gradient-shift {
background: linear-gradient(
90deg,
var(--primary),
var(--accent),
var(--primary),
var(--accent)
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: text-gradient-shift-kf 6s ease infinite;
}
@keyframes text-gradient-shift-kf {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.text-glow-pulse {
animation: text-glow-pulse-kf 2.5s ease-in-out infinite;
}
@keyframes text-glow-pulse-kf {
0%, 100% {
text-shadow: 0 0 4px rgba(var(--primary-rgb), 0.3);
}
50% {
text-shadow:
0 0 8px rgba(var(--primary-rgb), 0.5),
0 0 20px rgba(var(--primary-rgb), 0.3);
}
}
.text-shadow-deep {
text-shadow:
0 1px 0 rgba(0,0,0,0.2),
0 2px 4px rgba(0,0,0,0.15),
0 4px 8px rgba(0,0,0,0.1);
}
.text-shadow-glow {
text-shadow:
0 0 10px rgba(var(--primary-rgb), 0.4),
0 2px 8px rgba(0,0,0,0.2);
}
.text-reveal {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid var(--primary);
animation:
text-reveal-type 3s steps(30) 1s forwards,
text-reveal-cursor 0.75s step-end infinite;
width: 0;
}
@keyframes text-reveal-type {
to { width: 100%; }
}
@keyframes text-reveal-cursor {
50% { border-color: transparent; }
}
.text-underline-animate {
position: relative;
display: inline;
background-image: linear-gradient(var(--primary), var(--primary));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size 0.4s ease;
}
.text-underline-animate:hover {
background-size: 100% 2px;
}
.text-emboss {
text-shadow:
0 1px 0 rgba(255,255,255,0.1),
0 -1px 0 rgba(0,0,0,0.4);
}
.text-clip-image {
background-size: cover;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
.text-shimmer { animation: none; background-size: 100% 100%; }
.text-gradient-shift { animation: none; background-size: 100% 100%; }
.text-glow-pulse { animation: none; }
.text-reveal {
animation: none;
width: auto;
border-right: none;
white-space: normal;
}
}
.card-glow {
transition:
box-shadow var(--transition-normal, 250ms) ease,
transform var(--transition-normal, 250ms) ease;
}
.card-glow:hover {
box-shadow:
0 0 15px rgba(var(--primary-rgb), 0.25),
0 0 40px rgba(var(--primary-rgb), 0.1),
0 8px 32px rgba(0, 0, 0, 0.15);
transform: translateY(-4px);
}
.card-glow--accent:hover {
box-shadow:
0 0 15px rgba(var(--accent-rgb), 0.25),
0 0 40px rgba(var(--accent-rgb), 0.1),
0 8px 32px rgba(0, 0, 0, 0.15);
}
.card-flip {
perspective: 800px;
}
.card-flip__inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.card-flip:hover .card-flip__inner {
transform: rotateY(180deg);
}
.card-flip__front,
.card-flip__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--image-radius, 12px);
}
.card-flip__back {
transform: rotateY(180deg);
}
.card-tilt {
transition: transform 0.4s ease;
transform-style: preserve-3d;
}
.card-tilt:hover {
transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateY(-4px);
}
.card-border-animate {
position: relative;
border: none;
border-radius: var(--image-radius, 12px);
overflow: hidden;
}
.card-border-animate::before {
content: '';
position: absolute;
inset: 0;
padding: 2px;
border-radius: inherit;
background: linear-gradient(
var(--border-animate-angle, 0deg),
var(--primary),
var(--accent),
transparent,
var(--primary)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: card-border-rotate 4s linear infinite;
pointer-events: none;
}
@keyframes card-border-rotate {
to { --border-animate-angle: 360deg; }
}
.card-morph {
transition:
border-radius 0.5s ease,
transform 0.4s ease,
box-shadow 0.4s ease;
}
.card-morph:hover {
border-radius: calc(var(--image-radius, 12px) + 8px);
transform: translateY(-6px) scale(1.02);
box-shadow: var(--shadow-xl);
}
.card-shine {
position: relative;
overflow: hidden;
}
.card-shine::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(255, 255, 255, 0.08) 45%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.08) 55%,
transparent 60%
);
transform: translateX(-100%);
transition: transform 0.6s ease;
pointer-events: none;
}
.card-shine:hover::after {
transform: translateX(100%);
}
.card-raise {
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.card-raise:hover {
transform: translateY(-8px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 8px 16px rgba(0, 0, 0, 0.1);
}
.card-scale {
transition: transform 0.3s ease;
}
.card-scale:hover {
transform: scale(1.03);
}
.card-highlight {
border: 2px solid transparent;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.card-highlight:hover {
border-color: var(--primary);
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
}
.card-highlight--active {
border-color: var(--primary);
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2);
}
.card-stack {
position: relative;
}
.card-stack::before,
.card-stack::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--card, rgba(255,255,255,0.05));
border: 1px solid var(--border);
z-index: -1;
}
.card-stack::before {
transform: rotate(-2deg) translate(4px, 4px);
opacity: 0.5;
}
.card-stack::after {
transform: rotate(1deg) translate(2px, 2px);
opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
.card-flip:hover .card-flip__inner { transform: none; }
.card-border-animate::before { animation: none; }
.card-shine::after { transition: none; transform: none; }
.card-tilt:hover { transform: translateY(-4px); }
}
.ribbon-corner {
position: relative;
overflow: hidden;
}
.ribbon-corner::before {
content: attr(data-ribbon);
position: absolute;
top: 18px;
right: -35px;
width: 150px;
padding: 6px 0;
background: var(--primary);
color: var(--primary-foreground, #fff);
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
transform: rotate(45deg);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 10;
}
.ribbon-corner--left::before {
right: auto;
left: -35px;
transform: rotate(-45deg);
}
.ribbon-corner--accent::before {
background: var(--accent);
color: var(--accent-foreground, #fff);
}
.ribbon-corner--destructive::before {
background: var(--destructive);
color: #fff;
}
.ribbon-fold {
position: relative;
}
.ribbon-fold::before {
content: attr(data-ribbon);
position: absolute;
top: 16px;
left: -8px;
padding: 6px 20px 6px 12px;
background: var(--primary);
color: var(--primary-foreground, #fff);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
z-index: 10;
clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.ribbon-fold::after {
content: '';
position: absolute;
top: calc(16px + 100%);
left: -8px;
border-left: 8px solid transparent;
border-top: 8px solid color-mix(in srgb, var(--primary) 70%, black);
}
.badge-float {
position: relative;
}
.badge-float::after {
content: attr(data-badge);
position: absolute;
top: -8px;
right: -8px;
min-width: 24px;
height: 24px;
padding: 0 8px;
background: var(--destructive, #ef4444);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 24px;
text-align: center;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 10;
}
.badge-pulse {
position: relative;
}
.badge-pulse::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 12px;
height: 12px;
background: var(--destructive, #ef4444);
border-radius: 50%;
z-index: 10;
animation: badge-pulse-kf 2s ease-in-out infinite;
}
@keyframes badge-pulse-kf {
0% { box-shadow: 0 0 0 0 rgba(var(--destructive-rgb, 239,68,68), 0.5); }
70% { box-shadow: 0 0 0 8px rgba(var(--destructive-rgb, 239,68,68), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--destructive-rgb, 239,68,68), 0); }
}
.tag-hot {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: linear-gradient(135deg, var(--destructive, #ef4444), color-mix(in srgb, var(--destructive, #ef4444) 60%, #fff));
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
animation: tag-hot-glow 2s ease-in-out infinite;
}
@keyframes tag-hot-glow {
0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.3); }
50% { box-shadow: 0 0 12px rgba(239,68,68,0.5); }
}
.tag-new {
display: inline-flex;
padding: 3px 10px;
background: linear-gradient(135deg, var(--success, #22c55e), color-mix(in srgb, var(--success, #22c55e) 60%, #fff));
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
}
.tag-vip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
color: var(--accent-foreground, #1a1a1a);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.3);
}
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success, #22c55e);
}
.status-dot--live {
background: var(--success, #22c55e);
animation: status-dot-pulse 1.5s ease-in-out infinite;
}
.status-dot--warning {
background: var(--warning, #f59e0b);
}
@keyframes status-dot-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
.badge-pulse::after { animation: none; }
.tag-hot { animation: none; }
.status-dot--live { animation: none; }
}
.scrollbar-gradient::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-gradient::-webkit-scrollbar-track {
background: rgba(var(--background-rgb, 10,10,20), 0.3);
border-radius: 4px;
}
.scrollbar-gradient::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--primary), var(--accent));
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.05);
}
.scrollbar-gradient::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--accent), var(--primary));
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb), 0.3);
border-radius: 2px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: rgba(var(--primary-rgb), 0.5);
}
.scrollbar-glow::-webkit-scrollbar {
width: 6px;
}
.scrollbar-glow::-webkit-scrollbar-track {
background: rgba(0,0,0,0.1);
}
.scrollbar-glow::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 3px;
box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
}
.scrollbar-hidden {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.scrollbar-auto {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.3s;
}
.scrollbar-auto:hover {
scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}
.scrollbar-auto::-webkit-scrollbar {
width: 6px;
}
.scrollbar-auto::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-auto::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
transition: background 0.3s;
}
.scrollbar-auto:hover::-webkit-scrollbar-thumb {
background: rgba(var(--primary-rgb), 0.3);
}
@supports (scrollbar-width: thin) {
.scrollbar-gradient {
scrollbar-width: thin;
scrollbar-color: var(--primary) rgba(var(--background-rgb, 10,10,20), 0.3);
}
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}
.scrollbar-glow {
scrollbar-width: thin;
scrollbar-color: var(--primary) rgba(0,0,0,0.1);
}
}
.hover-lift {
transition: transform var(--transition-normal, 250ms) ease, box-shadow var(--transition-normal, 250ms) ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.hover-lift-glow {
transition: transform var(--transition-normal, 250ms) ease, box-shadow var(--transition-normal, 250ms) ease;
}
.hover-lift-glow:hover {
transform: translateY(-6px);
box-shadow:
0 12px 24px rgba(0,0,0,0.12),
0 0 20px rgba(var(--primary-rgb), 0.15);
}
.hover-scale-up {
transition: transform var(--transition-normal, 250ms) ease;
}
.hover-scale-up:hover {
transform: scale(1.05);
}
.hover-scale-down {
transition: transform var(--transition-fast, 150ms) ease;
}
.hover-scale-down:hover {
transform: scale(0.97);
}
.hover-rotate-cw {
transition: transform var(--transition-normal, 250ms) ease;
}
.hover-rotate-cw:hover {
transform: rotate(3deg);
}
.hover-rotate-ccw {
transition: transform var(--transition-normal, 250ms) ease;
}
.hover-rotate-ccw:hover {
transform: rotate(-3deg);
}
.hover-skew {
transition: transform var(--transition-normal, 250ms) ease;
}
.hover-skew:hover {
transform: skewX(-2deg) skewY(-1deg);
}
.hover-border-fill {
border: 2px solid transparent;
transition: border-color var(--transition-normal, 250ms) ease;
}
.hover-border-fill:hover {
border-color: var(--primary);
}
.hover-border-glow {
transition: box-shadow var(--transition-normal, 250ms) ease;
}
.hover-border-glow:hover {
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.4);
}
.hover-outline-expand {
outline: 2px solid transparent;
outline-offset: 0;
transition: outline-color var(--transition-normal, 250ms) ease, outline-offset var(--transition-normal, 250ms) ease;
}
.hover-outline-expand:hover {
outline-color: var(--primary);
outline-offset: 4px;
}
.hover-underline-slide {
position: relative;
display: inline-block;
}
.hover-underline-slide::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width var(--transition-normal, 250ms) ease;
}
.hover-underline-slide:hover::after {
width: 100%;
}
.hover-underline-center {
position: relative;
display: inline-block;
}
.hover-underline-center::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary);
transition: width var(--transition-normal, 250ms) ease, left var(--transition-normal, 250ms) ease;
}
.hover-underline-center:hover::after {
width: 100%;
left: 0;
}
.hover-underline-gradient {
position: relative;
display: inline-block;
}
.hover-underline-gradient::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transition: width var(--transition-normal, 250ms) ease;
}
.hover-underline-gradient:hover::after {
width: 100%;
}
.hover-bg-fill {
position: relative;
overflow: hidden;
z-index: 1;
}
.hover-bg-fill::before {
content: '';
position: absolute;
inset: 0;
background: var(--primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-normal, 250ms) ease;
z-index: -1;
}
.hover-bg-fill:hover::before {
transform: scaleX(1);
}
.hover-bg-slide {
position: relative;
overflow: hidden;
z-index: 1;
}
.hover-bg-slide::before {
content: '';
position: absolute;
inset: 0;
background: rgba(var(--primary-rgb), 0.1);
transform: translateX(-100%);
transition: transform var(--transition-normal, 250ms) ease;
z-index: -1;
}
.hover-bg-slide:hover::before {
transform: translateX(0);
}
.hover-bg-fade {
transition: background-color var(--transition-normal, 250ms) ease;
}
.hover-bg-fade:hover {
background-color: rgba(var(--primary-rgb), 0.08);
}
.hover-brighten {
transition: filter var(--transition-normal, 250ms) ease;
}
.hover-brighten:hover {
filter: brightness(1.15);
}
.hover-dim {
transition: opacity var(--transition-normal, 250ms) ease;
}
.hover-dim:hover {
opacity: 0.7;
}
.hover-colorize {
filter: grayscale(100%);
transition: filter var(--transition-normal, 250ms) ease;
}
.hover-colorize:hover {
filter: grayscale(0%);
}
.hover-saturate {
transition: filter var(--transition-normal, 250ms) ease;
}
.hover-saturate:hover {
filter: saturate(1.4);
}
.hover-premium {
transition:
transform var(--transition-normal, 250ms) ease,
box-shadow var(--transition-normal, 250ms) ease,
border-color var(--transition-normal, 250ms) ease;
}
.hover-premium:hover {
transform: translateY(-6px) scale(1.01);
box-shadow:
0 20px 40px rgba(0,0,0,0.12),
0 0 20px rgba(var(--primary-rgb), 0.1);
border-color: rgba(var(--primary-rgb), 0.3);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift:hover,
.hover-lift-glow:hover,
.hover-scale-up:hover,
.hover-scale-down:hover,
.hover-rotate-cw:hover,
.hover-rotate-ccw:hover,
.hover-skew:hover,
.hover-premium:hover {
transform: none;
}
}
.enter-hidden {
opacity: 0;
will-change: opacity, transform;
}
.enter-fade-in {
animation: enter-fade-in-kf 0.6s ease forwards;
}
.enter-fade-up {
animation: enter-fade-up-kf 0.6s ease forwards;
}
.enter-fade-down {
animation: enter-fade-down-kf 0.6s ease forwards;
}
.enter-fade-left {
animation: enter-fade-left-kf 0.6s ease forwards;
}
.enter-fade-right {
animation: enter-fade-right-kf 0.6s ease forwards;
}
@keyframes enter-fade-in-kf {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes enter-fade-up-kf {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes enter-fade-down-kf {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes enter-fade-left-kf {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes enter-fade-right-kf {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
.enter-scale-up {
animation: enter-scale-up-kf 0.5s var(--ease-out-3, ease) forwards;
}
.enter-scale-down {
animation: enter-scale-down-kf 0.5s var(--ease-out-3, ease) forwards;
}
.enter-zoom-in {
animation: enter-zoom-in-kf 0.6s var(--ease-elastic-out-2, ease) forwards;
}
@keyframes enter-scale-up-kf {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes enter-scale-down-kf {
from { opacity: 0; transform: scale(1.15); }
to { opacity: 1; transform: scale(1); }
}
@keyframes enter-zoom-in-kf {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
.enter-slide-up {
animation: enter-slide-up-kf 0.5s ease forwards;
}
.enter-slide-down {
animation: enter-slide-down-kf 0.5s ease forwards;
}
.enter-slide-left {
animation: enter-slide-left-kf 0.5s ease forwards;
}
.enter-slide-right {
animation: enter-slide-right-kf 0.5s ease forwards;
}
@keyframes enter-slide-up-kf {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes enter-slide-down-kf {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
@keyframes enter-slide-left-kf {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes enter-slide-right-kf {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.enter-rotate {
animation: enter-rotate-kf 0.6s var(--ease-out-3, ease) forwards;
}
@keyframes enter-rotate-kf {
from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
to { opacity: 1; transform: rotate(0) scale(1); }
}
.enter-flip {
animation: enter-flip-kf 0.7s ease forwards;
perspective: 800px;
}
@keyframes enter-flip-kf {
from { opacity: 0; transform: perspective(800px) rotateY(90deg); }
to { opacity: 1; transform: perspective(800px) rotateY(0); }
}
.enter-stagger > :nth-child(1) { animation-delay: 0s; }
.enter-stagger > :nth-child(2) { animation-delay: 0.1s; }
.enter-stagger > :nth-child(3) { animation-delay: 0.2s; }
.enter-stagger > :nth-child(4) { animation-delay: 0.3s; }
.enter-stagger > :nth-child(5) { animation-delay: 0.4s; }
.enter-stagger > :nth-child(6) { animation-delay: 0.5s; }
.enter-stagger > :nth-child(7) { animation-delay: 0.6s; }
.enter-stagger > :nth-child(8) { animation-delay: 0.7s; }
.enter-stagger > :nth-child(9) { animation-delay: 0.8s; }
.enter-stagger > :nth-child(10) { animation-delay: 0.9s; }
.enter-stagger > :nth-child(11) { animation-delay: 1.0s; }
.enter-stagger > :nth-child(12) { animation-delay: 1.1s; }
.enter-stagger > * {
opacity: 0;
animation-fill-mode: forwards;
}
.enter-fast { animation-duration: 0.3s !important; }
.enter-slow { animation-duration: 1s !important; }
.enter-very-slow { animation-duration: 1.5s !important; }
.enter-delay-100 { animation-delay: 0.1s; }
.enter-delay-200 { animation-delay: 0.2s; }
.enter-delay-300 { animation-delay: 0.3s; }
.enter-delay-500 { animation-delay: 0.5s; }
.enter-delay-700 { animation-delay: 0.7s; }
.enter-delay-1000 { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
.enter-hidden { opacity: 1; }
.enter-fade-in,
.enter-fade-up,
.enter-fade-down,
.enter-fade-left,
.enter-fade-right,
.enter-scale-up,
.enter-scale-down,
.enter-zoom-in,
.enter-slide-up,
.enter-slide-down,
.enter-slide-left,
.enter-slide-right,
.enter-rotate,
.enter-flip {
animation: none;
opacity: 1;
transform: none;
}
.enter-stagger > * {
opacity: 1;
animation: none;
}
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transform: translate(-50%, -50%);
opacity: 0;
}
.ripple:active::after {
width: 200%;
padding-bottom: 200%;
opacity: 0;
transition: width 0.4s ease, padding-bottom 0.4s ease, opacity 0.4s ease;
}
.check-animate {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--success, #22c55e);
position: relative;
}
.check-animate::after {
content: '';
position: absolute;
left: 8px;
top: 4px;
width: 6px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
animation: check-pop 0.3s ease 0.2s forwards;
}
@keyframes check-pop {
0% { transform: rotate(45deg) scale(0); }
50% { transform: rotate(45deg) scale(1.2); }
100% { transform: rotate(45deg) scale(1); }
}
.toggle-smooth {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
background: var(--muted, #666);
border-radius: 13px;
cursor: pointer;
transition: background var(--transition-normal, 250ms) ease;
}
.toggle-smooth::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal, 250ms) var(--ease-elastic-out-2, ease);
}
.toggle-smooth.active {
background: var(--primary);
}
.toggle-smooth.active::after {
transform: translateX(22px);
}
.progress-animate {
width: 100%;
height: 6px;
background: rgba(var(--primary-rgb), 0.15);
border-radius: 3px;
overflow: hidden;
}
.progress-animate__bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 3px;
transition: width 0.8s var(--ease-out-3, ease);
position: relative;
}
.progress-animate__bar::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.25),
transparent
);
animation: progress-shimmer 2s infinite;
}
@keyframes progress-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton {
background: linear-gradient(
90deg,
rgba(var(--primary-rgb), 0.06) 25%,
rgba(var(--primary-rgb), 0.12) 37%,
rgba(var(--primary-rgb), 0.06) 63%
);
background-size: 400% 100%;
animation: skeleton-shimmer 1.5s ease infinite;
border-radius: var(--image-radius, 8px);
}
@keyframes skeleton-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid rgba(var(--primary-rgb), 0.2);
border-top-color: var(--primary);
border-radius: 50%;
animation: spinner-rotate 0.8s linear infinite;
}
.spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.spinner--sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes spinner-rotate {
to { transform: rotate(360deg); }
}
.dot-loader {
display: inline-flex;
gap: 6px;
}
.dot-loader__dot {
width: 8px;
height: 8px;
background: var(--primary);
border-radius: 50%;
animation: dot-bounce 1.4s ease-in-out infinite;
}
.dot-loader__dot:nth-child(1) { animation-delay: 0s; }
.dot-loader__dot:nth-child(2) { animation-delay: 0.2s; }
.dot-loader__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
.pulse-ring {
position: relative;
}
.pulse-ring::before {
content: '';
position: absolute;
inset: -4px;
border: 2px solid var(--primary);
border-radius: inherit;
animation: pulse-ring-kf 2s ease-out infinite;
}
@keyframes pulse-ring-kf {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.15); opacity: 0; }
}
.shake {
animation: shake-kf 0.5s ease;
}
@keyframes shake-kf {
0%, 100% { transform: translateX(0); }
10%, 50%, 90% { transform: translateX(-4px); }
30%, 70% { transform: translateX(4px); }
}
.bounce-in {
animation: bounce-in-kf 0.5s var(--ease-elastic-out-3, ease);
}
@keyframes bounce-in-kf {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
.counter-tick {
display: inline-block;
animation: counter-tick-kf 0.3s ease;
}
@keyframes counter-tick-kf {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ripple:active::after { transition: none; }
.check-animate::after { animation: none; transform: rotate(45deg) scale(1); }
.progress-animate__bar::after { animation: none; }
.skeleton { animation: none; }
.spinner { animation: none; }
.dot-loader__dot { animation: none; opacity: 1; transform: scale(1); }
.pulse-ring::before { animation: none; }
.shake { animation: none; }
.bounce-in { animation: none; opacity: 1; transform: scale(1); }
.counter-tick { animation: none; }
}
.divider-wave {
position: relative;
}
.divider-wave::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 60px;
background: var(--background);
clip-path: polygon(
0% 100%,
0% 60%,
5% 55%,
10% 52%,
15% 50%,
20% 50%,
25% 52%,
30% 56%,
35% 58%,
40% 56%,
45% 52%,
50% 48%,
55% 46%,
60% 48%,
65% 52%,
70% 55%,
75% 52%,
80% 48%,
85% 46%,
90% 48%,
95% 54%,
100% 60%,
100% 100%
);
z-index: 2;
pointer-events: none;
}
.divider-wave-top {
position: relative;
}
.divider-wave-top::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 60px;
background: var(--background);
clip-path: polygon(
0% 0%,
0% 40%,
10% 48%,
20% 50%,
30% 44%,
40% 42%,
50% 48%,
60% 52%,
70% 48%,
80% 50%,
90% 46%,
100% 40%,
100% 0%
);
z-index: 2;
pointer-events: none;
}
.divider-diagonal {
position: relative;
}
.divider-diagonal::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 80px;
background: var(--background);
clip-path: polygon(0 100%, 100% 0, 100% 100%);
z-index: 2;
pointer-events: none;
}
.divider-diagonal--reverse::after {
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.divider-arrow {
position: relative;
}
.divider-arrow::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 50px;
background: var(--background);
clip-path: polygon(0 100%, 50% 0, 100% 100%);
z-index: 2;
pointer-events: none;
}
.divider-curve {
position: relative;
}
.divider-curve::after {
content: '';
position: absolute;
bottom: -1px;
left: -5%;
right: -5%;
height: 80px;
background: var(--background);
border-radius: 50% 50% 0 0;
z-index: 2;
pointer-events: none;
}
.divider-zigzag {
position: relative;
}
.divider-zigzag::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(135deg, var(--background) 25%, transparent 25%) -50px 0,
linear-gradient(225deg, var(--background) 25%, transparent 25%) -50px 0,
linear-gradient(315deg, var(--background) 25%, transparent 25%),
linear-gradient(45deg, var(--background) 25%, transparent 25%);
background-size: 40px 20px;
z-index: 2;
pointer-events: none;
}
.divider-tilt {
position: relative;
}
.divider-tilt::after {
content: '';
position: absolute;
bottom: -1px;
left: -1%;
right: -1%;
height: 60px;
background: var(--background);
transform: skewY(-2deg);
transform-origin: bottom left;
z-index: 2;
pointer-events: none;
}
.divider-gradient-line {
position: relative;
padding-bottom: 2rem;
}
.divider-gradient-line::after {
content: '';
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
}
.divider-dots {
position: relative;
padding-bottom: 2rem;
}
.divider-dots::after {
content: '· · · · · · · · · · ·';
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 24px;
letter-spacing: 8px;
color: var(--primary);
opacity: 0.3;
}
.divider-primary::after { background: var(--primary) !important; }
.divider-accent::after { background: var(--accent) !important; }
.divider-dark::after { background: rgba(0,0,0,0.9) !important; }
.divider-sm::after { height: 30px !important; }
.divider-lg::after { height: 100px !important; }
.divider-xl::after { height: 140px !important; }
.bg-dots {
background-image: radial-gradient(
circle,
rgba(var(--primary-rgb), 0.08) 1px,
transparent 1px
);
background-size: 24px 24px;
}
.bg-dots--dense {
background-size: 16px 16px;
}
.bg-dots--sparse {
background-size: 40px 40px;
}
.bg-grid {
background-image:
linear-gradient(rgba(var(--primary-rgb), 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--primary-rgb), 0.04) 1px, transparent 1px);
background-size: 40px 40px;
}
.bg-grid--fine {
background-size: 20px 20px;
}
.bg-grid--bold {
background-image:
linear-gradient(rgba(var(--primary-rgb), 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--primary-rgb), 0.08) 1px, transparent 1px);
background-size: 60px 60px;
}
.bg-diagonal {
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(var(--primary-rgb), 0.03) 10px,
rgba(var(--primary-rgb), 0.03) 11px
);
}
.bg-diagonal--reverse {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
rgba(var(--primary-rgb), 0.03) 10px,
rgba(var(--primary-rgb), 0.03) 11px
);
}
.bg-diagonal--cross {
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(var(--primary-rgb), 0.02) 10px,
rgba(var(--primary-rgb), 0.02) 11px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
rgba(var(--primary-rgb), 0.02) 10px,
rgba(var(--primary-rgb), 0.02) 11px
);
}
.bg-noise {
position: relative;
}
.bg-noise::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 256px 256px;
pointer-events: none;
z-index: 0;
}
.bg-hexagon {
background-color: transparent;
background-image:
linear-gradient(30deg, rgba(var(--primary-rgb), 0.04) 12%, transparent 12.5%, transparent 87%, rgba(var(--primary-rgb), 0.04) 87.5%),
linear-gradient(150deg, rgba(var(--primary-rgb), 0.04) 12%, transparent 12.5%, transparent 87%, rgba(var(--primary-rgb), 0.04) 87.5%),
linear-gradient(30deg, rgba(var(--primary-rgb), 0.04) 12%, transparent 12.5%, transparent 87%, rgba(var(--primary-rgb), 0.04) 87.5%),
linear-gradient(150deg, rgba(var(--primary-rgb), 0.04) 12%, transparent 12.5%, transparent 87%, rgba(var(--primary-rgb), 0.04) 87.5%),
linear-gradient(60deg, rgba(var(--primary-rgb), 0.06) 25%, transparent 25.5%, transparent 75%, rgba(var(--primary-rgb), 0.06) 75%),
linear-gradient(60deg, rgba(var(--primary-rgb), 0.06) 25%, transparent 25.5%, transparent 75%, rgba(var(--primary-rgb), 0.06) 75%);
background-size: 80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
.bg-diamond {
background-image:
linear-gradient(45deg, rgba(var(--primary-rgb), 0.04) 25%, transparent 25%),
linear-gradient(-45deg, rgba(var(--primary-rgb), 0.04) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(var(--primary-rgb), 0.04) 75%),
linear-gradient(-45deg, transparent 75%, rgba(var(--primary-rgb), 0.04) 75%);
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}
.bg-stripe {
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 20px,
rgba(var(--primary-rgb), 0.02) 20px,
rgba(var(--primary-rgb), 0.02) 21px
);
}
.bg-center-glow {
background-image: radial-gradient(
ellipse at center,
rgba(var(--primary-rgb), 0.06) 0%,
transparent 70%
);
}
.bg-corner-glow {
background-image:
radial-gradient(ellipse at top left, rgba(var(--primary-rgb), 0.08) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(var(--accent-rgb), 0.05) 0%, transparent 50%);
}
.bg-dual-corner {
background-image:
radial-gradient(ellipse at top right, rgba(var(--primary-rgb), 0.06) 0%, transparent 40%),
radial-gradient(ellipse at bottom left, rgba(var(--accent-rgb), 0.04) 0%, transparent 40%);
}
.bg-pattern-drift {
animation: bg-drift-kf 30s linear infinite;
}
@keyframes bg-drift-kf {
0% { background-position: 0 0; }
100% { background-position: 100px 100px; }
}
@media (prefers-reduced-motion: reduce) {
.bg-pattern-drift { animation: none; }
}
.btn-neon {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
box-shadow:
0 0 5px rgba(var(--primary-rgb), 0.3),
inset 0 0 5px rgba(var(--primary-rgb), 0.1);
transition: all var(--transition-normal, 250ms) ease;
}
.btn-neon:hover {
background: rgba(var(--primary-rgb), 0.1);
box-shadow:
0 0 10px rgba(var(--primary-rgb), 0.5),
0 0 30px rgba(var(--primary-rgb), 0.2),
inset 0 0 10px rgba(var(--primary-rgb), 0.15);
text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
transform: translateY(-2px);
}
.btn-neon--accent {
color: var(--accent);
border-color: var(--accent);
box-shadow:
0 0 5px rgba(var(--accent-rgb), 0.3),
inset 0 0 5px rgba(var(--accent-rgb), 0.1);
}
.btn-neon--accent:hover {
background: rgba(var(--accent-rgb), 0.1);
box-shadow:
0 0 10px rgba(var(--accent-rgb), 0.5),
0 0 30px rgba(var(--accent-rgb), 0.2),
inset 0 0 10px rgba(var(--accent-rgb), 0.15);
}
.btn-gradient {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
border: none;
position: relative;
z-index: 1;
transition: transform var(--transition-normal, 250ms) ease, box-shadow var(--transition-normal, 250ms) ease;
}
.btn-gradient::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--accent), var(--primary));
opacity: 0;
transition: opacity var(--transition-normal, 250ms) ease;
z-index: -1;
}
.btn-gradient:hover::before {
opacity: 1;
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}
.btn-gradient-shift {
background: linear-gradient(-45deg, var(--primary), var(--accent), var(--primary));
background-size: 200% 200%;
color: #fff;
border: none;
animation: btn-gradient-shift-kf 4s ease infinite;
}
@keyframes btn-gradient-shift-kf {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.btn-glow {
background: var(--primary);
color: var(--primary-foreground, #fff);
border: none;
box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
transition: all var(--transition-normal, 250ms) ease;
}
.btn-glow:hover {
box-shadow:
0 0 20px rgba(var(--primary-rgb), 0.5),
0 0 40px rgba(var(--primary-rgb), 0.2);
transform: translateY(-2px);
}
.btn-pulse {
animation: btn-pulse-kf 2.5s ease-in-out infinite;
}
@keyframes btn-pulse-kf {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4); }
50% { box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0); }
}
.btn-outline-glow {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
transition: all var(--transition-normal, 250ms) ease;
}
.btn-outline-glow:hover {
background: var(--primary);
color: var(--primary-foreground, #fff);
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}
.btn-glass {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all var(--transition-normal, 250ms) ease;
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.btn-3d {
background: var(--primary);
color: var(--primary-foreground, #fff);
border: none;
border-bottom: 4px solid color-mix(in srgb, var(--primary) 70%, black);
transition: all var(--transition-fast, 150ms) ease;
}
.btn-3d:hover {
transform: translateY(-2px);
border-bottom-width: 6px;
}
.btn-3d:active {
transform: translateY(2px);
border-bottom-width: 2px;
}
.btn-shine {
position: relative;
overflow: hidden;
}
.btn-shine::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.btn-shine:hover::after {
left: 100%;
}
.btn-split {
background: linear-gradient(90deg, var(--primary) 50%, var(--accent) 50%);
background-size: 200% 100%;
background-position: right;
color: #fff;
border: none;
transition: background-position var(--transition-normal, 250ms) ease, transform var(--transition-normal, 250ms) ease;
}
.btn-split:hover {
background-position: left;
transform: translateY(-2px);
}
.btn-icon-circle {
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary);
border: 1px solid rgba(var(--primary-rgb), 0.2);
transition: all var(--transition-normal, 250ms) ease;
}
.btn-icon-circle:hover {
background: var(--primary);
color: var(--primary-foreground, #fff);
box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
}
.btn-icon-circle--sm { width: 36px; height: 36px; font-size: 14px; }
.btn-icon-circle--lg { width: 56px; height: 56px; font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
.btn-gradient-shift { animation: none; background-size: 100% 100%; }
.btn-pulse { animation: none; }
.btn-shine::after { transition: none; }
}
.img-warm {
filter: saturate(1.1) sepia(0.15) brightness(1.02);
}
.img-cool {
filter: saturate(0.95) hue-rotate(10deg) brightness(1.02);
}
.img-cinema {
filter: contrast(1.1) saturate(0.9) brightness(0.95);
}
.img-vibrant {
filter: saturate(1.3) contrast(1.05);
}
.img-muted {
filter: saturate(0.7) brightness(1.05);
}
.img-grayscale-hover {
filter: grayscale(100%);
transition: filter var(--transition-normal, 250ms) ease;
}
.img-grayscale-hover:hover {
filter: grayscale(0%);
}
.img-brighten-hover {
transition: filter var(--transition-normal, 250ms) ease;
}
.img-brighten-hover:hover {
filter: brightness(1.12);
}
.img-darken-hover {
transition: filter var(--transition-normal, 250ms) ease;
}
.img-darken-hover:hover {
filter: brightness(0.85);
}
.img-zoom {
overflow: hidden;
}
.img-zoom img {
transition: transform var(--transition-slow, 400ms) ease;
}
.img-zoom:hover img {
transform: scale(1.08);
}
.img-zoom-slow img {
transition: transform 0.8s ease;
}
.img-zoom-slow:hover img {
transform: scale(1.05);
}
.img-overlay-bottom {
position: relative;
}
.img-overlay-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
pointer-events: none;
}
.img-overlay {
position: relative;
}
.img-overlay::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
transition: background var(--transition-normal, 250ms) ease;
}
.img-overlay:hover::after {
background: rgba(0, 0, 0, 0.15);
}
.img-overlay-primary::after {
content: '';
position: absolute;
inset: 0;
background: rgba(var(--primary-rgb), 0.15);
mix-blend-mode: multiply;
pointer-events: none;
}
.img-frame-glow {
box-shadow:
0 0 15px rgba(var(--primary-rgb), 0.15),
0 8px 24px rgba(0, 0, 0, 0.12);
border-radius: var(--image-radius, 12px);
}
.img-frame-border {
border: 3px solid rgba(var(--primary-rgb), 0.3);
border-radius: var(--image-radius, 12px);
padding: 4px;
}
.img-frame-double {
border: 2px solid rgba(var(--primary-rgb), 0.2);
outline: 2px solid rgba(var(--primary-rgb), 0.1);
outline-offset: 4px;
border-radius: var(--image-radius, 12px);
}
.img-frame-gradient {
padding: 3px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: var(--image-radius, 12px);
}
.img-frame-gradient img {
border-radius: calc(var(--image-radius, 12px) - 3px);
}
.img-clip-circle {
clip-path: circle(48% at center);
}
.img-clip-hexagon {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.img-clip-diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.img-clip-rounded-square {
clip-path: inset(0 round 20%);
}
.img-aspect-square { aspect-ratio: 1 / 1; object-fit: cover; }
.img-aspect-video { aspect-ratio: 16 / 9; object-fit: cover; }
.img-aspect-portrait { aspect-ratio: 3 / 4; object-fit: cover; }
.img-aspect-golden { aspect-ratio: 1.618 / 1; object-fit: cover; }
.img-aspect-ultra { aspect-ratio: 21 / 9; object-fit: cover; }
.overlay {
position: relative;
isolation: isolate;
}
.overlay > * {
position: relative;
z-index: 1;
}
.overlay-dark::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 0;
pointer-events: none;
}
.overlay-dark--light::before { background: rgba(0, 0, 0, 0.2); }
.overlay-dark--heavy::before { background: rgba(0, 0, 0, 0.6); }
.overlay-dark--ultra::before { background: rgba(0, 0, 0, 0.75); }
.overlay-primary::before {
content: '';
position: absolute;
inset: 0;
background: rgba(var(--primary-rgb), 0.15);
z-index: 0;
pointer-events: none;
}
.overlay-primary--light::before { background: rgba(var(--primary-rgb), 0.08); }
.overlay-primary--heavy::before { background: rgba(var(--primary-rgb), 0.25); }
.overlay-accent::before {
content: '';
position: absolute;
inset: 0;
background: rgba(var(--accent-rgb), 0.1);
z-index: 0;
pointer-events: none;
}
.overlay-gradient::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.2) 40%,
rgba(0, 0, 0, 0.5) 100%
);
z-index: 0;
pointer-events: none;
}
.overlay-gradient--top::before {
background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 60%);
}
.overlay-gradient--bottom::before {
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.overlay-gradient-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(var(--primary-rgb), 0.2) 0%,
rgba(var(--accent-rgb), 0.1) 100%
);
z-index: 0;
pointer-events: none;
}
.overlay-spotlight::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 30%,
rgba(0, 0, 0, 0.5) 100%
);
z-index: 0;
pointer-events: none;
}
.overlay-vignette::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 0;
pointer-events: none;
}
.overlay-noise::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px;
z-index: 0;
pointer-events: none;
}
.overlay-mesh::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(at 20% 30%, rgba(var(--primary-rgb), 0.1) 0%, transparent 50%),
radial-gradient(at 80% 70%, rgba(var(--accent-rgb), 0.07) 0%, transparent 50%),
radial-gradient(at 50% 50%, rgba(var(--primary-rgb), 0.04) 0%, transparent 40%);
z-index: 0;
pointer-events: none;
}
.overlay-multiply::before { mix-blend-mode: multiply; }
.overlay-screen::before { mix-blend-mode: screen; }
.overlay-soft-light::before { mix-blend-mode: soft-light; }
.overlay-overlay::before { mix-blend-mode: overlay; }