/* Read-Along Storybooks: shared look for the bookshelf and the reader (builds on ../styles.css + ../games/games.css) */
:root { color-scheme: only light; }

/* illustrated stand-in picture for pages without art */
.fb { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 55%), linear-gradient(160deg, var(--c1), var(--c2)); }
.fb .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.fb .hills .h1 { fill: rgba(255,255,255,.45); }
.fb .hills .h2 { fill: rgba(255,255,255,.75); }
.fb.dark .hills .h1 { fill: rgba(150,120,230,.35); }
.fb.dark .hills .h2 { fill: rgba(70,50,150,.7); }
.fb .twinkle { position: absolute; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #fff6c2; box-shadow: 0 0 2cqw #fff3a0;
  animation: twinkle 2.4s ease-in-out infinite; }
.fb .motif { position: absolute; line-height: 1; filter: drop-shadow(0 .6cqw .8cqw rgba(61,26,110,.18)); animation: drift 5s ease-in-out infinite; }
.fb .prop { position: absolute; right: 5%; bottom: 6%; font-size: 21cqw; line-height: 1; transform: rotate(-8deg);
  filter: drop-shadow(0 1.2cqw 1.4cqw rgba(61,26,110,.25)); }
.fb .cast { position: absolute; inset: 14% 0 12%; display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.fb .who { position: relative; margin: 0; width: 46cqw; animation: bob 3.2s ease-in-out infinite; }
.fb .cast.c2 .who { width: 37cqw; }
.fb .cast.c2 .who:nth-child(1) { transform: rotate(-4deg); margin-top: -8cqw; }
.fb .cast.c2 .who:nth-child(2) { margin-top: 10cqw; }
.fb .who img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2.4cqw solid #fff; background: #d6c7c0;
  box-shadow: 0 0 0 1.2cqw rgba(255,255,255,.45), 0 3cqw 5cqw rgba(61,26,110,.28); }
.fb .who figcaption { position: absolute; left: 50%; bottom: -3cqw; transform: translateX(-50%); white-space: nowrap;
  background: var(--purple); color: #fff; font-weight: 700; font-size: 4.2cqw; padding: .4cqw 3.2cqw; border-radius: 99px; border: .8cqw solid #fff; }
.fb .who.harper figcaption { background: var(--pink); }
.fb .who.sunny figcaption { background: #ff9f1c; }
.fb .who.kaevin figcaption { background: var(--blue); }
.fb-title { position: absolute; left: 6%; right: 6%; top: 5%; text-align: center; font-weight: 700; font-size: 8.5cqw; line-height: 1.05;
  color: #fff; -webkit-text-stroke: .7cqw var(--purple-dark); paint-order: stroke fill; text-shadow: 0 1.2cqw 0 var(--purple-dark); }
.fb.has-title .cast { inset: 30% 0 6%; }
.fb.has-title .cast.c1 .who { width: 40cqw; }
.fb.has-title .motif { display: none; }
.fb.has-title .prop { left: 4%; right: auto; bottom: 3%; font-size: 15cqw; z-index: 1; }
.fb.small .motif, .fb.small .who, .fb.small .twinkle { animation: none; }

@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -2.2cqw; } }
@keyframes drift { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -2.5cqw; rotate: 8deg; } }
@keyframes twinkle { 0%,100% { opacity: .35; scale: .7; } 50% { opacity: 1; scale: 1.2; } }
@media (prefers-reduced-motion: reduce) { .fb * { animation: none !important; } }