/* PhotoBooks hero bento: 9s looping tour (pick, auto-layout, make it yours, export).
   Sized entirely in container units (cqw), so it scales with whatever box it sits in.
   Timeline lives in pb-bento.js; the markup below is the idle state (t = 0). */
.pbb {
  --pbb-orange: var(--orange, #e8601e);
  --pbb-red: var(--red-bright, #e8192e);
  --pbb-white: var(--white, #eeeef0);
  --pbb-silver: var(--silver, #b8bcc8);
  --pbb-dim: #6a6e7a;
  --pbb-green: #2fbf71;
  --pbb-paper: #f4f1ea;
  --pbb-line: rgba(255, 255, 255, .09);
  position: relative; width: 100%; min-width: 0; max-width: 640px; margin: 0 auto; aspect-ratio: 1;
  container-type: size; container-name: pbb;
  display: grid; grid-template: repeat(6, 1fr) / repeat(6, 1fr); gap: 1.6cqw; padding: 1.6cqw;
  background: #08080a; border: 1px solid var(--pbb-line); border-radius: 3cqw;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.pbb *, .pbb *::before, .pbb *::after { box-sizing: border-box; }
.pbb-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2cqw;
  background: #121216; border: .2cqw solid var(--pbb-line); border-radius: 2cqw;
}
.pbb-hero { grid-area: 1 / 1 / 5 / 5; padding: 0; background:
  radial-gradient(55% 45% at 85% 95%, rgba(204, 16, 40, .30), transparent 70%),
  radial-gradient(45% 35% at 8% 0%, rgba(232, 96, 30, .20), transparent 70%),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3cqw),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3cqw), #121216; }
.pbb-a { grid-area: 1 / 5 / 3 / 7; }
.pbb-b { grid-area: 3 / 5 / 5 / 7; }
.pbb-c { grid-area: 5 / 1 / 7 / 3; }
.pbb-d { grid-area: 5 / 3 / 7 / 5; }
.pbb-e { grid-area: 5 / 5 / 7 / 7; }
.pbb-hero::before, .pbb-hero::after { content: ""; position: absolute; width: 3.4cqw; height: 3.4cqw; z-index: 5; pointer-events: none; border: 0 solid var(--pbb-orange); }
.pbb-hero::before { left: 1.6cqw; bottom: 1.6cqw; border-width: 0 0 .3cqw .3cqw; }
.pbb-hero::after { right: 1.6cqw; top: 1.6cqw; border-width: .3cqw .3cqw 0 0; }

/* labels, captions */
.pbb-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 1cqw; max-width: calc(100% - 4cqw); font-size: max(9px, 1.55cqw); letter-spacing: .14em; text-transform: uppercase; color: var(--pbb-silver); line-height: 1.25; }
.pbb-label b { font-weight: 400; color: var(--pbb-orange); }
.pbb-cap { position: relative; z-index: 2; margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: max(11px, 2.7cqw); letter-spacing: -.01em; line-height: 1.05; color: var(--pbb-white); overflow-wrap: anywhere; hyphens: auto; }
.pbb-spacer { flex: 1; min-height: 0; }
.pbb-check { position: absolute; z-index: 3; right: 2cqw; top: 1.6cqw; width: 3cqw; height: 3cqw; border-radius: 50%; display: grid; place-items: center; background: var(--pbb-green); color: #06130b; font: 700 1.8cqw/1 system-ui, sans-serif; opacity: 0; }

/* hero art: photo pile that becomes a book */
.pbb-art { position: absolute; inset: 0; }
.pbb-ph { position: absolute; left: 50%; top: 50%; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; background-size: cover; background-position: center;
  border: .8cqw solid var(--pbb-paper); border-bottom-width: 2.8cqw; border-radius: .3cqw; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .55);
  transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) rotate(calc(var(--r) * 1deg)); }
.pbb-book { position: absolute; left: 50%; top: 52%; width: 56cqw; height: 35cqw; margin: -17.5cqw 0 0 -28cqw; perspective: 140cqw; opacity: 0; transform: scale(.7) translateY(3cqw); filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .6)); }
.pbb-pg { position: absolute; top: 0; width: 50%; height: 100%; background: var(--pbb-paper); padding: 1.4cqw; display: grid; gap: .9cqw; }
.pbb-pg.l { left: 0; border-radius: .6cqw 0 0 .6cqw; box-shadow: inset -1.2cqw 0 1.6cqw -1cqw rgba(0, 0, 0, .35); }
.pbb-pg.r { left: 50%; border-radius: 0 .6cqw .6cqw 0; box-shadow: inset 1.2cqw 0 1.6cqw -1cqw rgba(0, 0, 0, .35); }
.pbb-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; }
.pbb-leaf .pbb-pg { left: 0; width: 100%; backface-visibility: hidden; }
.pbb-leaf .pbb-pg.back { transform: rotateY(180deg); border-radius: .6cqw 0 0 .6cqw; box-shadow: inset -1.2cqw 0 1.6cqw -1cqw rgba(0, 0, 0, .35); }
.pbb-cell { background-size: cover; background-position: center; }
.pbb-g1 { grid-template: 1fr 1fr / 1.4fr 1fr; } .pbb-g1 .pbb-cell:first-child { grid-row: 1 / 3; }
.pbb-g2 { grid-template: 1.3fr 1fr / 1fr 1fr; } .pbb-g2 .pbb-cell:first-child { grid-column: 1 / 3; }
.pbb-g3 { grid-template: 1fr 1fr / 1fr 1fr; }
.pbb-g4 { grid-template: 1fr 1fr / 1fr 1.3fr; } .pbb-g4 .pbb-cell:last-child { grid-column: 1 / 3; }

/* real app footage tiles */
.pbb-media-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 10, .88) 0, rgba(8, 8, 10, 0) 26%, rgba(8, 8, 10, 0) 52%, rgba(8, 8, 10, .94) 100%); }
.pbb-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1d1d20; filter: brightness(.5) saturate(.7); }
.pbb-media video, .pbb-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pbb-chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .8cqw; margin: 0 0 1.2cqw; padding: 0; list-style: none; }
.pbb-chip { font-size: max(8.5px, 1.4cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--pbb-white); background: rgba(8, 8, 10, .72); border: .2cqw solid rgba(255, 255, 255, .28); border-radius: 5cqw; padding: .5cqw 1.1cqw; opacity: 0; white-space: nowrap; backdrop-filter: blur(.6cqw); }

/* devices */
.pbb-devs { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 2cqw; overflow: hidden; }
.pbb-dev { display: flex; flex-direction: column; align-items: center; gap: 1cqw; font-size: max(8px, 1.4cqw); letter-spacing: .12em; color: var(--pbb-dim); opacity: .3; }
.pbb-dev svg { display: block; width: auto; height: 6.4cqw; overflow: visible; }

@container pbb (max-width: 600px) { .pbb-dev span { display: none; } }
/* narrow boxes: tiles are ~110px, so bigger type and no chips */
@container pbb (max-width: 520px) {
  .pbb-label { font-size: max(9px, 2.5cqw); letter-spacing: .1em; }
  .pbb-cap { font-size: max(10px, 3.3cqw); }
  .pbb-check { width: 4.4cqw; height: 4.4cqw; font-size: 2.6cqw; right: 1.8cqw; top: 1.6cqw; }
  .pbb-dev { font-size: max(7.5px, 2.1cqw); gap: .6cqw; }
  .pbb-chips, .pbb-lt { display: none; }
  .pbb-label b { font-size: max(10px, 3cqw); }
}
@media (prefers-reduced-motion: reduce) { .pbb * { animation: none !important; } }