@property --story-turn-shade {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.story-builder-turning-leaf {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  pointer-events: none;
  perspective: 1800px;
}

.is-turning > .story-builder-turning-leaf { display: block; }
.is-turn-source, .is-turn-source * { visibility: hidden !important; }

.story-builder-turning-leaf::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(52, 32, 16, .28), transparent);
  animation: story-turn-gutter-shadow var(--story-turn-duration, 600ms) ease-in-out both;
}

.story-builder-turning-leaf.is-full-turn::before { display: none; }

@keyframes story-turn-gutter-shadow {
  0%, 100% { opacity: 0; transform: translateX(-50%) scaleX(.6); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

.story-builder-turning-face {
  position: absolute;
  inset-block: 0;
  width: 50%;
  overflow: hidden;
  background: #eee1cb;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.story-builder-turning-face[hidden] { display: none; }

.story-builder-turning-leaf[data-direction="next"] .is-front,
.story-builder-turning-leaf[data-direction="previous"] .is-back {
  left: 0;
  transform-origin: right center;
  --fold-gradient: to left;
}

.story-builder-turning-leaf[data-direction="next"] .is-back,
.story-builder-turning-leaf[data-direction="previous"] .is-front {
  right: 0;
  transform-origin: left center;
  --fold-gradient: to right;
}

.story-builder-turning-leaf.is-full-turn .story-builder-turning-face { width: 100%; }

.story-builder-turning-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--fold-gradient), transparent 35%, rgba(64, 42, 20, .35));
  opacity: var(--story-turn-shade, 0);
  pointer-events: none;
}

.story-builder-turning-face > .story-builder-turn-clone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

@media print {
  .story-builder-turning-leaf { display: none !important; }
  .is-turn-source, .is-turn-source * { visibility: visible !important; }
}