@import url("https://fonts.bunny.net/css?family=just-me-again-down-here:400");

.gci-en-container {
  position: relative;
  height: 100svh;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #fff;
  color: #0a0a0a;
  z-index: 9999;
}

.gci-en-wrapper {
  --card-border-radius: 14px;
  --cards: sibling-count();
  --card-width: clamp(230px, 22vw, 290px);
  --card-height: calc(var(--card-width) * 6 / 4);
  --radius: calc(var(--card-width) * var(--cards) / (2 * 3.1416));
  --rotate: 0;

  font-family: "Just Me Again Down Here", handwriting;
  position: absolute;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  top: calc(50% + var(--radius) + var(--card-height) * 2);
  left: 50%;
  transform-origin: center center;
  transform: translateX(-50%) rotate(calc(var(--rotate) * 360deg));
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gci-en-wrapper > div {
  --card-i: sibling-index();
  --card-offset-radius: circle(var(--radius) at 50% 50%);
  --card-offset-distance: calc((var(--card-i) - 1) / var(--cards) * 100%);
  --card-phase: calc((var(--card-i) - 1) / var(--cards) - 0.75);
  --card-pos: mod(calc(var(--card-phase) + var(--rotate) + 1), 1);
  --card-dist: min(var(--card-pos), calc(1 - var(--card-pos)));
  --card-grayscale: clamp(0, calc(var(--card-dist) * var(--cards)), 1);
  --card-opacity: calc(1 - (var(--card-dist) / 0.15));
  --card-focus-range: 0.1;
  --card-max-blur: 7px;
  --card-norm-dist: min(var(--card-dist), var(--card-focus-range));
  --card-blur-progress: calc(var(--card-norm-dist) / var(--card-focus-range));
  --card-blur: calc(var(--card-blur-progress) * var(--card-max-blur));

  position: absolute;
  width: var(--card-width);
  aspect-ratio: 4 / 6;
  border-radius: var(--card-border-radius);
  filter: blur(var(--card-blur)) grayscale(var(--card-grayscale));
  opacity: var(--card-opacity);
  offset-path: var(--card-offset-radius);
  offset-distance: var(--card-offset-distance);
  offset-rotate: auto;
  offset-anchor: 50% 100%;
  transform-origin: center calc(var(--card-height) * -2);
  transition: all 30ms ease-in-out;
}

.gci-en-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gci-en-controls {
  position: absolute;
  bottom: 8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 100;
}

.gci-en-controls button {
  padding: 10px !important;
  font-size: 1rem;
  font-family: inherit;
  color: #fff !important;
  background-color: #683f76 !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.gci-en-controls button:hover {
  opacity: 0.8;
}

.gci-en-controls button:active {
  transform: scale(0.95);
}