.fy-lookbook {
  background: var(--fy-ivory);
}
.fy-lookbook__img {
  transition: transform 1.2s var(--fy-ease);
}
.fy-lookbook__tile:hover .fy-lookbook__img {
  transform: scale(1.04);
}
.fy-lookbook__shade {
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--fy-charcoal) 60%, transparent),
    color-mix(in oklch, var(--fy-charcoal) 5%, transparent) 50%,
    transparent
  );
  transition: opacity 0.5s var(--fy-ease);
}
@container (width >= 40rem) {
  .fy-lookbook__shade {
    opacity: 0.4;
  }
  .fy-lookbook__tile:hover .fy-lookbook__shade {
    opacity: 1;
  }
  .fy-lookbook__kicker {
    opacity: 0;
    transition: opacity 0.3s var(--fy-ease) 0.075s;
  }
  .fy-lookbook__tile:hover .fy-lookbook__kicker,
  .fy-lookbook__tile:focus-visible .fy-lookbook__kicker {
    opacity: 1;
  }
}
.fy-lookbook__name {
  transform: translateY(0.5rem);
  transition: transform 0.5s var(--fy-ease);
}
.fy-lookbook__tile:hover .fy-lookbook__name {
  transform: none;
}
.fy-lookbook__corner {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-top: 1px solid var(--fy-gold);
  border-left: 1px solid var(--fy-gold);
  opacity: 0;
  transform: translate(0.5rem, -0.5rem);
  transition:
    opacity 0.5s var(--fy-ease),
    transform 0.5s var(--fy-ease);
}
.fy-lookbook__tile:hover .fy-lookbook__corner {
  opacity: 1;
  transform: none;
}
.fy-lookbook__line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--fy-ease);
}
.fy-lookbook__tile:hover .fy-lookbook__line,
.fy-lookbook__card:hover .fy-lookbook__line,
.fy-lookbook__tile:focus-visible .fy-lookbook__line,
.fy-lookbook__card:focus-visible .fy-lookbook__line {
  transform: scaleX(1);
}
.fy-lookbook__tile:focus-visible,
.fy-lookbook__card:focus-visible {
  outline: 2px solid var(--fy-gold);
  outline-offset: 2px;
}

.fy-lookbook__card {
  background: var(--fy-charcoal);
  transition: background-color 0.5s var(--fy-ease);
}
.fy-lookbook__card:hover {
  background: var(--fy-charcoal-lift);
}
.fy-lookbook__bracket {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.3;
  transition: opacity 0.5s var(--fy-ease);
}
.fy-lookbook__bracket--top {
  top: 1.25rem;
  left: 1.25rem;
  border-top: 1px solid var(--fy-gold);
  border-left: 1px solid var(--fy-gold);
}
.fy-lookbook__bracket--bottom {
  right: 1.25rem;
  bottom: 1.25rem;
  border-right: 1px solid var(--fy-gold);
  border-bottom: 1px solid var(--fy-gold);
}
.fy-lookbook__card:hover .fy-lookbook__bracket {
  opacity: 1;
}

@keyframes fy-lookbook-drift {
  from {
    transform: translateY(1.25rem);
  }
  to {
    transform: translateY(-1.25rem);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fy-lookbook__drift {
      animation: fy-lookbook-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}