@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.bg-neocut-glow {
background:
radial-gradient(circle at 10% 0%, rgba(189,140,255,0.18), transparent 55%),
radial-gradient(circle at 90% 20%, rgba(255,126,219,0.2), transparent 55%),
radial-gradient(circle at 50% 100%, rgba(109,83,255,0.28), transparent 60%);
}
}
@layer components {
.neocut-logo-mark {
@apply h-7 w-7 rounded-xl shadow-[0_0_20px_rgba(139,91,255,0.75)];
background: radial-gradient(circle at 30% 0, #ffffff, #b087ff);
position: relative;
overflow: hidden;
}
.neocut-logo-mark::after {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 60%);
mix-blend-mode: screen;
transform: translateX(-60%);
animation: logo-shine 3.2s ease-in-out infinite;
}
.neocut-card-glass {
@apply relative rounded-3xl border border-white/10 bg-[#101021]/80 p-4 shadow-[0_24px_70px_rgba(0,0,0,0.9)] backdrop-blur-2xl;
}
.neocut-feature-card {
@apply relative rounded-2xl border border-white/10 bg-black/70 p-5 shadow-[0_18px_40px_rgba(0,0,0,0.8)] backdrop-blur-xl;
}
.neocut-feature-card::before {
content: “”;
position: absolute;
inset: -40%;
background: radial-gradient(circle at 0 0, rgba(176,135,255,0.18), transparent 55%);
opacity: 0;
transition: opacity 0.2s ease-out;
pointer-events: none;
}
.neocut-feature-card:hover {
@apply border-purple-300/70;
box-shadow:
0 25px 60px rgba(0,0,0,0.95),
0 0 32px rgba(176,135,255,0.38);
}
.neocut-feature-card:hover::before {
opacity: 1;
}
}
/* animations */
@keyframes bg-float {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -20px, 0) scale(1.02);
}
100% {
transform: translate3d(0, 10px, 0) scale(1.03);
}
}
@keyframes logo-shine {
0% {
transform: translateX(-80%);
opacity: 0;
}
40% {
opacity: 0;
}
60% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(60%);
opacity: 0;
}
}
.animate-bg-float {
animation: bg-float 26s ease-in-out infinite alternate;
}