/* The turning comic. Styles for sc/pager.js.
 *
 * Only the reader loads this. The golden fixtures and the per-book QA
 * pages stay a plain scroll on purpose: the layout gate measures pages,
 * and a page mid-turn is not a page whose measurements mean anything.
 */

/* --- the deck ---------------------------------------------------------- */

.sc-deck {
  position: relative;
  /* a real page turn needs somewhere to turn into */
  perspective: 1800px;
  perspective-origin: 0% 50%;
  /* Up and down is the browser's, side to side is ours. Without this the
     browser claims a horizontal pan for its own gesture handling and the
     swipe never arrives. */
  touch-action: pan-y;
  /* A drag that starts on a drawing is a page turn, not the browser
     picking the picture up and carrying it. Dragging an image cancels the
     whole pointer stream, so the swipe would die halfway across. */
  -webkit-user-select: none;
  user-select: none;
}
.sc-deck img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.sc-deck .sc-leaf { display: none; }
.sc-deck .sc-leaf.is-current,
.sc-deck .sc-leaf.is-measuring { display: block; }

/* Only while a turn is running do the two pages share the same space.
 * The rest of the time the deck is one page in normal flow, so it grows
 * with its content and scrolls the way a tall page should. */
.sc-deck.is-turning {
  overflow: hidden;
  transition: height 520ms cubic-bezier(.4, 0, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sc-deck.is-turning { transition: none; }
}
.sc-deck.is-turning .sc-leaf.is-current {
  position: absolute;
  top: 0; left: 0; right: 0;
}

.sc-leaf {
  /* the turn shadow is positioned against this, so it has to be here and
     not on the page inside: a shade that escapes its leaf darkens the
     page underneath instead of the one turning */
  position: relative;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* the shadow that sweeps over a page as it lifts */
.sc-leaf__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
}

/* forward: the page lifts off its left edge and falls away */
.sc-leaf.is-turning-out {
  z-index: 2;
  animation: sc-turn-out 520ms cubic-bezier(.4, 0, .25, 1) forwards;
}
.sc-leaf.is-turning-out .sc-leaf__shade {
  animation: sc-shade 520ms ease-in forwards;
}
.sc-leaf.is-turning-in {
  z-index: 1;
  animation: sc-turn-in 520ms cubic-bezier(.25, .8, .3, 1) forwards;
}

/* back: the same motion, run the other way round */
.sc-leaf.is-turning-back {
  z-index: 1;
  animation: sc-turn-in 520ms cubic-bezier(.4, 0, .25, 1) reverse forwards;
}
.sc-leaf.is-turning-in-back {
  z-index: 2;
  animation: sc-turn-out 520ms cubic-bezier(.25, .8, .3, 1) reverse forwards;
}
.sc-leaf.is-turning-in-back .sc-leaf__shade {
  animation: sc-shade 520ms ease-out reverse forwards;
}

@keyframes sc-turn-out {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-108deg); }
}
@keyframes sc-turn-in {
  from { transform: translateX(4%) scale(.94); opacity: .35; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes sc-shade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A turn is a delight, not a requirement. Anyone who has asked their
 * device for less motion gets the next page with no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .sc-leaf.is-turning-out, .sc-leaf.is-turning-in,
  .sc-leaf.is-turning-back, .sc-leaf.is-turning-in-back,
  .sc-leaf__shade { animation: none !important; }
}

/* --- one bit at a time -------------------------------------------------- */

/* Everything on the page except the panel being read steps back. It is
 * still there, still readable if he looks — dimmed, not hidden, because
 * a panel that vanishes reads as a page that broke. */
.sc-page.is-guided .sc-panel,
.sc-page.is-guided .sc-figure {
  transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease;
  opacity: .28;
  filter: saturate(.55);
}
.sc-page.is-guided .sc-panel.is-spot,
.sc-page.is-guided .sc-figure.is-spot {
  opacity: 1;
  filter: none;
  transform: scale(1.02);
  z-index: 3;
}
/* a lit panel gets the same yellow the read-along uses, so "this is the
 * bit you are on" means one thing everywhere in the app */
.sc-page.is-guided .sc-panel.is-spot,
.sc-page.is-guided .sc-figure.is-spot > .sc-panel {
  box-shadow: var(--highlight-glow), 0 10px 24px rgba(0, 0, 0, .25);
}
.sc-page.is-guided .sc-figure.is-spot { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .sc-page.is-guided .sc-panel,
  .sc-page.is-guided .sc-figure { transition: none; transform: none; }
  .sc-page.is-guided .sc-panel.is-spot,
  .sc-page.is-guided .sc-figure.is-spot { transform: none; }
}

/* --- where you are ------------------------------------------------------ */

/* Dots, not "page 7 of 12". A child can see how much book is left without
 * being handed a number to feel behind on. */
.sc-dots {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  padding: 2px 14px 6px;
  margin: 0; list-style: none;
}
/* a class that sets display outranks the browser's [hidden] rule */
.sc-dots[hidden] { display: none; }
.sc-dots li {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ui-line);
  border: 2px solid transparent;
}
.sc-dots li.is-read { background: var(--ui-muted); }
.sc-dots li.is-here {
  background: var(--sc-yellow);
  border-color: var(--sc-ink);
  transform: scale(1.35);
}