/* Corner-fold motion adapted from Uiverse.io / ferlagher.
   The existing buttons retain their typography, colour, padding and shape. */
:is(.archive-link,.save-button,#open-credits,#motion-toggle) {
  position:relative;
  isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0);
  transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease,
    opacity 180ms ease,box-shadow 180ms ease,translate 150ms ease,clip-path .3s ease;
}
:is(.archive-link,.save-button,#open-credits,#motion-toggle)::before {
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:2;
  top:-1px;
  left:-1px;
  width:0;
  height:0;
  border-radius:0 0 5px 0;
  background:linear-gradient(135deg,
    transparent 0%,transparent 48%,
    color-mix(in srgb,currentColor 48%,transparent) 50%,
    color-mix(in srgb,currentColor 12%,var(--ivory)) 61%,
    color-mix(in srgb,currentColor 7%,var(--ivory)) 100%);
  box-shadow:2px 2px 3px #0003;
  transition:width .3s ease,height .3s ease;
}
@media(hover:hover) {
  :is(.archive-link,.save-button,#open-credits,#motion-toggle):hover {
    clip-path:polygon(1.6em 0,100% 0,100% 100%,0 100%,0 1.6em);
  }
  :is(.archive-link,.save-button,#open-credits,#motion-toggle):hover::before {
    width:1.6em;
    height:1.6em;
  }
}
:is(.archive-link,.save-button,#open-credits,#motion-toggle):focus-visible {
  clip-path:polygon(1.6em 0,100% 0,100% 100%,0 100%,0 1.6em);
  box-shadow:inset 0 0 0 2px currentColor;
}
:is(.archive-link,.save-button,#open-credits,#motion-toggle):focus-visible::before {
  width:1.6em;
  height:1.6em;
}
:is(.archive-link,.save-button,#open-credits,#motion-toggle):active {
  translate:.1em .1em;
}
.no-motion :is(.archive-link,.save-button,#open-credits,#motion-toggle)::before { display:none; }
.no-motion :is(.archive-link,.save-button,#open-credits,#motion-toggle) { clip-path:none; }
.no-motion :is(.archive-link,.save-button,#open-credits,#motion-toggle):active { translate:none; }
@media(prefers-reduced-motion:reduce) {
  :is(.archive-link,.save-button,#open-credits,#motion-toggle) { clip-path:none; }
  :is(.archive-link,.save-button,#open-credits,#motion-toggle)::before { display:none; }
  :is(.archive-link,.save-button,#open-credits,#motion-toggle):active { translate:none; }
}