/* showcase-reel.css - scene "showcase": PwP's 360-degree outputs as a panorama reel.
 * Two full-bleed rows of tiles drift past like film strips; between them one large screen plays one clip at a
 * time and, between clips, curls the panorama into a closed ring and unrolls the next one (js/showcase-reel.js).
 * Tile and screen sizes keep every ERP at <= 1.25 x its 1024 px width (DESIGN.md section 7).
 */

.v4-showcase {
  --sc-tile-h: clamp(92px, 12.4vh, 146px);      /* tile = 2 : 1 ERP, 512 x 256 source cells */
  --sc-gap: 10px;
  --sc-row-pad: 12px;                           /* room for a lifted tile and its shadow */
  /* the screen: as large as fits between the two rows on one screen (with the reel's band under them), never
     above 1.22 x the ERP */
  --sc-feat-w: min(100%, 1248px, max(560px, calc((100svh - 2 * var(--sc-tile-h) - 4 * var(--sc-row-pad) - 128px) * 2)));
}

/* ------------------------------------------------------------ headline */
.v4-showcase-top { align-items: end; margin-bottom: 0; }
.v4-showcase-head { grid-column: 1 / span 8; }
.v4-showcase-l { display: block; }
.v4-showcase-say { grid-column: 9 / span 4; justify-self: end; max-width: 33ch; padding-bottom: 0.3em; }

/* ------------------------------------------------------------ the rows (full bleed) */
.v4-showcase-stage { position: relative; }
.v4-showcase-row {
  position: relative;
  overflow: hidden;
  padding: var(--sc-row-pad) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.v4-showcase-track {
  display: flex;
  gap: var(--sc-gap);
  width: max-content;
  will-change: transform;
}
.v4-showcase-tile {
  position: relative;
  flex: none;
  display: block;
  width: calc(var(--sc-tile-h) * 2);
  height: var(--sc-tile-h);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--v4-paper-2);
  box-shadow: 0 1px 0 rgba(20, 21, 24, 0.05), 0 14px 26px -20px rgba(20, 21, 24, 0.55);
  transform: translateZ(0);
  transition: transform var(--v4-t2) var(--v4-ease), box-shadow var(--v4-t2) var(--v4-ease);
  cursor: pointer;
}
.v4-showcase-tile > img, .v4-showcase-tile > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.v4-showcase-tile > canvas { opacity: 0; transition: opacity var(--v4-t2) var(--v4-ease); }
.v4-showcase-tile.is-live > canvas { opacity: 1; }
.v4-showcase-tag {                        /* a square paper chip: legible on sky, on a white roof, at night */
  position: absolute; left: 6px; bottom: 6px; z-index: 1; max-width: calc(100% - 12px);
  display: flex; align-items: flex-start;
  padding: 4px 6px 3px;
  background: rgba(251, 250, 248, 0.92); color: var(--v4-ink);
  font: 650 10px/1.1 var(--v4-sans); letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
  pointer-events: none;
}
.v4-showcase-tag > span { white-space: nowrap; }
.v4-showcase-tile:hover, .v4-showcase-tile:focus-visible {
  transform: translateY(-7px) scale(1.05);
  box-shadow: 0 2px 0 rgba(20, 21, 24, 0.05), 0 26px 38px -20px rgba(20, 21, 24, 0.7);
  z-index: 2;
}
.v4-showcase-tile:focus-visible { outline: 2px solid var(--v4-ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--v4-paper); }
.v4-showcase-tile.is-on { box-shadow: 0 0 0 2px var(--v4-paper), 0 0 0 3.5px var(--v4-ink), 0 14px 26px -20px rgba(20, 21, 24, 0.55); }

/* ------------------------------------------------------------ the screen */
.v4-showcase-feature { width: var(--sc-feat-w); margin: 6px auto 4px; }
.v4-showcase-gate {
  --v4-ar: 2 / 1; background: var(--v4-paper-2);
  transition: box-shadow var(--v4-t3) var(--v4-ease-io), background-color var(--v4-t3) var(--v4-ease-io);
}
.v4-showcase-feature .v4-marks { transition: opacity var(--v4-t3) var(--v4-ease-io); }
/* while the ring turns (its first unroll and every change between clips) it stands on the page itself: the screen's
   box, its shadow and most of its crop marks step back until the next clip lies flat again */
.v4-showcase.is-gl[data-phase="intro"] .v4-showcase-gate,
.v4-showcase.is-gl[data-phase="change"] .v4-showcase-gate { background-color: var(--v4-paper); box-shadow: none; }
.v4-showcase.is-gl[data-phase="intro"] .v4-showcase-feature .v4-marks,
.v4-showcase.is-gl[data-phase="change"] .v4-showcase-feature .v4-marks { opacity: 0.18; }
.v4-showcase-gate > .v4-showcase-poster,
.v4-showcase-gate > .v4-showcase-v,
.v4-showcase-gate > .v4-showcase-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4-showcase-v { background: transparent; opacity: 0; }
.v4-showcase.is-gl .v4-showcase-poster { opacity: 0; }   /* WebGL opens on the closed ring, not on a flat frame */
.v4-showcase-gl { opacity: 0; transition: opacity var(--v4-t2) var(--v4-ease); }
.v4-showcase.is-gl .v4-showcase-gl.is-drawn { opacity: 1; }
/* without WebGL the two videos cross-fade */
.v4-showcase.is-flat .v4-showcase-v { transition: opacity 0.9s var(--v4-ease-io), transform 1.2s var(--v4-ease); transform: scale(1.015); }
.v4-showcase.is-flat .v4-showcase-v.is-front { opacity: 1; transform: none; }

.v4-showcase-open {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0;
  border: 0; background: transparent; cursor: zoom-in;
}
.v4-showcase-open__i {
  position: absolute; right: 12px; top: 12px;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: rgba(20, 21, 24, 0.55); color: #fff;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--v4-t2) var(--v4-ease), transform var(--v4-t2) var(--v4-ease);
}
.v4-showcase-open__i svg { width: 14px; height: 14px; fill: currentColor; }
.v4-showcase-open:hover .v4-showcase-open__i,
.v4-showcase-open:focus-visible .v4-showcase-open__i { opacity: 1; transform: none; }
.v4-showcase-open:focus-visible { outline: 2px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.35); }

/* the clip timeline: twelve short thick bars with gaps, the current one fills as it plays (deliberately unlike the
   page reel at the bottom edge, a hairline with seam ticks) */
.v4-showcase-time {
  display: flex; gap: 7px; margin-top: calc(var(--v4-mark-off) + 8px);
}
.v4-showcase-seg {
  --sc-rest: rgba(20, 21, 24, 0.13);
  position: relative; flex: 1 1 0; min-width: 0; height: 20px; padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.v4-showcase-seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px;
  background: linear-gradient(90deg, var(--v4-ink) var(--p, 0%), var(--sc-rest) var(--p, 0%));
}
.v4-showcase-seg:hover { --sc-rest: rgba(20, 21, 24, 0.3); }
.v4-showcase-seg[aria-current="true"] { --sc-rest: rgba(20, 21, 24, 0.22); }
.v4-showcase-seg span {
  position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%);
  padding: 3px 7px; background: var(--v4-ink); color: var(--v4-paper);
  font-size: 11.5px; line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--v4-t1) var(--v4-ease);
}
.v4-showcase-seg:first-child span { left: 0; transform: none; }
.v4-showcase-seg:last-child span { left: auto; right: 0; transform: none; }
.v4-showcase-seg:hover span, .v4-showcase-seg:focus-visible span { opacity: 1; }

.v4-showcase-slate { margin-top: 2px; align-items: center; }
.v4-showcase-ctl { display: inline-flex; align-items: center; gap: 6px; }
.v4-showcase-count { margin-right: 8px; color: var(--v4-ink-3); }
.v4-showcase-btn {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--v4-line-2); background: transparent; color: var(--v4-ink);
}
.v4-showcase-btn:hover { border-color: var(--v4-ink); }
.v4-showcase-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.v4-showcase-pause svg { fill: currentColor; stroke: none; }

/* the tiles' source video: decoded, never shown */
.v4-showcase-srcbox { position: absolute; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0.01; pointer-events: none; }
.v4-showcase-srcbox video { width: 2px; height: 2px; }

/* ------------------------------------------------------------ reduced motion: a still grid */
.v4-showcase.is-grid .v4-showcase-stage { display: none; }
.v4-showcase-gridwrap[hidden] { display: none; }
.v4-showcase-gridwrap { margin-top: clamp(20px, 3vh, 32px); }
.v4-showcase-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.v4-showcase-grid .v4-showcase-tile { width: 100%; height: auto; aspect-ratio: 2 / 1; }

/* ------------------------------------------------------------ the larger view (dialog) */
.v4-showcase-dlg {
  width: min(1124px, calc(100vw - 24px)); max-width: none; max-height: calc(100svh - 24px);
  padding: 16px 22px 18px; border: 0; background: var(--v4-paper); color: var(--v4-ink-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  overflow: auto;
}
.v4-showcase-dlg::backdrop { background: rgba(243, 241, 236, 0.9); }
.v4-showcase-dlg__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.v4-showcase-dlg__t { font-size: var(--v4-fs-xs); color: var(--v4-ink-3); line-height: 1.45; }
.v4-showcase-dlg__t b { color: var(--v4-ink); font-weight: 600; }
.v4-showcase-dlg__x { min-height: 34px; padding: 0 14px; }
.v4-showcase-dlg__fig { width: min(100%, 1080px, calc((100svh - 180px) * 2)); margin: 0 auto; }
.v4-showcase-dlg__fig .v4-gate { --v4-ar: 2 / 1; }
.v4-showcase-dlg__tp { margin-top: calc(var(--v4-mark-off) + 10px); }
.v4-showcase-dlg__nav { display: inline-flex; gap: 6px; }
.v4-showcase-dlg__pan, .v4-showcase-dlg__hint { display: none; }    /* phones only (below) */

/* ------------------------------------------------------------ phones */
@media (max-width: 719px) {
  .v4-showcase { --sc-tile-h: 86px; --sc-gap: 8px; --sc-row-pad: 12px; --sc-feat-w: 100%; }
  .v4-showcase-top { display: block; margin-bottom: calc(var(--v4-mark-off) + var(--v4-s4)); }
  .v4-showcase-say { margin-top: var(--v4-s4); max-width: none; }
  .v4-showcase-row[data-row="0"] { display: none; }
  .v4-showcase-feature { margin-top: 0; }
  .v4-showcase-row { -webkit-mask-image: none; mask-image: none; }
  .v4-showcase-slate { flex-direction: row; flex-wrap: wrap; }
  .v4-showcase-what { flex: 1 1 100%; }
  .v4-showcase-ctl { margin-left: 0; }
  .v4-showcase-time { gap: 3px; }
  .v4-showcase-seg span { display: none; }
  .v4-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* the larger view on a phone: the full width, the clip as a strip 260 px tall (520 px for the whole 360 degrees,
     0.51 x the ERP) that is dragged round and wraps at the back seam; the flat 2 : 1 frame would be smaller than
     the screen on the page */
  .v4-showcase-dlg { width: 100%; max-width: 100%; max-height: 100%; margin: auto 0; padding: 14px 0 16px; }
  .v4-showcase-dlg__bar { padding: 0 var(--v4-gutter); margin-bottom: 14px; }
  .v4-showcase-dlg__fig { width: 100%; }
  .v4-showcase-dlg__fig .v4-gate { aspect-ratio: auto; height: 260px; box-shadow: none; }
  .v4-showcase-dlg__fig .v4-marks { display: none; }
  .v4-showcase-dlg__v { opacity: 0; }
  .v4-showcase-dlg__pan { display: block; z-index: 1; cursor: grab; touch-action: pan-y; }
  .v4-showcase-dlg__pan:active { cursor: grabbing; }
  .v4-showcase-dlg__pan:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
  .v4-showcase-dlg__hint {
    position: absolute; left: 50%; bottom: 10px; z-index: 2; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 4px;
    background: rgba(251, 250, 248, 0.92); color: var(--v4-ink);
    font: 650 10.5px/1.1 var(--v4-sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
    pointer-events: none; transition: opacity var(--v4-t2) var(--v4-ease);
  }
  .v4-showcase-dlg__hint svg { width: 17px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .v4-showcase-dlg.is-turned .v4-showcase-dlg__hint { opacity: 0; }
  .v4-showcase-dlg__tp { margin-top: 12px; padding: 0 var(--v4-gutter); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .v4-showcase-head { grid-column: 1 / span 12; }
  .v4-showcase-say { grid-column: 1 / span 9; justify-self: start; margin-top: var(--v4-s4); }
  .v4-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}