body {
  margin: 0;
  font-family: sans-serif;
  background: #111;
  color: white;
  height: 100vh;
  text-align: center;
}

/* hide page scrollbar */
html { scrollbar-width: none; } /* Firefox */
body { -ms-overflow-style: none; } /* IE and Edge */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
/* end hide page scrollbar */

.marquee {
  background: #222;
  color: #00ffcc;
  padding: 5px;
  margin-bottom: 20px;
}

/* Trigger image */
.carousel-trigger {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 0;
}

.carousel-trigger img {
  width: 60px;
  border-radius: 8px;
  transition: transform 1.3s ease;
}

.carousel-trigger img:hover {
  transform: scale(1.1);
}

/* Carousel container */
.carousel {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  perspective: 1000px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  transform-style: preserve-3d;
}

.carousel.show {
  opacity: 1;
  pointer-events: auto;
}

/* Default (hidden) state: no rotation, pushed down */
.carousel-item {
  width: 100px;
  height: 100px;
  background: #333;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: bottom center;
  transition: transform 0.4s ease;
  cursor: pointer;
}

/* Curve effect */
/* when carousel is visible */
.carousel.show .carousel-item:nth-child(1) { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,30px,-100px); }
.carousel.show .carousel-item:nth-child(2) { transform: rotateY(-15deg) rotateZ(-5deg) translate3d(0px,10px,0px); }
.carousel.show .carousel-item:nth-child(3) { transform: translate3d(0px,0px,100px); }
.carousel.show .carousel-item:nth-child(4) { transform: rotateY(15deg) rotateZ(5deg) translate3d(0px,10px,0px); }
.carousel.show .carousel-item:nth-child(5) { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,30px,-100px); }
/* when carousel is not visible */
.carousel .carousel-item:nth-child(1) { transform: translate3d(150px,200px,0px); z-index: 1; }
.carousel .carousel-item:nth-child(2) { transform: translate3d(50px,250px,0px); z-index: 2; }
.carousel .carousel-item:nth-child(3) { transform: translate3d(0px,300px,0px); z-index: 3; }
.carousel .carousel-item:nth-child(4) { transform: translate3d(-50px,280px,0px); z-index: 2; }
.carousel .carousel-item:nth-child(5) { transform: translate3d(-150px,180px,0px); z-index: 1; }

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item img:hover {
  transform: scale(1.1);
}

.carousel-item:hover {
  transform: translateY(10px);
}

/* variant 1 */
@keyframes slideOutRight {
  0%   { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,30px,-100px); opacity: 1; }
  100% { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,50px,-250px); opacity: 0; }
}

@keyframes slideOutLeft {
  0%   { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,30px,-100px); opacity: 1; }
  100% { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,50px,-250px); opacity: 0; }
}

@keyframes slideInFromRight {
  0%   { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,50px,-250px); opacity: 0; }
  100% { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,30px,-100px); opacity: 1; }
}

@keyframes slideInFromLeft {
  0%   { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,50px,-250px); opacity: 0; }
  100% { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,30px,-100px); opacity: 1; }
}

/* variant 2 */
/* @keyframes slideOutRight {
  0%   { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,30px,-100px); opacity: 1; }
  100% { transform: rotateY(-90deg) rotateZ(10deg) translate3d(0px,100px,-100px); opacity: 0; }
}

@keyframes slideOutLeft {
  0%   { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,30px,-100px); opacity: 1; }
  100% { transform: rotateY(90deg) rotateZ(-10deg) translate3d(0px,100px,-100px); opacity: 0; }
}

@keyframes slideInFromRight {
  0%   { transform: rotateY(-90deg) rotateZ(10deg) translate3d(0px,100px,-100px); opacity: 0; }
  100% { transform: rotateY(30deg) rotateZ(10deg) translate3d(0px,30px,-100px); opacity: 1; }
}

@keyframes slideInFromLeft {
  0%   { transform: rotateY(90deg) rotateZ(-10deg) translate3d(0px,100px,-100px); opacity: 0; }
  100% { transform: rotateY(-30deg) rotateZ(-10deg) translate3d(0px,30px,-100px); opacity: 1; }
}  */


/* Classes */
.carousel-item.sliding-out-right { animation: slideOutRight 0.2s forwards; }
.carousel-item.sliding-out-left  { animation: slideOutLeft 0.2s forwards; }
.carousel-item.sliding-in-right  { animation: slideInFromRight 0.2s forwards; }
.carousel-item.sliding-in-left   { animation: slideInFromLeft 0.2s forwards; }