/* Copyright (c) 2024 by Jhey (https://codepen.io/jh3y/pen/VwmZppG) */
* {
  box-sizing: border-box;
}
:root {
  --bg: #080b11;
}
body {
  background: var(--bg);
  min-height: 100vh;
  overflow: hidden;
}
img {
  object-fit: cover;
}
.card:hover {
  --y: -2%;
}
.card .card__card {
  transition: 0.1s ease;
  transform: translate3d(0, var(--y, 0), 0);
}
.card__overlay--reflection {
  background: linear-gradient(var(--bg) 50%, transparent);
  clip-path: inset(50% 0 0 0);
}
.card__reflection {
  filter: blur(5px);
  transition: 0.2s ease;
  transform: translate3d(0, 0, 0) rotate(180deg) translate(0, -100%) rotateY(180deg) translate(0, var(--y, 0));
}
.card__reflection .card__details {
  background: transparent;
}
.card__reflection .card__content {
  clip-path: inset(50% 0 0 0);
}