:root {
  --paper: #dedbcf;
  --ink: #494640;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #24221f;
  font-family: "Segoe Print", "Bradley Hand", cursive;
}

.desk {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(
    circle at 50% 30%,
    #47423b,
    #292723 53%,
    #181715
  );
}

.book {
  position: relative;
  width: min(900px, 95vw);
  height: min(92svh, 780px);
  min-height: 570px;
}

.paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 18px 55px #0009,
    inset 26px 0 28px #4f3b271a;
  border-radius: 2px 8px 6px 2px;
  transform: rotate(-0.18deg);
}

.rings {
  position: absolute;
  z-index: 20;
  left: -21px;
  top: 18px;
  width: 46px;
  height: calc(100% - 36px);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 29px,
    #9a9a94 30px 34px,
    #474641 35px 38px,
    transparent 39px 58px
  );
  filter: drop-shadow(2px 2px 1px #111);
}

.holes {
  position: absolute;
  z-index: 19;
  left: 7px;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 28px,
    #292722 0 6px,
    #746c5e 6.5px 8px,
    transparent 8.5px
  );
  background-size: 24px 58px;
}

.page {
  display: none;
  position: absolute;
  inset: 0;
}

.page.active {
  display: block;
}

.blank {
  background: transparent;
}

.arrow {
  position: absolute;
  z-index: 30;
  bottom: 9px;
  width: 74px;
  height: 54px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 42px/1 cursive;
  cursor: pointer;
}

.previous {
  left: 35px;
}

.next {
  right: 15px;
}

/* Face page */

.face-stage {
  position: relative;
  width: min(78vh, 82%);
  height: 100%;
  margin: auto;
  user-select: none;
  touch-action: none;
}

/*
  Stack order:
  eye images = 4
  transparent face = 5
  tongue = 6
*/

.face-back,
.face-front {
  position: absolute;
  width: 80%;
  height: auto;
  left: 10%;
  top: 0;
  pointer-events: none;
}

.face-back {
  z-index: 3;
}

.face-front {
  z-index: 5;
}

.eye {
  position: absolute;
  z-index: 4;
  width: 11.5%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
  transform: translateY(12px) rotate(var(--roll, 0deg));
  transform-origin: center;
}

.left-eye {
  left: 33.1%;
  top: 23.3%;
}

.right-eye {
  right: 33.1%;
  top: 23.3%;
}

.tongue-window {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;

  -webkit-mask-image:
    radial-gradient(
      ellipse 10.5% 17% at 50% 65%,
      #000 97%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0 79%,
      #000 79%
    );
  -webkit-mask-composite: source-over;

  mask-image:
    radial-gradient(
      ellipse 10.5% 17% at 50% 65%,
      #000 97%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0 79%,
      #000 79%
    );
  mask-composite: add;
}

.tongue {
  position: absolute;
  display: block;
  left: 39.65%;
  top: 52%;
  width: 20.7%;
  height: auto;
  transform: translateY(calc(-88% + var(--pull, 0) * 80%));
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.tongue:active {
  cursor: grabbing;
}

.popped .left-eye {
  animation: fall-left 1.25s cubic-bezier(0.2, 0.65, 0.35, 1) forwards;
}

.popped .right-eye {
  animation: fall-right 1.35s cubic-bezier(0.2, 0.65, 0.35, 1) forwards;
}

@keyframes fall-left {
  to {
    transform: translate(-15px, 930px) rotate(310deg);
  }
}

@keyframes fall-right {
  to {
    transform: translate(17px, 930px) rotate(-350deg);
  }
}

/* Bowl page */

#bowl {
  position: absolute;
  inset: 18px 30px 36px 38px;
  width: calc(100% - 68px);
  height: calc(100% - 54px);
  touch-action: none;
  cursor: grab;
}

#bowl:active {
  cursor: grabbing;
}

@media (max-width: 600px) {
  .desk {
    padding: 7px;
  }

  .book {
    width: 98vw;
    height: 96svh;
    min-height: 520px;
  }

  .rings {
    left: -12px;
  }

  .holes {
    left: 3px;
  }

  .face-stage {
    width: 94%;
  }

  .head {
    width: 80%;
    left: 10%;
  }

  .previous {
    left: 20px;
  }

  .next {
    right: 5px;
  }

  #bowl {
    inset: 12px 8px 45px 18px;
    width: calc(100% - 26px);
    height: calc(100% - 57px);
  }
}
.cereal-page {
  overflow: hidden;
}

.cereal-bar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}