/* CSS Custom Properties */
:root {
  /* Colors */
  --color-background: #232425;
  --color-white: #fff;
  --color-bg: #c1e6f9;
  --color-border: rgba(0, 0, 0, 0.533);
  --color-gradient-end: #ddd;
  --color-bg-gradient-end: #a8dcf6;

  /* Dimensions */
  --book-max-width: 40vw;
  --sheet-z-thickness: 5px;
  --sheet-padding: 2rem;

  /* Transitions */
  --transition-duration: 1s;

  /* Transforms */
  --book-rotation: 3deg;
  --book-perspective: 1000px;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base styles */
body {
  display: flex;
  height: 100dvh;
  perspective: var(--book-perspective);
  font: 16px/1.4;
  font-family: "Century Gothic";
  overflow: hidden;
  background-color: var(--color-background);
}

/* Book container */
.book {
  display: flex;
  margin: auto;
  max-width: var(--book-max-width);
  pointer-events: none;
  /* Let pointer events go through sheets of lower Z than book */
  transform-style: preserve-3d;
  transition: translate var(--transition-duration);
  translate: calc(min(var(--c), 1) * 50%) 0%;
  rotate: 1 0 0 var(--book-rotation);
  aspect-ratio: 1 / 1.33;
}

/* Sheet styles */
.sheet {
  --z: var(--sheet-z-thickness);

  position: relative;
  flex: none;
  display: flex;
  width: 100%;
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  border: 1px solid var(--color-border);
  transform-origin: left center;

  /* Complex transitions for page turning effect */
  transition:
    transform var(--transition-duration),
    rotate var(--transition-duration) ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);

  /* 3D positioning */
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ(calc((var(--c) - var(--i) - 0.5) * var(--z)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}

/* Page sides */
.front,
.back {
  flex: none;
  width: 100%;
  padding: var(--sheet-padding);
  backface-visibility: hidden;
  background-color: var(--color-bg);
  translate: 0px;
  /* Fix backface visibility in Firefox */
}

.back {
  background-image: linear-gradient(to right,
      var(--color-bg) 80%,
      var(--color-bg-gradient-end) 100%);
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}

/* Images within sheets */
.sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media Queries */
@media screen and (max-width: 1024px) {
  :root {
    --book-max-width: 60vw;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --book-max-width: 80vw;
    --sheet-padding: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --book-max-width: 90vw;
    --sheet-padding: 1rem;
  }

  body {
    font-size: 14px;
  }
}

/* Vendor prefixes for better browser compatibility */
.book,
.sheet {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Print styles */
@media print {
  body {
    background: none;
  }

  .book {
    max-width: 100%;
    transform: none !important;
  }

  .sheet {
    page-break-after: always;
  }
}