/* Isolated next-batch feedback. No page, rosette, root-token or image selectors. */
.quran-bookmark-ribbon {
  --bookmark-ribbon-ready: 1;
  z-index: 24; /* Below the existing action toast. Mount in the active mode. */
  isolation: isolate;
  user-select: none;
  pointer-events: none !important;
  touch-action: auto;
}
.quran-bookmark-ribbon__cloth {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  background-color: #dccbb0;
  background-image: linear-gradient(90deg, var(--line), transparent 16%, transparent 84%, var(--line));
  border-inline: 1px solid #bda47d;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
  transform: translateY(-101%);
  animation: quran-bookmark-ribbon-dip var(--bookmark-ribbon-duration, 1200ms) both;
}
/* Opt-in to the already generated app ornament. No competitor/reference art. */
.quran-bookmark-ribbon[data-ornament="true"] .quran-bookmark-ribbon__cloth {
  background-image: url("./assets/normal-ornament.webp"),
    linear-gradient(90deg, var(--line), transparent 16%, transparent 84%, var(--line));
  background-size: 128px 128px, 100% 100%;
  background-position: center top;
}
@keyframes quran-bookmark-ribbon-dip {
  0% { transform: translateY(-101%); animation-timing-function: ease-out; }
  18% { transform: translateY(0); }
  76% { transform: translateY(0); animation-timing-function: ease-in; }
  100% { transform: translateY(-101%); }
}
.quran-bookmark-ribbon[data-motion="reduced"] .quran-bookmark-ribbon__cloth {
  animation: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .quran-bookmark-ribbon__cloth { animation: none; transform: none; }
}

body[data-theme="night"] .quran-bookmark-ribbon__cloth {background-color:#685842;border-inline-color:#ac9164}