:where([class^="ri-"])::before { content: "\f3c2"; }
body {
background-color: #121212;
color: white;
font-family: 'Inter', sans-serif;
}
.swipeable-stack {
position: relative;
height: 180px;
overflow: visible;
}
.swipeable-card {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.3s ease;
transform-origin: center;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
will-change: transform;
touch-action: none;
}
.swipeable-card:not(:first-child) {
filter: brightness(0.8);
box-shadow: 5px 0 15px rgba(0,0,0,0.3);
}
.swipeable-stack::after {
content: '';
position: absolute;
right: -15px;
top: 0;
bottom: 0;
width: 30px;
background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
border-radius: 0 16px 16px 0;
pointer-events: none;
}
.headline-overlay {
background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);
border-radius: 16px;
}
.swipe-hint {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 24px;
animation: swipeHint 1.5s infinite;
}
@keyframes swipeHint {
0% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(-10px); opacity: 1; }
100% { transform: translateX(0); opacity: 0.7; }
}