* {
margin: 0;
box-sizing: border-box;
}
:root {
--bg: #020617;
--c1: #38bdf8;
--c2: #a855f7;
--c3: #22c55e;
--noise: rgba(255, 255, 255, 0.05);
}
body {
font-family: system-ui, sans-serif;
background: radial-gradient(circle at 20% 10%, #1e293b, transparent 60%),
radial-gradient(circle at 80% 90%, #020617, transparent 70%), var(--bg);
color: white;
overflow-x: hidden;
}
/* grain */
body::after {
content: "";
position: fixed;
inset: 0;
background: repeating-radial-gradient(
circle,
var(--noise) 0 1px,
transparent 1px 2px
);
mix-blend-mode: overlay;
pointer-events: none;
opacity: 0.35;
animation: grain 0.25s steps(2) infinite;
}
@keyframes grain {
to {
transform: translate(2px, -2px);
}
}
/* layout */
section {
min-height: 100vh;
display: grid;
place-items: center;
padding: 5rem 2rem;
perspective: 1000px;
}
/* glitch title */
.glitch {
position: relative;
font-size: clamp(3rem, 9vw, 6rem);
font-weight: 900;
letter-spacing: 0.08em;
margin-bottom: 4rem;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0.8;
}
.glitch::before {
color: var(--c1);
transform: translate(3px, -2px);
mix-blend-mode: screen;
animation: glitch 2s infinite alternate;
}
.glitch::after {
color: var(--c2);
transform: translate(-3px, 2px);
mix-blend-mode: screen;
animation: glitch 1.5s infinite alternate-reverse;
}
@keyframes glitch {
0% {
clip-path: inset(0 0 70% 0);
}
25% {
clip-path: inset(20% 0 40% 0);
}
50% {
clip-path: inset(40% 0 20% 0);
}
75% {
clip-path: inset(10% 0 60% 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
/* holographic card */
.card {
width: min(420px, 90vw);
padding: 2.5rem;
border-radius: 28px;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.02)
);
backdrop-filter: blur(16px);
box-shadow: 0 0 50px rgba(56, 189, 248, 0.35),
inset 0 0 35px rgba(255, 255, 255, 0.15);
transform-style: preserve-3d;
animation: float 6s ease-in-out infinite;
position: relative;
}
.card::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(
120deg,
transparent 20%,
var(--c1),
var(--c2),
var(--c3),
transparent 80%
);
filter: blur(25px);
opacity: 0.4;
z-index: -1;
animation: holo 4s linear infinite;
background-size: 400% 100%;
}
@keyframes holo {
to {
background-position: 400% 0;
}
}
@keyframes float {
0%,
100% {
transform: rotateX(12deg) rotateY(-10deg) translateY(0);
}
50% {
transform: rotateX(18deg) rotateY(12deg) translateY(-25px);
}
}
.card h2 {
font-size: 1.7rem;
margin-bottom: 1rem;
}
.card p {
line-height: 1.6;
opacity: 0.85;
}
/* holographic button */
.btn {
display: inline-block;
margin-top: 2rem;
padding: 0.9rem 1.8rem;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.08em;
color: white;
text-decoration: none;
background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
background-size: 300% 100%;
animation: holo 3s linear infinite;
box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
}
