/* Home project glass, inspired by https://glow-cards.webflow.io/.
   Keep the media above the light wash so its original colours are preserved. */
.slides-page .project-slide .slide-card {
  --glass-top: rgb(224 228 233 / .88);
  --glass-bottom: rgb(204 211 219 / .8);
  --glass-edge: rgb(42 49 61 / .16);
  --glass-shine: rgb(255 255 255 / .95);
  --glass-shadow: rgb(26 32 44 / .09);
  --glow-wash: rgb(255 255 255 / .8);
  --glow-edge: rgb(74 88 110 / .35);
  --glass-tag: rgb(20 30 45 / .055);
  --glass-tag-hover: rgb(20 30 45 / .1);
  position: relative;
  isolation: isolate;
  color: var(--foreground);
  background: linear-gradient(135deg, var(--glass-top), var(--glass-bottom));
  box-shadow: inset 0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-shine), 0 8px 32px var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
}
:root[data-theme="dark"] .project-slide .slide-card {
  --glass-top: rgb(37 37 39 / .82);
  --glass-bottom: rgb(24 24 26 / .76);
  --glass-edge: rgb(255 255 255 / .095);
  --glass-shine: rgb(255 255 255 / .12);
  --glass-shadow: rgb(0 0 0 / .12);
  --glow-wash: rgb(255 255 255 / .065);
  --glow-edge: rgb(255 255 255 / .45);
  --glass-tag: rgb(255 255 255 / .065);
  --glass-tag-hover: rgb(255 255 255 / .12);
}
.slides-page .project-slide .slide-card::before,
.slides-page .project-slide .slide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}
.slides-page .project-slide .slide-card::before {
  z-index: 0;
  background: radial-gradient(800px circle at var(--glow-x, 50%) var(--glow-y, 30%),
    var(--glow-wash), transparent 40%);
}
.slides-page .project-slide .slide-card::after {
  z-index: 2;
  padding: 1px;
  background: radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 30%),
    var(--glow-edge), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.slides-page .project-slide .slide-card > :is(.slide-media, .slide-copy) {
  position: relative;
  z-index: 1;
}
.slides-page .slide-card .project-tags :is(a, span) {
  color: inherit;
  background: var(--glass-tag);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.slides-page .slide-card .project-tags a:focus-visible {
  background: var(--glass-tag-hover);
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .slides-page .slide-card .project-tags a:hover { background: var(--glass-tag-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .slides-page .project-slide .slide-card.glow-active::after { opacity: 1; }
  .slides-page .project-slide .slide-card.glow-active:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .slides-page .project-slide .slide-card::before,
  .slides-page .project-slide .slide-card::after { transition: none; }
}