/* V8: a quiet image-led transition and physical depth without changing book faces. */

/* Optional native markup: two decorative images, the gold universe on the left. */
.reader-moment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  isolation: isolate;
  height: clamp(155px, 19vw, 240px);
  margin: 0 0 42px;
  overflow: hidden;
  border: 1px solid #cab99d66;
  border-radius: 26px;
  background: linear-gradient(90deg, #eddbba, #e8ddef);
  box-shadow: 0 18px 40px #4229430c;
}
.reader-moment::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 7px #fff8;
  background: linear-gradient(90deg, #bb8d3820, transparent 42%, #67428010);
}
.reader-moment img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 35%;
}
.reader-moment img:only-child { grid-column: 1 / -1; object-position:50% 53%; }
.reader-moment img:first-child:not(:only-child) { object-position: 50% 39%; }

/* The reading area sits on a larger, matte surface. Excerpts keep native rendering. */
.book-experience .exp-reader-section {
  padding-top: 55px;
  padding-bottom: 96px;
  background: linear-gradient(180deg, #fcf9f200, #f3eadb66 20%, #f6f0e8 80%, #fcf9f200);
}
.book-experience .exp-reader {
  position: relative;
  border: 1px solid #d8c7b8;
  border-radius: 26px;
  background: linear-gradient(105deg, #efe4ce 0%, #fbf8f1 33%, #f9f5f1 77%, #eee5f1 100%);
  box-shadow: 0 2px 0 #fff inset, 0 7px 0 -4px #e2d5c5, 0 32px 70px -24px #4c354238;
}
.book-experience .reader-thumbnails { padding-block: 3px; }
.book-experience .reader-thumbnail {
  border-radius: 10px;
  border-color: #d8c8b9;
  background: #fffcf6;
  box-shadow: 0 4px 10px #48314408;
}
.book-experience .reader-thumbnail[aria-pressed="true"] {
  border-color: #725482;
  background: #fffaf3;
  box-shadow: 0 0 0 2px #72548222, 0 8px 18px #47334c12;
}
.book-experience .reader-navigation {
  border-radius: 13px;
  border-color: #dfd0c4;
  background: #fcf9f2fa;
  box-shadow: 0 6px 16px #3f2a4610;
}
.book-experience .reader-navigation button { border-radius: 8px; }
.book-experience .reader-zoom-image {
  border-color: #cbbba7;
  box-shadow: 2px 2px 0 #fbf8ef, 3px 3px 0 #d8ccbb,
    5px 5px 0 #fcfaf3, 6px 6px 0 #ded1be,
    9px 9px 0 #f7f0e3, 10px 10px 0 #d5c7b4,
    0 27px 38px -17px #3e2a4752;
}
.book-experience .reader-page figcaption { padding-top: 29px; }
.book-experience .reader-page figcaption strong { color: #432c4e; }

/* A stronger tactile response belongs to images, not reading text or the HD dialog. */
.book-card:focus-within,
.exp-proof-card:focus-within,
.resource-card:focus-within {
  box-shadow: 0 20px 45px -18px #3d254535;
}
.universe-panel:focus-within { outline: 2px solid #e0c49b; outline-offset: 5px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion-paused="true"]) [data-depth-v8] .book-visual {
    transform: perspective(1100px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0)
      rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
  }
  html:not([data-motion-paused="true"]) .universe-hero-visual[data-depth-v8] {
    transform: perspective(1400px) rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
    transform-origin: 50% 55%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  html:not([data-motion-paused="true"]) .universe-panel[data-depth-v8] > img {
    transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(1.035);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  html:not([data-motion-paused="true"]) .reader-moment[data-depth-v8] img {
    transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(1.035);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  html:not([data-motion-paused="true"]) .book-card:focus-within .book-visual {
    transform: perspective(1100px) translateY(-4px) rotateY(-2deg);
  }
}

@media (max-width: 820px) {
  .reader-moment { height: 170px; margin-bottom: 31px; border-radius: 20px; }
  .book-experience .exp-reader { border-radius: 21px; }
}
@media (max-width: 680px) {
  .reader-moment { height: 145px; margin-bottom: 27px; border-radius: 16px; }
  .reader-moment::after { box-shadow: inset 0 0 0 4px #fff7; }
  .book-experience .exp-reader-section { padding-top: 25px; padding-bottom: 64px; }
  .book-experience .exp-reader { border-radius: 18px; }
  .book-experience .reader-thumbnails { padding-block: 4px 10px; }
  .book-experience .reader-navigation { border-radius: 10px; }
  .book-experience .reader-zoom-image {
    box-shadow: 2px 2px 0 #fbf8ef, 3px 3px 0 #d8ccbb,
      5px 5px 0 #f7f0e3, 6px 6px 0 #d5c7b4,
      0 18px 28px -15px #3e2a4744;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-depth-v8] .book-visual,
  .universe-hero-visual[data-depth-v8],
  .reader-moment[data-depth-v8] img { transform: none !important; }
  .universe-panel[data-depth-v8] > img { transform: none !important; }
}
html[data-motion-paused="true"] [data-depth-v8] .book-visual,
html[data-motion-paused="true"] .universe-hero-visual[data-depth-v8],
html[data-motion-paused="true"] .reader-moment[data-depth-v8] img,
html[data-motion-paused="true"] .universe-panel[data-depth-v8] > img { transform: none !important; }