/* traces - traces container section */
.traces-container {
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: 2000px;
  margin: 0 auto;
  overflow: hidden;
}

.traces-container .traces-nav,
.traces-container .traces-footer {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  z-index: 1;
}

.traces-container .traces-nav {
  top: 0;
}

.traces-container .traces-footer {
  bottom: 0;
}

.traces-container .traces-nav p,
.traces-container .traces-footer p {
  padding: 0.6rem 1rem;
  background-color: rgba(242, 238, 218, 0.05);
  border: 1px solid rgba(242, 238, 218, 0.15);
  border-radius: 0.25rem;
  backdrop-filter: blur(0.2rem);
  color: var(--base-100);
}

.traces-container .traces-nav .trace-name p {
  background-color: var(--base-100);
  color: var(--base-300);
  font-weight: 600;
}

.traces-container .traces-slider {
  position: absolute;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.traces-container .traces-slider .traces {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 42.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.traces-container .traces-slider .traces li {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  width: 100%;
  aspect-ratio: 4/5;
  padding: 0.5rem;
  filter: url("#goo");
  transform: translate3d(0, 0, 0) scale(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.traces-container .traces-slider .traces li .product-item-bg-wrapper,
.traces-container .traces-slider .traces li .outline-wrapper,
.traces-container .traces-slider .traces li .product-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url("#goo");
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.traces-container .traces-slider .traces li .outline-wrapper {
  z-index: -1;
}

.traces-container .traces-slider .traces li .product-item-bg-wrapper {
  z-index: 0;
}

.traces-container .traces-slider .traces li .product-img-wrapper {
  z-index: 1;
}

.traces-container .traces-slider .traces li .product-img-wrapper {
  padding: 0.75rem;
}

.traces-container
  .traces-slider
  .traces
  li
  .product-item-bg-wrapper
  .product-item-bg {
  width: 100%;
  height: 100%;
  clip-path: polygon(
    2.5rem 0%,
    calc(100% - 2.5rem) 0%,
    100% 2.5rem,
    100% calc(100% - 2.5rem),
    calc(100% - 2.5rem) 100%,
    2.5rem 100%,
    0% calc(100% - 2.5rem),
    0% 2.5rem
  );
  background-color: var(--base-300);
  z-index: 0;
}

.traces-container
  .traces-slider
  .traces
  li
  .outline-wrapper
  .product-bg-outline {
  width: 100%;
  height: 100%;
  clip-path: polygon(
    2.5rem 0%,
    calc(100% - 2.5rem) 0%,
    100% 2.5rem,
    100% calc(100% - 2.5rem),
    calc(100% - 2.5rem) 100%,
    2.5rem 100%,
    0% calc(100% - 2.5rem),
    0% 2.5rem
  );
  transform: scaleX(1.0095) scaleY(1.0075);
  background-color: #3c3c3c;
}

.traces-container .traces-slider .traces li img {
  width: 100%;
  height: 100%;
  clip-path: polygon(
    2rem 0%,
    calc(100% - 2rem) 0%,
    100% 2rem,
    100% calc(100% - 2rem),
    calc(100% - 2rem) 100%,
    2rem 100%,
    0% calc(100% - 2rem),
    0% 2rem
  );
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.traces-container .traces-slider .controller {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(300px);
  width: 11rem;
  height: 11rem;
  user-select: none;
  cursor: pointer;
  z-index: 10;
}

.traces-container .traces-slider .controller .controller-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  background: #383838;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(40% at 50% 50%);
  will-change: clip-path;
  cursor: pointer;
  z-index: 1;
}

.traces-container
  .traces-slider
  .controller
  .controller-inner
  .controller-close-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.traces-container
  .traces-slider
  .controller
  .controller-inner
  .controller-close-icon
  span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--base-100);
  transform-origin: center;
}

.traces-container
  .traces-slider
  .controller
  .controller-inner
  .controller-close-icon
  span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.traces-container
  .traces-slider
  .controller
  .controller-inner
  .controller-close-icon
  span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.traces-container .traces-slider .controller .controller-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--base-300);
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  will-change: clip-path;
  z-index: -1;
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .controller-label
  p {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  color: var(--base-1000);
  will-change: opacity;
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .traces-controller-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--base-1000);
  will-change: opacity;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .traces-controller-nav-btn:active {
  transform: translateY(-50%) scale(0.75);
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .traces-controller-nav-btn
  ion-icon {
  font-size: 1.25rem;
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .traces-controller-nav-btn.prev {
  left: 0.75rem;
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .traces-controller-nav-btn.next {
  right: 0.75rem;
}

.traces-container
  .traces-slider
  .controller
  .controller-outer
  .traces-controller-nav-btn.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.traces-container .traces-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 75%;
  height: 72.5%;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--base-300);
  border: 1px solid rgba(242, 238, 218, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 2;
}

.traces-container .traces-preview .traces-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
}

.traces-container .traces-preview .traces-preview-info .traces-preview-tag p {
  text-transform: uppercase;
}

.traces-container .traces-preview .traces-preview-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  background-color: var(--base-1000);
  overflow: hidden;
}

.traces-container .traces-preview .traces-preview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* traces - media queries */
@media (max-width: 1000px) {
  .traces-container .traces-nav,
  .traces-container .traces-footer {
    display: none;
  }

  .traces-container .traces-slider .traces {
    top: 40%;
  }

  .traces-container .traces-slider .traces li .product-item-bg-wrapper,
  .traces-container .traces-slider .traces li .outline-wrapper,
  .traces-container .traces-slider .traces li .product-img-wrapper {
    transform: scale(0.8);
  }

  .traces-container .traces-slider .controller {
    bottom: 1rem;
    width: 9rem;
    height: 9rem;
  }

  .traces-container
    .traces-slider
    .controller
    .controller-outer
    .traces-controller-nav-btn.prev {
    left: 0.5rem;
  }

  .traces-container
    .traces-slider
    .controller
    .controller-outer
    .traces-controller-nav-btn.next {
    right: 0.5rem;
  }

  .traces-container
    .traces-slider
    .controller
    .controller-outer
    .controller-label
    p {
    font-size: 0.7rem;
  }

  .traces-container .traces-preview {
    width: calc(100% - 2rem);
    height: max-content;
    justify-content: center;
  }

  .traces-container .traces-slider .traces li .product-item-bg-wrapper,
  .traces-container .traces-slider .traces li .outline-wrapper {
    display: none;
  }
}