/* Use-case playbook page deck.
 *
 * The deck is a fixed-ratio box; every page is absolutely positioned
 * inside it and placed by data-pos: 0 is in front, 1 and 2 fan up and
 * to the inline-end behind it, "back" is the same spot as 2 but hidden,
 * "out" is where a page goes when it is flicked away (down and to the
 * inline-start, faded). module.hubl.js only rewrites data-pos; every
 * movement is a CSS transition. Under prefers-reduced-motion the pages
 * swap in place. RTL mirrors the fan, the arrows and the drag.
 *
 * Section layout (video beside the deck, copy, button) lives in
 * styles/hubdb-use-case.css. */

.uc-pb {
  --uc-pb-w: 248px;
  --uc-pb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* Arrows either side of the deck; the deck column keeps room above
   and to the inline-end for the fanned pages. */
.uc-pb-stage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  column-gap: 6px;
  width: 100%;
  padding: 22px 0 6px;
}

.uc-pb-deck {
  position: relative;
  width: var(--uc-pb-w);
  aspect-ratio: 1159 / 1638;
  max-width: 100%;
  margin: 0 auto;
  /* Nudge toward the inline-start so the fan reads as centred. */
  translate: -7% 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 12px;
  outline: none;
}
.uc-pb-deck:focus-visible {
  box-shadow: 0 0 0 3px rgba(14, 110, 166, .35);
}
[dir="rtl"] .uc-pb-deck { translate: 7% 0; }
@supports not (aspect-ratio: 1) {
  .uc-pb-deck::before { content: ""; display: block; padding-top: 141.33%; }
}

.uc-pb-page {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, .05),
    0 20px 44px -22px rgba(15, 23, 42, .55);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  transition:
    transform .55s var(--uc-pb-ease),
    opacity .4s ease,
    filter .4s ease;
}
.uc-pb-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Front page follows the finger while dragging. */
.uc-pb-page.is-dragging { transition: none; }

/* Positions — LTR fan goes up and to the right. */
.uc-pb-page[data-pos="0"] {
  transform: translate(0, 0) rotate(0) scale(1);
  z-index: 5;
  opacity: 1;
  filter: none;
}
.uc-pb-page[data-pos="1"] {
  transform: translate(9%, -5%) rotate(4deg) scale(.965);
  z-index: 4;
  opacity: 1;
  filter: brightness(.96);
}
.uc-pb-page[data-pos="2"] {
  transform: translate(18%, -10%) rotate(8deg) scale(.93);
  z-index: 3;
  opacity: 1;
  filter: brightness(.92);
}
.uc-pb-page[data-pos="back"] {
  transform: translate(18%, -10%) rotate(8deg) scale(.93);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.uc-pb-page[data-pos="out"] {
  transform: translate(-22%, 8%) rotate(-9deg) scale(.96);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

/* RTL — mirror the fan so the pages fan toward the visual left. */
[dir="rtl"] .uc-pb-page[data-pos="1"]    { transform: translate(-9%, -5%) rotate(-4deg) scale(.965); }
[dir="rtl"] .uc-pb-page[data-pos="2"],
[dir="rtl"] .uc-pb-page[data-pos="back"] { transform: translate(-18%, -10%) rotate(-8deg) scale(.93); }
[dir="rtl"] .uc-pb-page[data-pos="out"]  { transform: translate(22%, 8%) rotate(9deg) scale(.96); }

/* Entrance: pages start stacked flat, then fan out once the deck
   scrolls into view. JS adds .is-collapsed before observing and removes
   it on intersection; reduced-motion never gets the class. */
.uc-pb.is-collapsed .uc-pb-page[data-pos="1"],
.uc-pb.is-collapsed .uc-pb-page[data-pos="2"],
.uc-pb.is-collapsed .uc-pb-page[data-pos="back"] {
  transform: translate(0, 0) rotate(0) scale(1);
}

/* Page counter chip, bottom inline-end of the sheet. */
.uc-pb-num {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: #fff;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(4px);
  pointer-events: none;
  direction: ltr;
}

/* Arrows — same geometry as the landing-page carousel. Hidden until
   the JS has bound them; a static fan needs no controls. */
.uc-pb-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink-200);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .5);
  transition: color .15s, background .15s, border-color .15s;
}
.uc-pb-nav:hover { color: var(--primary-dk); background: var(--ink-050); border-color: var(--ink-300); }
.uc-pb-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[dir="rtl"] .uc-pb-nav svg { transform: scaleX(-1); }
.uc-pb:not(.is-ready) .uc-pb-nav,
.uc-pb:not(.is-ready) .uc-pb-dots { visibility: hidden; }

/* Caption strip — all captions share one grid cell. */
.uc-pb-captions {
  display: grid;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}
.uc-pb-caption {
  grid-area: 1 / 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-500);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s var(--uc-pb-ease);
}
.uc-pb-caption.is-active { opacity: 1; transform: none; }

/* Dash dots. */
.uc-pb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.uc-pb-dot {
  position: relative;
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: var(--ink-300);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .2s;
}
.uc-pb-dot.is-active { background: var(--primary); width: 34px; }
.uc-pb-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Expanded transparent tap target (WCAG 2.5.5). */
.uc-pb-dot::before {
  content: "";
  position: absolute;
  inset: -20px -2px;
}

@media (max-width: 560px) {
  .uc-pb { --uc-pb-w: 196px; }
  .uc-pb-stage { grid-template-columns: 40px minmax(0, 1fr) 40px; padding-top: 18px; }
  .uc-pb-nav { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-pb-page,
  .uc-pb-caption,
  .uc-pb-dot { transition: none; }
}