*{box-sizing:border-box}
:root{
  --bg:#eef9fd;
  --speed:1100ms;
  --ease:cubic-bezier(.22,.78,.16,1);
}
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:2200px;
}
.scene{
  width:min(94vw,calc(82dvh * 2048 / 1447),1200px);
  aspect-ratio:2048 / 1447;
  position:relative;
  transform-style:preserve-3d;
  transform:translateX(-25%);
  transition:transform var(--speed) var(--ease),filter 350ms ease;
  cursor:pointer;
  user-select:none;
  outline:none;
}
.scene.is-open{transform:translateX(0)}
.book{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.page,.cover{
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
}
.right-page{
  background:#fff url("assets/inside-right.png") center/100% 100% no-repeat;
  box-shadow:0 24px 70px rgba(0,0,0,.16);
  z-index:1;
}
.cover{
  transform-origin:left center;
  transform-style:preserve-3d;
  z-index:3;
  transition:transform var(--speed) var(--ease);
  will-change:transform;
}
.scene.is-open .cover{transform:rotateY(-180deg)}
.face{
  position:absolute;
  inset:0;
  background-color:#fff;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.16);
}
.front{background-image:url("assets/front.png")}
.inside-left{
  background-image:url("assets/inside-left.png");
  transform:rotateY(180deg);
}
.right-page::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);
}
.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:not(.is-open){transform:translateX(-25%) scale(1.45)}
  .scene.is-open{transform:translateX(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .scene,.cover{transition-duration:1ms}
}