/* The tracking section's native feature showcase (components/PhoneShowcase.tsx,
   iphone/showcase/MOTION_SHOWCASE_CONTRACT.md). The phone art is the authored 1600x1320 canvas; the
   screen is placed by the authored affine in container-query units, so it lands on the projected
   display at any size without script. */

.skipper-kit__showcase {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.skipper-kit__showcase-phone {
  position: relative;
  width: 100%;
  aspect-ratio: var(--showcase-canvas-ratio);
  container-type: inline-size;
}

.skipper-kit__showcase-frame,
.skipper-kit__showcase-cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.skipper-kit__showcase-cutout { z-index: 2; }

.skipper-kit__showcase-screen {
  --showcase-unit: calc(100cqw / var(--showcase-canvas-width));
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: calc(var(--showcase-unit) * var(--showcase-pane-width));
  height: calc(var(--showcase-unit) * var(--showcase-pane-height));
  border-radius: calc(var(--showcase-unit) * var(--showcase-pane-radius));
  clip-path: inset(0 round calc(var(--showcase-unit) * var(--showcase-pane-radius)));
  overflow: hidden;
  background: var(--skipper-cream, #fdfaee);
  transform-origin: 0 0;
  transform:
    translate(calc(var(--showcase-unit) * var(--showcase-e)), calc(var(--showcase-unit) * var(--showcase-f)))
    matrix(var(--showcase-a), var(--showcase-b), var(--showcase-c), var(--showcase-d), 0, 0);
}

.skipper-kit__showcase-poster,
.skipper-kit__showcase-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.skipper-kit__showcase-poster { z-index: 1; }
.skipper-kit__showcase-poster[hidden] { display: none; }

/* Captions share one grid cell and crossfade on the media clock (--showcase-weight, 0..1, set by
   phone-showcase.js). Without script the first chapter stands as the caption for the poster. */
.skipper-kit__showcase-captions {
  display: grid;
  width: min(100%, 23rem);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.skipper-kit__showcase-caption {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  opacity: var(--showcase-weight, 0);
  transform: translateY(calc((1 - var(--showcase-weight, 0)) * 0.3rem));
}

.skipper-kit__showcase-caption:first-child {
  opacity: var(--showcase-weight, 1);
  transform: translateY(calc((1 - var(--showcase-weight, 1)) * 0.3rem));
}

.skipper-kit__showcase-title {
  color: var(--skipper-ink, #173f3d);
  font: 800 1.08rem/1.2 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  text-wrap: balance;
}

.skipper-kit__showcase-detail {
  color: var(--skipper-teal-dark, #1c5753);
  font: 500 0.88rem/1.4 system-ui, sans-serif;
  text-wrap: balance;
}

.skipper-kit__showcase-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.7rem;
}

.skipper-kit__showcase-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border: 0;
  border-radius: 999px;
  color: var(--skipper-cream, #fdfaee);
  background: var(--skipper-teal, #246b65);
  box-shadow: 0 2px 0 var(--skipper-teal-dark, #1c5753);
  font: 800 0.75rem/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.skipper-kit__showcase-toggle:hover { background: var(--skipper-teal-dark, #1c5753); }
.skipper-kit__showcase-toggle:disabled { opacity: 0.55; cursor: default; }

.skipper-kit__showcase-toggle:focus-visible,
.skipper-kit__showcase-segment:focus-visible {
  outline: 2px solid var(--skipper-ink, #173f3d);
  outline-offset: 2px;
}

/* Play ▶ by default; two bars while playing; a ring while ended (replay). */
.skipper-kit__showcase-glyph {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
}

.skipper-kit__showcase-glyph::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0.12rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

[data-showcase-state="playing"] .skipper-kit__showcase-glyph::before {
  inset: 0 0.06rem;
  background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
  clip-path: none;
}

[data-showcase-state="ended"] .skipper-kit__showcase-glyph::before {
  inset: 0;
  border: 0.13rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background: none;
  clip-path: none;
}

.skipper-kit__showcase-rail {
  display: flex;
  gap: 0.25rem;
}

.skipper-kit__showcase-segment {
  display: grid;
  align-items: center;
  width: 2rem;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.skipper-kit__showcase-segment::before {
  content: "";
  grid-area: 1 / 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(36, 107, 101, 0.2);
}

.skipper-kit__showcase-fill {
  grid-area: 1 / 1;
  height: 5px;
  border-radius: 999px;
  background: var(--skipper-teal, #246b65);
  transform-origin: left center;
  transform: scaleX(var(--showcase-fill, 0));
}

.skipper-kit__showcase-duration {
  color: var(--skipper-teal-dark, #1c5753);
  font: 800 0.72rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

[data-showcase-state="error"] .skipper-kit__showcase-rail { opacity: 0.5; }