.icy-successes__archive {
  position: relative;
  background:
    radial-gradient(circle at 84% 8%, rgba(17, 92, 126, .12), transparent 28rem),
    #04080d;
}

.icy-successes__grid {
  align-items: stretch;
  gap: clamp(.75rem, 1.2vw, 1.15rem);
}

.icy-success-card {
  border-color: rgba(114, 218, 255, .18);
  border-radius: .15rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .16);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.icy-success-card[hidden] {
  display: none;
}

.icy-success-card:not(.is-revealed) {
  opacity: 0;
  transform: translateY(1.25rem);
}

.icy-success-card.is-revealed,
.icy-success-card.is-filtered-in {
  animation: icy-archive-enter .5s cubic-bezier(.2, .75, .25, 1) both;
  animation-delay: calc(var(--archive-order, 0) * 24ms);
}

.icy-success-card:hover {
  border-color: rgba(107, 224, 255, .46);
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .34), 0 0 2rem rgba(58, 190, 234, .08);
  transform: translateY(-.18rem);
}

.icy-success-card__visual img {
  object-position: center;
}

.icy-success-card:not(.is-release) .icy-success-card__overlay {
  min-height: 8rem;
  justify-content: end;
  background: linear-gradient(180deg, transparent 20%, rgba(2, 7, 11, .78));
}

.icy-success-card.is-release .icy-success-card__overlay strong {
  margin: .45rem 0 .2rem;
}

.icy-success-card.is-release .icy-success-card__overlay em {
  color: rgba(233, 246, 253, .76);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .08em;
}

.icy-success-card--wide .icy-success-card__visual img {
  object-position: center 42%;
}

.icy-success-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: clamp(3.4rem, 5vw, 4.8rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(220, 249, 255, .72);
  border-radius: 50%;
  background: rgba(1, 10, 17, .48);
  box-shadow: 0 0 2rem rgba(61, 214, 255, .2);
  backdrop-filter: blur(8px);
  transform: translate(-50%, -50%);
  transition: background .3s ease, transform .3s ease;
}

.icy-success-card__play i {
  width: 0;
  height: 0;
  margin: 0 0 0 .2rem;
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
  border-left: .8rem solid #effcff;
}

.icy-success-card:hover .icy-success-card__play {
  background: rgba(23, 183, 229, .72);
  transform: translate(-50%, -50%) scale(1.04);
}

.icy-success-modal {
  z-index: 10000;
}

.has-success-modal {
  overflow: hidden;
}

.icy-success-modal__dialog {
  width: min(94vw, 1180px);
  max-height: 92dvh;
  border: 1px solid rgba(104, 218, 255, .2);
  background: linear-gradient(145deg, #071521, #03080d);
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 215, 250, .5) transparent;
}

.icy-success-modal__article {
  padding-inline: clamp(1.35rem, 5vw, 5rem);
}

.icy-success-modal__visual {
  display: grid;
  min-height: 12rem;
  place-items: center;
  overflow: hidden;
  background: #020609;
}

.icy-success-modal__visual img,
.icy-success-modal__visual video {
  display: block;
  width: 100%;
  max-height: 70dvh;
  object-fit: contain;
}

.icy-success-modal__visual--video {
  aspect-ratio: auto;
}

.icy-success-modal__top + .icy-success-modal__visual {
  margin-top: 1.5rem;
}

.icy-success-modal__visual--video video {
  height: min(70dvh, 48rem);
  background: #000;
}

.icy-success-modal__nav {
  position: fixed;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 3.1rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(132, 225, 255, .38);
  border-radius: 50%;
  background: rgba(3, 12, 19, .84);
  color: #effbff;
  font-size: 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
}

.icy-success-modal__nav--prev {
  left: max(1rem, calc(50vw - 38rem));
}

.icy-success-modal__nav--next {
  right: max(1rem, calc(50vw - 38rem));
}

.icy-success-modal__close {
  position: sticky;
  top: .75rem;
  margin: .75rem;
  background: rgba(4, 15, 24, .9);
  backdrop-filter: blur(10px);
}

@keyframes icy-archive-enter {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .icy-success-modal__nav {
    top: auto;
    bottom: 1rem;
    transform: none;
  }

  .icy-success-modal__nav--prev { left: 1rem; }
  .icy-success-modal__nav--next { right: 1rem; }
}

@media (max-width: 600px) {
  .icy-successes__filters {
    margin-right: -1.25rem;
    padding-right: 1.25rem;
    scrollbar-width: none;
  }

  .icy-successes__filters::-webkit-scrollbar {
    display: none;
  }

  .icy-success-card__overlay {
    min-height: 10rem;
    justify-content: end;
    background: linear-gradient(180deg, transparent 25%, rgba(2, 7, 11, .94));
  }

  .icy-success-card i {
    max-height: 2rem;
    margin-top: .65rem;
    opacity: 1;
  }

  .icy-success-modal__dialog {
    width: 100%;
    border: 0;
  }

  .icy-success-modal__visual video {
    height: auto;
    max-height: 64dvh;
  }

  .icy-success-modal__nav {
    width: 3.25rem;
    bottom: max(8rem, calc(env(safe-area-inset-bottom) + 7.25rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .icy-success-card,
  .icy-success-card.is-revealed,
  .icy-success-card.is-filtered-in,
  .icy-success-card__play {
    animation: none;
    transition: none;
  }
}