.holographic-tile {
  --holo-pointer-x: 50%;
  --holo-pointer-y: 50%;
  --holo-shift-x: 0px;
  --holo-shift-y: 0px;
  --holo-rotate-x: 0deg;
  --holo-rotate-y: 0deg;
  --holo-lift: 0px;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateY(var(--holo-lift)) perspective(560px) rotateX(var(--holo-rotate-x)) rotateY(var(--holo-rotate-y));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 120ms ease, box-shadow 140ms ease, filter 140ms ease;
  will-change: transform;
}

.holographic-tile::before,
.holographic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, background-position 120ms ease;
}

.holographic-tile::before {
  background:
    radial-gradient(
      circle at var(--holo-pointer-x) var(--holo-pointer-y),
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.22) 11%,
      rgba(255, 255, 255, 0) 28%
    ),
    linear-gradient(
      115deg,
      rgba(255, 0, 120, 0) 0%,
      rgba(255, 0, 120, 0.34) 22%,
      rgba(0, 210, 255, 0.32) 42%,
      rgba(255, 240, 98, 0.34) 61%,
      rgba(119, 255, 177, 0.28) 78%,
      rgba(255, 255, 255, 0) 100%
    );
  mix-blend-mode: screen;
  filter: saturate(1.35);
}

.holographic-tile::after {
  background:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.22) 0 1px,
      rgba(255, 255, 255, 0) 1px 5px
    ),
    linear-gradient(
      130deg,
      rgba(255, 255, 255, 0) 15%,
      rgba(255, 255, 255, 0.34) 45%,
      rgba(255, 255, 255, 0) 72%
    );
  background-size: 88px 88px, 160% 160%;
  background-position: var(--holo-shift-x) var(--holo-shift-y), center;
  mix-blend-mode: color-dodge;
  filter: saturate(1.4) brightness(1.04);
}

.holographic-tile:hover,
.holographic-tile.holographic-tile--active {
  --holo-lift: -3px;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36), 0 1px 0 rgba(255, 255, 255, 0.28) inset;
  filter: saturate(1.08) contrast(1.02);
}

.holographic-tile:hover::before,
.holographic-tile.holographic-tile--active::before {
  opacity: 0.46;
}

.holographic-tile:hover::after,
.holographic-tile.holographic-tile--active::after {
  opacity: 0.28;
}

.holographic-tile.selected {
  --holo-lift: -3px;
}

.holographic-tile.borrowed {
  box-shadow: 0 0 0 2px #f87171, var(--tile-shadow);
}

.holographic-tile.borrowed:hover,
.holographic-tile.borrowed.holographic-tile--active {
  box-shadow: 0 0 0 2px #f87171, 0 8px 18px rgba(0, 0, 0, 0.36);
}

@media (hover: none), (pointer: coarse) {
  .holographic-tile {
    will-change: auto;
  }

  .holographic-tile::before,
  .holographic-tile::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .holographic-tile,
  .holographic-tile:hover,
  .holographic-tile.holographic-tile--active,
  .holographic-tile.selected {
    --holo-pointer-x: 50%;
    --holo-pointer-y: 50%;
    --holo-shift-x: 0px;
    --holo-shift-y: 0px;
    --holo-rotate-x: 0deg;
    --holo-rotate-y: 0deg;
    --holo-lift: 0px;

    transform: none;
    filter: none;
    transition: box-shadow 120ms ease;
    will-change: auto;
  }

  .holographic-tile::before {
    display: block;
    background: linear-gradient(
      125deg,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0.24) 48%,
      rgba(255, 255, 255, 0) 70%
    );
    mix-blend-mode: screen;
    opacity: 0.08;
  }

  .holographic-tile:hover::before {
    opacity: 0.14;
  }

  .holographic-tile::after {
    display: none;
  }
}