*{box-sizing:border-box}

:root{
  --bg:#eef9fd;
  --speed:1100ms;
  --ease:cubic-bezier(.22,.78,.16,1);
  --spread-ratio:2048 / 1447;
}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:var(--bg);
}

body{
  min-height:100dvh;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
}

.viewport{
  min-height:100dvh;
  display:grid;
  place-items:center;
  position:relative;
  padding:4vh 2.5vw 9vh;
  perspective:2400px;
}

.scene{
  width:min(94vw,calc(82dvh * 2048 / 1447),1220px);
  aspect-ratio:var(--spread-ratio);
  position:relative;
  transform-style:preserve-3d;
  cursor:pointer;
  user-select:none;
  outline:none;
  transition:transform var(--speed) var(--ease);
}

.scene.state-closed{
  transform:translateX(-25%);
}

.scene.state-open,
.scene.state-back{
  transform:translateX(0);
}

.book{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:transform var(--speed) var(--ease);
}

.state-closed .book,
.state-open .book{
  transform:rotateY(0deg);
}

.state-back .book{
  transform:rotateY(180deg);
}

.leaf{
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transform-style:preserve-3d;
}

.fixed-leaf{
  z-index:1;
}

.cover-leaf{
  z-index:3;
  transform-origin:left center;
  transition:transform var(--speed) var(--ease);
  will-change:transform;
}

.state-closed .cover-leaf{
  transform:rotateY(0deg);
}

.state-open .cover-leaf,
.state-back .cover-leaf{
  transform:rotateY(-180deg);
}

.face{
  position:absolute;
  inset:0;
  background:#fff;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 22px 65px rgba(0,0,0,.16);
  overflow:hidden;
}

.face-back{
  transform:rotateY(180deg);
}

.face img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}

.fixed-leaf .face-front::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1px;
  background:rgba(0,0,0,.08);
  box-shadow:-8px 0 20px rgba(0,0,0,.06);
  z-index:2;
  pointer-events:none;
}

.hint{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  font-size:clamp(13px,1.3vw,16px);
  color:rgba(0,0,0,.55);
  white-space:nowrap;
  pointer-events:none;
}

@media(max-width:680px){
  .scene{
    width:min(96vw,calc(72dvh * 2048 / 1447));
  }
  .scene.state-closed{
    transform:translateX(-25%) scale(1.44);
  }
  .scene.state-open,
  .scene.state-back{
    transform:translateX(0) scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  .scene,.book,.cover-leaf{transition-duration:1ms}
}