/* The cast, one at a time (public/js/reel.js): the middle one in 3D, its neighbours faded at the edges, a strip of
   everyone below. --slot: the middle's width (4:5, the reel's full height); --d: how far its neighbours stand, in slot
   widths */
.reel { --slot: 72%; --d: 65%; position: relative; overflow: hidden; aspect-ratio: 10 / 9; border-radius: 22px; background: linear-gradient(180deg, #f3e3d8, #ead2c4); border: 1px solid var(--line); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.reel .slot, .reel .pic { position: absolute; top: 0; left: 50%; width: var(--slot); height: 100%; margin-left: calc(var(--slot) / -2); }
/* the 3D, on top, fading in once its character is drawn */
.reel .slot { z-index: 2; pointer-events: none; }
.reel .slot iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.1s; }
.reel.live .slot { pointer-events: auto; }
.reel.live .slot iframe { opacity: 1; transition: opacity 0.25s; }
/* the pictures: scaled (--fit) so each character stands as tall as it does in 3D, feet on the same floor */
.reel .pic { transform-origin: 50% 94.4%; transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.34s; cursor: pointer; }
.reel .pic img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.reel .pic.c { transform: translateY(-5.1%) scale(var(--fit)); opacity: 0.35; cursor: default; }
.reel .pic.l { transform: translateX(calc(-1 * var(--d))) translateY(-5.1%) scale(calc(var(--fit) * 0.72)); opacity: 0.45; }
.reel .pic.r { transform: translateX(var(--d)) translateY(-5.1%) scale(calc(var(--fit) * 0.72)); opacity: 0.45; }
.reel .pic.ll { transform: translateX(calc(-2 * var(--d))) translateY(-5.1%) scale(calc(var(--fit) * 0.6)); opacity: 0; pointer-events: none; }
.reel .pic.rr { transform: translateX(calc(2 * var(--d))) translateY(-5.1%) scale(calc(var(--fit) * 0.6)); opacity: 0; pointer-events: none; }
@media (hover: hover) { .reel .pic.l:hover, .reel .pic.r:hover { opacity: 0.65; } }
.reel.live .pic.c { opacity: 0; }
/* no 3D at all (no WebGL): the picture itself */
.reel.flat .pic.c { opacity: 1; }
/* still loading after a moment: the faded picture breathes until the 3D arrives */
.reel.slow:not(.live):not(.flat) .pic.c { animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.16; } }
.reel img:not([src]), .strip img:not([src]) { visibility: hidden; }
.reel .flip { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 24px; line-height: 1; padding: 0 0 3px; cursor: pointer; box-shadow: var(--soft); }
.reel .flip.prev { left: 14px; }
.reel .flip.next { right: 14px; }
.reel.one .flip { display: none; }
/* everyone, small: a tap jumps straight to them; the last one makes a new one */
.strip { position: relative; display: flex; gap: 10px; justify-content: safe center; overflow-x: auto; margin-top: 16px; padding: 4px 4px 6px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip button, .strip a.add { flex: none; width: 72px; display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; font: 500 13px/1.1 var(--sans); color: var(--muted); }
.strip .face { width: 64px; height: 80px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f3e3d8, #ead2c4); border: 1px solid var(--line); transition: box-shadow 0.15s, border-color 0.15s; }
.strip .face img { width: 100%; height: 100%; object-fit: cover; }
.strip .who { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip button:hover .face { border-color: var(--line-2); }
.strip button.on .face { border-color: var(--maroon); box-shadow: 0 0 0 2px var(--maroon); }
.strip button.on .who { color: var(--ink); font-weight: 600; }
.strip .add .face { display: grid; place-items: center; background: var(--card); border: 1.5px dashed var(--line-2); color: var(--maroon); font: 300 34px/1 var(--sans); }
.strip .add:hover .face { border-color: var(--maroon); }
.reel.one + .strip { display: none; }
@media (max-width: 560px) {
  .reel { --slot: 91.4%; --d: 50%; aspect-ratio: 7 / 8; }
  .reel .flip { width: 38px; height: 38px; font-size: 21px; }
  .reel .flip.prev { left: 8px; }
  .reel .flip.next { right: 8px; }
  .strip { gap: 6px; justify-content: flex-start; }
  .strip button, .strip a.add { width: 60px; font-size: 12px; }
  .strip .face { width: 56px; height: 70px; }
  .strip .who { max-width: 60px; }
}