.fy-showcase {
  background: var(--fy-cream);
}
.fy-showcase__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@container (width < 64rem) {
  .fy-showcase__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}
@container (width < 40rem) {
  .fy-showcase__list {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--page-gutter, 1.5rem) * -1);
    padding-inline: var(--page-gutter, 1.5rem);
  }
  .fy-showcase__list::-webkit-scrollbar {
    display: none;
  }
  .fy-showcase__item {
    flex: 0 0 75cqi;
    scroll-snap-align: center;
  }
}

.fy-showcase__card {
  display: block;
}
.fy-showcase__card:focus-visible {
  outline: 2px solid var(--fy-gold);
  outline-offset: 2px;
}
.fy-showcase__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--fy-charcoal);
}
@container (width >= 40rem) {
  .fy-showcase__frame {
    aspect-ratio: 1;
  }
}
.fy-showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--fy-ease);
}
.fy-showcase__card:hover .fy-showcase__img {
  transform: scale(1.05);
}

.fy-showcase__stroke {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  opacity: 0;
  filter: blur(24px);
  transform: translate(-50%, -50%) scale(1.06);
  transition:
    opacity 1s var(--fy-ease) var(--fy-stroke-delay, 0s),
    filter 1s var(--fy-ease),
    transform 1s var(--fy-ease);
}
.fy-showcase__stroke svg {
  width: 100%;
  height: 100%;
}
.fy-showcase__path--sand {
  stroke: var(--fy-sand);
}
.fy-showcase__path {
  stroke-width: 200;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 0.6s var(--fy-spring),
    stroke-width 0.6s var(--fy-spring);
}
.fy-showcase__card[data-phase="drawing"] .fy-showcase__stroke {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.3s ease-out var(--fy-stroke-delay, 0s),
    filter 0.1s ease-out,
    transform 0.1s ease-out;
}
.fy-showcase__card[data-phase="dissolve"] .fy-showcase__stroke {
  opacity: 0.15;
}
.fy-showcase__card:not([data-phase="idle"]) .fy-showcase__path {
  stroke-width: 700;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 1.4s var(--fy-spring) var(--fy-stroke-delay, 0s),
    stroke-width 1.4s var(--fy-spring) var(--fy-stroke-delay, 0s);
}

.fy-showcase__glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--fy-charcoal) 70%, transparent) 0%,
    color-mix(in oklch, var(--fy-charcoal) 30%, transparent) 25%,
    transparent 50%
  );
  transition: opacity 0.3s ease-out;
}
.fy-showcase__card[data-phase="dissolve"] .fy-showcase__glass,
.fy-showcase__card[data-phase="revealed"] .fy-showcase__glass {
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--fy-charcoal) 70%, transparent) 0%,
    color-mix(in oklch, var(--fy-charcoal) 40%, transparent) 30%,
    color-mix(in oklch, var(--fy-charcoal) 15%, transparent) 55%,
    transparent 70%
  );
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  mask-image: linear-gradient(to top, black 0%, black 35%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 35%, transparent 78%);
}
.fy-showcase__card:not([data-phase="idle"]) .fy-showcase__glass {
  opacity: 1;
  transition: opacity 0.5s ease-out 0.3s;
}

.fy-showcase__text {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 1.25rem;
  text-shadow:
    0 1px 8px oklch(0 0 0 / 0.6),
    0 0 2px oklch(0 0 0 / 0.4);
}
@container (width >= 40rem) {
  .fy-showcase__text {
    padding: 1.5rem;
  }
}
@container (width >= 64rem) {
  .fy-showcase__text {
    padding: 2rem;
  }
}
.fy-showcase__mask {
  overflow: hidden;
  padding-block: 0.125rem;
}
.fy-showcase__rise {
  transform: translateY(110%);
  transition: transform 0.5s var(--fy-spring) 0s;
}
.fy-showcase__card:not([data-phase="idle"]) .fy-showcase__rise {
  transform: none;
  transition-delay: var(--fy-rise-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .fy-showcase__stroke {
    display: none;
  }
  .fy-showcase__rise {
    transform: none;
    transition: none;
  }
  .fy-showcase__glass {
    opacity: 1;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .fy-showcase__card[data-phase="dissolve"] .fy-showcase__glass,
  .fy-showcase__card[data-phase="revealed"] .fy-showcase__glass {
    background: linear-gradient(
      to top,
      color-mix(in oklch, var(--fy-charcoal) 82%, transparent),
      transparent 70%
    );
  }
}