.distorsion-book-audio-badge {
  display: table;
  width: fit-content;
  padding: .3rem .7rem;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
  border-radius: 2rem;
  color: var(--wp--preset--color--accent);
  font-size: .85rem;
  font-weight: 600;
}
.distorsion-book-audio-jump { display: inline-block; margin: 1rem 0 0 1rem; }
.distorsion-book-audio {
  box-sizing: border-box;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--large, 1rem);
  background: var(--wp--preset--color--surface);
  scroll-margin-top: 7rem;
}
.distorsion-book-audio h2 { margin-top: 0; }
.distorsion-book-audio audio { display: block; width: min(100%, 36rem); }
.distorsion-book-audio-fallback { font-size: .875rem; }
.distorsion-book-audio .wp-element-button { display: inline-block; margin-top: .5rem; }
.distorsion-book-card__copy .distorsion-book-audio-badge { margin-block: .65rem; }
.home .home-catalog-cta { display: flex; justify-content: center; }
.distorsion-books-page .distorsion-authors { margin-top: clamp(3rem, 6vw, 5rem); }
.distorsion-book-page .distorsion-book-audio { margin-top: clamp(2.5rem, 5vw, 4rem); }
.distorsion-book-editorial li { margin-block: .45rem; }
@media (max-width: 42rem) {
  .distorsion-book-audio-jump { display: table; margin: 1rem 0 0; }
}

.distorsion-photo-glitch { position: relative; isolation: isolate; }
.distorsion-photo-glitch-layer { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .distorsion-photo-glitch-layer {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(7% 0 91% 0);
  }
  .distorsion-photo-glitch-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 218, 244, .22);
  }
  .distorsion-photo-glitch-layer:last-child { clip-path: inset(82% 0 15% 0); }
  .distorsion-photo-glitch-layer:last-child::after { background: rgba(221, 63, 184, .18); }
  .distorsion-photo-glitch:hover .distorsion-photo-glitch-layer { animation: distorsion-portrait-signal 250ms steps(1,end) 1; }
  .distorsion-photo-glitch:hover .distorsion-photo-glitch-layer:last-child { animation-direction: reverse; }
}
@keyframes distorsion-portrait-signal {
  0%,100% { opacity: 0; transform: translateX(0); }
  15% { opacity: .7; transform: translateX(-3px); }
  35% { opacity: .55; transform: translateX(2px); }
  50% { opacity: 0; transform: translateX(0); }
  70% { opacity: .6; transform: translateX(3px); }
  85% { opacity: .35; transform: translateX(-1px); }
}