@import '../tokens.css?v=0f47e1e2';

/* Artpilot showcase — project SKIN for the generic showcase deck
 * (css/page/showcase.css). Brand colour, content-specific crops, the
 * hero-mark choreography, and this deck's two bespoke planes (the
 * white-ground prototype, the jargon translation) live here; all
 * structure is shared. Page: ux-case-studies/artpilot-showcase.html.
 * The Artpilot red is a specimen constant from the project's brand kit
 * (same value as --ap-mark in artpilot-mark-loop.css) — not a site
 * token, and it doesn't theme.
 *
 * The jargon slide's scroll-linked swaps ride the SAME named view
 * timelines the peel mechanics publish (--peel-1..6, scoped on
 * .peel-stack in home-featured.css). Engines without scroll-timeline
 * support simply land on the animations' end states — still composed,
 * just static. */

.peel-stack {
  --sc-accent: #DB3334;                    /* Artpilot brand red */
  --sc-vignette-ink: rgba(84, 8, 10, 0.6); /* darker shade of the red */
  --sc-hero-wash: 0.7;                     /* ← dial the hero wash here */
}

/* ── Pitch-slide crop — centre the billboard ("Don't let your walls
 * look like this.") in the frame with a whisper of zoom; it sits at
 * ~46% / 42% of the source. */
.sc-zoom {
  --sc-zoom-pos: 46% 40%;
  --sc-zoom-transform: scale(1.12);
  --sc-zoom-origin: 46% 42%;
}

/* Soft edge vignette over the bright street photo so the white
 * statement holds at the bottom of the plane — same media-locked
 * radial precedent as the hero vignette in showcase.css. */
.peel-slot:nth-of-type(2) .feature-panel-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120vw at 50% 30%, transparent 38%, rgba(13, 13, 13, 0.68) 100%);
}

/* ── Hero mark ──────────────────────────────────────────────────────────
 * Badge alone on phones (stack), the full wordmark from 900px (lockup)
 * — the display swap comes from case-study.css. On the red wash both
 * print solid white. Relative (not static) so the in-flow mark still
 * paints above the absolutely-positioned media/wash layers. */
.peel-panel--hero .cs-hero-mark path {
  fill: #ffffff;
}

.peel-panel--hero .cs-hero-mark {
  position: relative;
  inset: auto;
  transform: none;
  z-index: 1;
}

/* Short-viewport guard: the mark also yields to viewport height so the
 * stack (mark + 40px + line + CTAs) always fits. */
.peel-panel--hero .cs-hero-mark .cs-hero-mark-lockup {
  width: min(640px, 58vw, 90dvh);
}

.peel-panel--hero .cs-hero-mark .cs-hero-mark-stack {
  width: min(230px, 60vw, 34dvh);
}

/* Entrance choreography — letters cascade in reading order out of a
 * soft blur (--i orders the wave), then the badge rubber-stamps in on
 * its --bd delay. Same grammar as the NRB mark in case-study.css, but
 * skin-owned: these glyph classes are Artpilot's. */
.cs-hero-mark .ap-letter {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ap-letter-enter 550ms cubic-bezier(0.22, 1, 0.36, 1)
             calc(400ms + var(--i) * 45ms) forwards;
}

@keyframes ap-letter-enter {
  from {
    opacity: 0;
    transform: translateY(14%) scale(0.92);
    filter: blur(8px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.cs-hero-mark .ap-badge {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ap-badge-stamp 380ms cubic-bezier(0.34, 1.56, 0.64, 1)
             var(--bd) forwards;
}

@keyframes ap-badge-stamp {
  from {
    opacity: 0;
    transform: scale(1.45) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero-mark .ap-letter,
  .cs-hero-mark .ap-badge {
    animation: none;
    opacity: 1;
  }
}

/* ── The product (02) — the demo floats on white ────────────────────────
 * The capture's own ground is pure #ffffff (device frame baked into
 * the render), so a matching media-locked white plane makes the phone
 * float free with no visible canvas edge. */
.ap-panel--proto {
  background: #ffffff;
}

/* White plane, dark count — the shared count ink is white. */
.ap-panel--proto .feature-panel-count {
  color: #0d0d0d;
}

/* Identical headroom to .sc-phones/.sc-video so the demo matches the
 * other decks' phone height and never collides with the statement. */
.ap-proto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--panel-gutter) calc(var(--panel-gutter) + 120px);
}

.ap-proto video {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ── The language (03) — jargon struck through, task words land ─────────
 * Three rows on the shadow ground. Across the slot's dwell each row
 * swaps in sequence (--i orders the wave): the jargon dims as a strike
 * draws through it, then its plain translation lands in brand red.
 * No animation duration anywhere — engines without scroll-timeline
 * support land on the end state: all rows translated. */
.ap-terms {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-16) var(--panel-gutter) calc(var(--panel-gutter) + 160px);
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.ap-term-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  text-align: center;
  font-size: var(--font-size-display-m);
  line-height: var(--line-height-display-m);
  letter-spacing: var(--letter-spacing-display-m);
  font-weight: var(--font-weight-display-m);
}

/* Deck ink constants are media-locked, per showcase.css. */
.ap-jargon {
  position: relative;
  color: #ffffff;
  animation: ap-dim linear both;
  animation-timeline: --peel-4;
  animation-range: contain calc(28% + var(--i) * 16%) contain calc(36% + var(--i) * 16%);
}

/* The strike — draws left to right through the jargon as it dims. */
.ap-jargon::after {
  content: "";
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  top: 55%;
  height: 0.06em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  animation: ap-strike linear both;
  animation-timeline: --peel-4;
  animation-range: contain calc(28% + var(--i) * 16%) contain calc(36% + var(--i) * 16%);
}

.ap-arrow {
  color: rgba(255, 255, 255, 0.5);
}

.ap-plain {
  color: var(--sc-accent);
  animation: ap-land linear both;
  animation-timeline: --peel-4;
  animation-range: contain calc(32% + var(--i) * 16%) contain calc(42% + var(--i) * 16%);
}

@keyframes ap-dim {
  to { opacity: 0.4; }
}

@keyframes ap-strike {
  to { transform: scaleX(1); }
}

@keyframes ap-land {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .ap-term-row {
    font-size: var(--font-size-display-s);
    line-height: var(--line-height-display-s);
    letter-spacing: var(--letter-spacing-display-s);
    font-weight: var(--font-weight-display-s);
  }
}

/* ── The numbers (04) — three results counting up on the red plate ──────
 * Count-up, L→R stagger, and the fade-in reveal come from initStats in
 * main.js + the .cs-stat rules in case-study.css; this strips the
 * card chrome so only the figures print on the plate. */
.ap-stats {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--panel-gutter) calc(var(--panel-gutter) + 160px);
}

.ap-stats .cs-stat {
  background: transparent;
  padding: 0;
  min-height: 0;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

/* Display-art scale for the figures — the numbers are this plane's
 * media, not running type; same bespoke-visual precedent as the deck
 * marks. Tracking matches the display styles. */
.ap-stats .cs-stat-value {
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: var(--font-regular);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.ap-stat-label {
  max-width: 22ch;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-body);
  color: rgba(255, 255, 255, 0.8);
  text-wrap: balance;
}

@media (max-width: 1024px) {
  .ap-stats {
    flex-direction: column;
    gap: var(--space-8);
  }
}

/* Phones: the stacked column has to clear the statement zone — compact
 * figures and single-scale labels so all three results stay on the
 * plane. */
@media (max-width: 640px) {
  .ap-stats {
    gap: var(--space-5);
  }

  .ap-stats .cs-stat-value {
    font-size: clamp(40px, 11vw, 56px);
  }

  .ap-stat-label {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-small);
    font-weight: var(--font-weight-small);
  }
}

/* ── The close — the badge stamps in brand red; the pop and dot burst
 * come from showcase.css's .sc-done rules. ─────────────────────────── */
.sc-panel--cta .sc-done .ap-mark {
  width: 96px;
  height: auto;
}

.sc-panel--cta .sc-done .ap-mark path {
  fill: var(--sc-accent);
}