/* Shared paper surface and user-controlled page-turn sound UI. */
.paper-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

.paper-sound-toggle__lamp {
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition: color 180ms ease, background 180ms ease, box-shadow 240ms ease;
}

.paper-sound-toggle:hover,
.paper-sound-toggle:focus-visible { color: var(--ink); }
.paper-sound-toggle[aria-pressed="true"] { color: var(--ink); }
.paper-sound-toggle[aria-pressed="true"] .paper-sound-toggle__lamp {
  border-color: var(--paper-sound-accent, var(--accent, var(--orange, #171716)));
  background: var(--paper-sound-accent, var(--accent, var(--orange, #171716)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper-sound-accent, var(--accent, var(--orange, #171716))) 16%, transparent);
}

.book-current,
.book-turning-face,
.c2-book__current,
.c2-book__turning-face { isolation: isolate; }

.book-current::before,
.book-turning-face::before,
.c2-book__current::before,
.c2-book__turning-face::before,
.book-current::after,
.book-turning-face::after,
.c2-book__current::after,
.c2-book__turning-face::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 3;
  pointer-events: none;
}

.book-current::before,
.book-turning-face::before,
.c2-book__current::before,
.c2-book__turning-face::before {
  opacity: .052;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.book-current::after,
.book-turning-face::after,
.c2-book__current::after,
.c2-book__turning-face::after {
  opacity: .42;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055), transparent 18%, rgba(23,23,22,.018) 50%, transparent 82%, rgba(255,255,255,.045)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(23,23,22,.015) 3px 4px);
  mix-blend-mode: multiply;
}

.book-current img,
.c2-book__current img {
  box-shadow:
    0 1px 0 rgba(255,255,255,.74),
    0 15px 34px rgba(23,23,22,.12),
    0 34px 68px rgba(23,23,22,.065);
}

.book-scene.is-turning .book-current::before,
.book-scene.is-dragging .book-current::before,
.c2-book__scene.is-turning .c2-book__current::before,
.c2-book__scene.is-dragging .c2-book__current::before { opacity: .075; }

@media (max-width: 560px) {
  .paper-sound-toggle__copy { display: none; }
  .paper-sound-toggle { padding: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-sound-toggle__lamp { transition: none; }
}