/* Little Ollie Book Reader */

.book-reader {
  --book-dimness: 0.42;
  --book-turn-ms: 580ms;
  --book-cover-width: min(520px, 88vw);
  --book-cover-height: min(620px, 78vh);
  --book-page-width: min(260px, 44vw);
  --book-page-height: var(--book-cover-height);
  --book-page-max-h: var(--book-page-height);
  --book-spine-width: 12px;
  min-height: 100dvh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  position: relative;
  color: var(--lo-text);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 216, 77, 0.22), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(111, 211, 242, 0.24), transparent 36%),
    linear-gradient(180deg, #6ec0ea 0%, #8ecff0 38%, #f2c97a 100%);
  overflow: hidden;
}

.book-reader::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../../../webpageassets/loClubHome.png") center / cover no-repeat;
  opacity: calc(var(--book-dimness) * 0.55);
  pointer-events: none;
  z-index: 0;
}

.book-reader::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 250, 240, calc(var(--book-dimness) * 0.35));
  pointer-events: none;
  z-index: 0;
}

.book-reader > * {
  position: relative;
  z-index: 1;
}

.book-reader.is-fullscreen,
.book-reader.is-immersive {
  background: #16304f;
}

.book-reader.is-fullscreen::before,
.book-reader.is-fullscreen::after,
.book-reader.is-immersive::before,
.book-reader.is-immersive::after {
  opacity: 0.18;
}

.book-reader.is-immersive {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100dvh;
  height: 100svh;
}

body.book-reader-immersive-open {
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Site-style top menu — use home.css nav styles; only fix fixed placement + button defaults */
.book-reader .book-reader__menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
}

.book-reader .book-reader__menu button.home-nav__link {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  text-align: center;
}

/* Stage */
.book-stage {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 0;
  padding: calc(var(--lo-nav-height) + 0.75rem) 1rem 0.5rem;
}

.book-reader.is-book-open .book-stage {
  padding-top: calc(var(--lo-nav-height) + 0.35rem);
}

.book-stage__glow,
.book-stage__desk {
  position: absolute;
  inset: auto 0 12%;
  height: 28%;
  pointer-events: none;
}

.book-stage__glow {
  background: radial-gradient(ellipse at center, rgba(255, 216, 77, 0.28), transparent 68%);
}

.book-stage__desk {
  background: linear-gradient(180deg, transparent, rgba(23, 52, 95, 0.08));
}

.book-stage__book {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

.book-stage__shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10px;
  height: 24px;
  border-radius: 50%;
  background: rgba(13, 33, 66, 0.22);
  filter: blur(8px);
}

.book-stage__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--lo-font-display);
  font-weight: 700;
  color: var(--lo-deep-blue);
}

/* Closed cover */
.book-cover-state {
  width: var(--book-cover-width);
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.book-cover-state__shell {
  perspective: 1400px;
  width: 100%;
}

.book-cover-state__front {
  position: relative;
  width: var(--book-cover-width);
  height: var(--book-cover-height);
  padding: 0;
  border: 4px solid #17345f;
  border-radius: 12px 18px 18px 12px;
  background: #17345f;
  box-shadow:
    0 20px 42px rgba(17, 52, 89, 0.28),
    inset -10px 0 18px rgba(13, 33, 66, 0.12);
  cursor: pointer;
  transform-origin: left center;
  transition: transform var(--book-turn-ms) ease;
  overflow: hidden;
}

.book-cover-state__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px 14px 14px 8px;
}

.book-cover-state__start {
  width: min(100%, 22rem);
  gap: 0.55rem;
  animation: book-cover-start-pulse 2.2s ease-in-out infinite;
}

.book-cover-state__start-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  font-size: 1.05rem;
  line-height: 1;
  animation: book-cover-start-arrow 2.2s ease-in-out infinite;
}

.book-cover-state__start-text {
  max-width: 16rem;
}

@keyframes book-cover-start-pulse {
  0%, 100% {
    box-shadow: var(--lo-btn-primary-shadow);
  }
  50% {
    box-shadow:
      var(--lo-btn-primary-shadow),
      0 0 0 6px rgba(255, 216, 77, 0.35);
  }
}

@keyframes book-cover-start-arrow {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .book-cover-state__start,
  .book-cover-state__start-icon {
    animation: none;
  }
}

.book-cover-state.is-opening .book-cover-state__front {
  transform: rotateY(-28deg);
}

/* Spread */
.book-spread {
  width: 100%;
  display: flex;
  justify-content: center;
}

.book-spread__shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--book-page-width) var(--book-spine-width) var(--book-page-width);
  gap: 0;
  width: calc(var(--book-page-width) * 2 + var(--book-spine-width));
  margin-inline: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  perspective: 2200px;
  transform-style: preserve-3d;
}

.book-spread__shell::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -16px;
  height: 22px;
  border-radius: 50%;
  background: rgba(13, 33, 66, 0.28);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.book-spread.is-single .book-spread__shell {
  grid-template-columns: var(--book-page-width);
  width: var(--book-page-width);
}

.book-spread.is-first-right.is-first-spread .book-spread__shell {
  grid-template-columns: var(--book-page-width) var(--book-spine-width) var(--book-page-width);
}

.book-spread.is-first-right.is-first-spread .book-spread__page--left .book-page__frame {
  opacity: 0.72;
}
.book-spread.is-single .book-spread__spine,
.book-spread.is-single .book-spread__page--right {
  display: none;
}

.book-spread.is-last-spread.is-single .book-page__frame,
.book-spread.is-last-spread.is-single .book-page__under {
  border-radius: 12px 18px 18px 12px;
}

.book-spread.is-last-spread.is-single .book-page__frame::before {
  display: none;
}

.book-spread.is-last-spread.is-single .book-spread__shell::after {
  left: 14%;
  right: 14%;
}

.book-spread__spine {
  align-self: stretch;
  min-height: var(--book-page-height);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(13, 33, 66, 0.28), rgba(23, 52, 95, 0.42) 45%, rgba(13, 33, 66, 0.28));
  box-shadow:
    inset 0 0 10px rgba(13, 33, 66, 0.35),
    -2px 0 6px rgba(13, 33, 66, 0.12),
    2px 0 6px rgba(13, 33, 66, 0.12);
}

.book-spread__page {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.book-page__stack {
  position: relative;
  width: var(--book-page-width);
  height: var(--book-page-height);
}

.book-page__under {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border: 4px solid #17345f;
  border-radius: 10px;
  background: #fffaf0;
  opacity: 0.58;
  filter: brightness(0.7) saturate(0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.book-page__under.is-blank {
  background: linear-gradient(180deg, #fffaf0 0%, #f5ecd8 100%);
}

.book-page__under.is-blank::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(23, 52, 95, 0.03) 18px,
    rgba(23, 52, 95, 0.03) 19px
  );
  pointer-events: none;
}

.book-page__under-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #fffaf0;
  display: block;
}

.book-page__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin-inline: auto;
  border: 4px solid #17345f;
  border-radius: 10px;
  background: #fffaf0;
  overflow: hidden;
  box-shadow:
    0 16px 34px rgba(17, 52, 89, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.book-spread__page--left .book-page__frame::before,
.book-spread__page--right .book-page__frame::before {
  content: "";
  position: absolute;
  top: 0;
  width: 22%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.book-spread__page--left .book-page__frame::before {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(13, 33, 66, 0.14));
}

.book-spread__page--right .book-page__frame::before {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(13, 33, 66, 0.1));
}

.book-spread__page--left .book-page__under,
.book-spread__page--left .book-page__frame {
  border-radius: 10px 4px 4px 10px;
}

.book-spread__page--right .book-page__under,
.book-spread__page--right .book-page__frame {
  border-radius: 4px 10px 10px 4px;
}

.book-page__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #fffaf0;
}

.book-page.is-blank .book-page__frame {
  background: linear-gradient(180deg, #fffaf0 0%, #f5ecd8 100%);
}

.book-page.is-blank .book-page__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(23, 52, 95, 0.03) 18px,
    rgba(23, 52, 95, 0.03) 19px
  );
  pointer-events: none;
}
.book-page__error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.65rem;
  padding: 1rem;
  text-align: center;
  background: rgba(255, 250, 240, 0.94);
}

.book-spread__turn {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
}

.book-spread.is-turn-forward .book-spread__page--right {
  z-index: 3;
}

.book-spread.is-turn-back .book-spread__page--left {
  z-index: 3;
}

.book-spread.is-turn-forward .book-spread__page--right .book-page__frame {
  animation: book-flip-forward var(--book-turn-ms) cubic-bezier(0.45, 0.05, 0.25, 1);
  transform-origin: left center;
}

.book-spread.is-turn-back .book-spread__page--left .book-page__frame {
  animation: book-flip-back var(--book-turn-ms) cubic-bezier(0.45, 0.05, 0.25, 1);
  transform-origin: right center;
}

.book-spread.is-turn-forward .book-spread__page--left .book-page__frame {
  animation: book-page-settle-out var(--book-turn-ms) cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

.book-spread.is-turn-back .book-spread__page--right .book-page__frame {
  animation: book-page-settle-out var(--book-turn-ms) cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

.book-spread.is-turn-forward .book-page__under,
.book-spread.is-turn-back .book-page__under {
  animation: book-under-reveal var(--book-turn-ms) cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

.book-spread.is-reduced-motion.is-turn-forward .book-spread__page--right .book-page__frame,
.book-spread.is-reduced-motion.is-turn-back .book-spread__page--left .book-page__frame {
  animation: book-page-fade 220ms ease;
  transform-origin: center;
}

.book-spread.is-reduced-motion.is-turn-forward .book-spread__page--left .book-page__frame,
.book-spread.is-reduced-motion.is-turn-back .book-spread__page--right .book-page__frame {
  animation: book-page-fade 220ms ease forwards;
}

.book-spread.is-reduced-motion .book-page__under {
  animation: book-under-reveal 220ms ease forwards;
}

@keyframes book-under-reveal {
  0% {
    opacity: 0.58;
    filter: brightness(0.7) saturate(0.86);
  }
  45% {
    opacity: 0.78;
    filter: brightness(0.84) saturate(0.92);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}

@keyframes book-page-settle-out {
  0% {
    opacity: 1;
  }
  28% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
  }
}

@keyframes book-flip-forward {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 16px 34px rgba(17, 52, 89, 0.22);
  }
  18% {
    transform: rotateY(-24deg) translateZ(12px);
    box-shadow: -6px 18px 28px rgba(13, 33, 66, 0.28);
  }
  55% {
    transform: rotateY(-118deg) translateZ(28px);
    box-shadow: -14px 12px 32px rgba(13, 33, 66, 0.34);
  }
  100% {
    transform: rotateY(-180deg) translateZ(0);
    box-shadow: -8px 8px 20px rgba(13, 33, 66, 0.22);
  }
}

@keyframes book-flip-back {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 16px 34px rgba(17, 52, 89, 0.22);
  }
  18% {
    transform: rotateY(24deg) translateZ(12px);
    box-shadow: 6px 18px 28px rgba(13, 33, 66, 0.28);
  }
  55% {
    transform: rotateY(118deg) translateZ(28px);
    box-shadow: 14px 12px 32px rgba(13, 33, 66, 0.34);
  }
  100% {
    transform: rotateY(180deg) translateZ(0);
    box-shadow: 8px 8px 20px rgba(13, 33, 66, 0.22);
  }
}

@keyframes book-page-fade {
  0% { opacity: 1; }
  100% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .book-cover-state__front,
  .book-spread.is-turn-forward .book-spread__page--right .book-page__frame,
  .book-spread.is-turn-back .book-spread__page--left .book-page__frame {
    animation: none !important;
    transition: none !important;
  }

  .book-page__frame {
    will-change: auto;
  }
}

/* Controls */
.book-reader__controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem 0.5rem;
}

.book-reader__nav {
  min-width: 8.5rem;
}

.book-reader__nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Progress */
.book-reader__progress-wrap {
  padding: 0 1rem 1rem;
}

.book-reader__progress-label {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(22, 48, 79, 0.82);
  text-align: center;
}

.book-reader__progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(23, 52, 95, 0.12);
  overflow: hidden;
}

.book-reader__progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lo-blue), var(--lo-yellow));
  transition: width 0.35s ease;
}

.book-reader__sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* End screen */
.book-reader__end {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  text-align: center;
  background: rgba(255, 250, 240, 0.92);
  backdrop-filter: blur(8px);
}

.book-reader__end h2 {
  font-family: var(--lo-font-display);
  color: var(--lo-deep-blue);
  margin: 0;
}

.book-reader__end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

.book-reader__end-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,216,77,0.35), transparent 24%),
    radial-gradient(circle at 78% 24%, rgba(111,211,242,0.28), transparent 22%),
    radial-gradient(circle at 52% 70%, rgba(255,216,77,0.22), transparent 20%);
  animation: end-sparkle 4s ease-in-out infinite alternate;
}

@keyframes end-sparkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .book-reader__end-sparks { animation: none; opacity: 0.75; }
}

/* Thumbnails drawer */
.book-reader__thumbs {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 100%);
  height: 100dvh;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: -8px 0 30px rgba(17, 52, 89, 0.16);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: calc(var(--lo-nav-height) + 0.5rem) 0.85rem 1rem;
}

.book-reader__thumbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.book-reader__thumbs-head h2 {
  margin: 0;
  font-family: var(--lo-font-display);
  color: var(--lo-deep-blue);
}

.book-reader__thumbs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  overflow: auto;
}

.book-reader__thumb {
  padding: 0;
  border: 2px solid rgba(23, 52, 95, 0.12);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.book-reader__thumb.is-current {
  border-color: var(--lo-yellow);
  box-shadow: 0 0 0 2px rgba(255, 216, 77, 0.45);
}

.book-reader__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Settings */
.book-reader__settings {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 6;
  padding: 0.55rem 0.75rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(23,52,95,0.1);
  font-size: 0.82rem;
}

.book-reader__settings summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--lo-deep-blue);
}

.book-reader__settings label {
  display: block;
  margin-top: 0.45rem;
}

.book-reader.is-fullscreen .book-reader__settings {
  opacity: 0.75;
}

.book-reader__fatal {
  margin: auto;
  max-width: 28rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* Fullscreen / immersive layout */
.book-reader.is-fullscreen .book-stage,
.book-reader.is-immersive .book-stage {
  padding: 0.35rem 0.5rem 0.15rem;
}

.book-reader.is-fullscreen.is-book-open .book-stage,
.book-reader.is-immersive.is-book-open .book-stage {
  padding-top: 0.35rem;
}

.book-reader.is-fullscreen .book-reader__controls,
.book-reader.is-immersive .book-reader__controls {
  padding: 0.2rem 0.65rem 0.35rem;
}

.book-reader.is-fullscreen .book-reader__progress-wrap,
.book-reader.is-immersive .book-reader__progress-wrap {
  padding: 0 0.75rem 0.65rem;
}

.book-reader.is-fullscreen .book-reader__settings,
.book-reader.is-immersive .book-reader__settings {
  display: none;
}

/* Phone landscape reading */
.book-reader.is-phone-landscape .book-stage {
  padding-inline: 0.35rem;
}

.book-reader.is-fullscreen .book-reader__menu,
.book-reader.is-immersive .book-reader__menu {
  opacity: 0.96;
}

/* Portrait prompt on phones */
.book-reader__rotate-prompt {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(13, 33, 66, 0.72);
  backdrop-filter: blur(8px);
}

.book-reader__rotate-prompt[hidden] {
  display: none !important;
}

.book-reader__rotate-card {
  width: min(22rem, 100%);
  padding: 1.35rem 1.15rem;
  border-radius: 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid rgba(255, 216, 77, 0.65);
  box-shadow: 0 16px 36px rgba(17, 52, 89, 0.2);
}

.book-reader__rotate-icon {
  display: inline-block;
  font-size: 2.4rem;
  margin-bottom: 0.35rem;
  animation: book-rotate-hint 2.4s ease-in-out infinite;
}

.book-reader__rotate-card h2 {
  margin: 0 0 0.45rem;
  font-family: var(--lo-font-display);
  color: var(--lo-deep-blue);
  font-size: 1.15rem;
}

.book-reader__rotate-card p {
  margin: 0;
  color: rgba(22, 48, 79, 0.82);
  line-height: 1.45;
}

@keyframes book-rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-90deg); }
  65% { transform: rotate(-90deg); }
}

.book-reader.is-reading-blocked .book-stage,
.book-reader.is-reading-blocked .book-reader__controls,
.book-reader.is-reading-blocked .book-reader__progress-wrap,
.book-reader.is-reading-blocked .book-cover-state {
  pointer-events: none;
  filter: blur(2px) saturate(0.75);
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .book-reader__rotate-icon {
    animation: none;
  }
}

@media (max-width: 899px) {
  .book-reader__controls {
    order: 3;
  }

  .book-reader__nav {
    flex: 1 1 0;
  }

  .book-stage {
    padding-top: calc(var(--lo-nav-height) + 0.5rem);
  }
}

@media (min-width: 900px) {
  .book-reader__controls {
    position: absolute;
    inset: 50% 0 auto;
    transform: translateY(-50%);
    justify-content: space-between;
    padding-inline: 0.5rem;
    pointer-events: none;
  }

  .book-reader__nav {
    pointer-events: auto;
    box-shadow: var(--lo-shadow);
  }
}