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

/* Rafa & Nicky showcase — project SKIN for the generic showcase deck
 * (css/page/showcase.css). Brand colour, content-specific crops, the
 * signature-mark treatments, and this deck's two scroll-linked moments
 * (hero zoom, collage pan) live here; all structure is shared.
 * Page: ux-case-studies/rafa-nicky-showcase.html.
 * Client hexes are specimen constants from the R&N palette (see the
 * case study's token sync) — not site tokens, and they don't theme.
 *
 * The scroll-linked animations 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 {
  /* The R&N coral, at its pressed step (#e85a5a) rather than the
   * default #ff8282 — the default is too light to carry white ink on
   * the plate ground and the close's celebration mark. */
  --sc-accent: #e85a5a;
  /* No hero wash — the funk (see the hero markup) owns the ground. */
  --sc-hero-wash: 0;
}

/* ── Hero — the flower photograph under the funk ────────────────────────
 * The liquid slick (markup in the page) is the only treatment; the
 * stock vignette is off so nothing washes the photograph out. */
.peel-panel--hero .feature-panel-media::before {
  content: none;
}

.peel-panel--hero .feature-panel-media img {
  object-position: 50% 15%;
}

/* Gentle scroll-linked zoom across the hero's dwell — the cue that the
 * page scrolls. Runs on the hero slot's own peel timeline; the travel
 * phase (last 100dvh) is excluded so the zoom settles before release. */
@keyframes rn-hero-zoom {
  to { scale: 1.08; }
}

.peel-slot:nth-of-type(1) .feature-panel-media img {
  animation: rn-hero-zoom linear both;
  animation-timeline: --peel-1;
  /* contain = the slot's pinned dwell (slot top at viewport top → slot
   * bottom at viewport bottom); the 100dvh travel phase sits after it. */
  animation-range: contain 0% contain 100%;
}

/* ── The funk — the client site's liquid oil-slick, always on ───────────
 * Same structure as the case study's .cs-cc-card (near-black ground
 * multiplied onto the full-colour photo; .cs-cc-fx blob field + veil
 * reused from case-study.css) but running from load, not on hover.
 * Direct child of the media, so it inherits the peel drag; the top
 * offset mirrors the img's drag-headroom so it never opens a gap. */
.rn-funk {
  position: absolute;
  top: calc(-1 * var(--peel-drag, 15dvh));
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  isolation: isolate;
  mix-blend-mode: multiply;
  background: rgba(26, 6, 6, 0.7);
}

.rn-funk .cs-cc-blob {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .rn-funk .cs-cc-blob {
    animation-play-state: paused;
  }
}

/* Hero signature — solid white over the funk, sitting above it (z-index
 * beats the media's funk layer). Relative so the in-flow mark still
 * paints above the absolutely-positioned media. */
.peel-panel--hero .cs-hero-mark path {
  fill: #ffffff;
}

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

.peel-panel--hero .cs-hero-mark svg {
  width: min(320px, 64vw, 46dvh);
  height: auto;
}

/* ── The pitch (01) — the editor's cull ─────────────────────────────────
 * Twelve frames gridded on the shadow ground; the seven .rn-cell--out
 * frames fade to black in a stagger (--i orders the wave) across the
 * slot's dwell, leaving the five selects lit. Same headroom pattern as
 * .rn-collage so the grid never opens a gap during the peel. */
.rn-grid {
  width: 100%;
  height: calc(100% + var(--peel-drag, 15dvh));
  margin-top: calc(-1 * var(--peel-drag, 15dvh));
  /* Headroom lives in the padding (border-box), so the content box —
   * and therefore the sheet — aligns exactly to the viewport. */
  padding-top: var(--peel-drag, 15dvh);
  /* Pure black — the sheet, the gaps, the culled frames: all #000. */
  background: #000000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Film spacing: frames nearly touch within a roll; the rolls get a
   * wider band between them. */
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  /* Explicitly square rows (cell width, derived from the full-bleed
   * viewport) — auto rows let the photos' natural aspect stretch the
   * squares. Taller than the viewport in total, centred, so the sheet
   * bleeds evenly off the top and bottom: four rolls of film. */
  grid-template-rows: repeat(3, calc((100vw - 3 * var(--space-3)) / 4));
  align-content: center;
}

.rn-cell {
  position: relative;
}

/* Square film frames, aligned in their strips. Black under the tile
 * kills any subpixel light line between photo and rebate. */
.rn-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
  transform: translateY(var(--colshift, 0px));
  animation: rn-drift linear both;
  animation-timeline: --peel-2;
  animation-range: contain 0% contain 100%;
}

/* Each ROLL sits at its own vertical offset (--colshift) — staggered
 * strips, like cut rolls laid on the scanner — and drifts as one strip
 * (--drift), at its own pace and direction, through the dwell. */
.rn-cell:nth-child(4n + 1) { --drift: -6px; --colshift: -28px; }
.rn-cell:nth-child(4n + 2) { --drift: 9px;  --colshift: 22px; }
.rn-cell:nth-child(4n + 3) { --drift: -9px; --colshift: -12px; }
.rn-cell:nth-child(4n)     { --drift: 6px;  --colshift: 34px; }

/* Absolute so the photo can never stretch the square — the grid rows
 * were sizing to the images' natural aspect otherwise. */
.rn-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  object-fit: cover;
  /* Per-cell crop anchor (set --pos inline) — biased up by default so
   * portrait faces never clip. */
  object-position: var(--pos, 50% 22%);
  display: block;
}

/* Film rebate over every frame — the roll's own border, darken-blended
 * so its white interior vanishes and only the black frame edge prints.
 * Oversized 3% to crop the scan's white fringe at the sheet edge;
 * every third frame flips 180° so the roll doesn't repeat. */
.rn-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../../media/case-studies/rafa-nicky/rebate.png') center / 103% 103%;
  mix-blend-mode: darken;
  pointer-events: none;
}

.rn-cell:nth-child(3n) .rn-tile::after {
  transform: rotate(180deg);
}

@keyframes rn-drift {
  from { translate: 0 calc(-1 * var(--drift, 6px)); }
  to { translate: 0 var(--drift, 6px); }
}

@keyframes rn-cull {
  to { opacity: 0; }
}

/* A few frames stop short of black — sporadic residue of the edit. */
@keyframes rn-cull-ghost {
  to { opacity: 0.1; }
}

.rn-cell--out .rn-tile {
  animation: rn-drift linear both, rn-cull linear both;
  animation-timeline: --peel-2, --peel-2;
  /* Front-loaded wave: first fade lands at 50%, then the spacing and
   * the fade windows stretch — fast at the start, slower to finish,
   * settled black by ~99%. */
  animation-range: contain 0% contain 100%, contain calc(46% + var(--i) * 4%) contain calc(50% + var(--i) * 4.5%);
}

.rn-cell--ghost .rn-tile {
  animation-name: rn-drift, rn-cull-ghost;
}

@media (max-width: 640px) {
  /* Two rolls on a phone — six square frames each, bleeding top and
   * bottom like the desktop sheet. */
  .rn-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, calc((100vw - var(--space-2)) / 2));
    column-gap: var(--space-2);
    row-gap: var(--space-1);
  }
}

/* ── The collage (02) — the wall glides sideways as you scroll ──────────
 * A strip render of the site's collage on the paper ground, panned
 * right-to-left across the slide's dwell on its slot's peel timeline.
 * The wrap owns the full-bleed drag headroom (mirroring the
 * .feature-panel-media img recipe) so the strip inside is free to be
 * its natural size — the no-override rule's white-gap failure can't
 * occur because the paper wrap is the bleed layer. */
.rn-collage {
  width: 100%;
  height: calc(100% + var(--peel-drag, 15dvh));
  margin-top: calc(-1 * var(--peel-drag, 15dvh));
  padding-top: var(--peel-drag, 15dvh);
  background: #faf9f6;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.rn-collage img {
  flex: none;
  width: auto;
  height: min(78dvh, 680px); /* 1000px-native rebake — sharp at 2x the old height */
  margin-top: 0;
  animation: rn-collage-pan linear both;
  animation-timeline: --peel-3;
  /* contain = the slot's pinned dwell — the pan runs while the slide
   * holds, and has settled before the travel phase begins. */
  animation-range: contain 0% contain 100%;
}

@keyframes rn-collage-pan {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw - 100%)); }
}

/* The taller strip runs under the statement zone, so the statement
 * borrows the site's chrome trick — near-black over paper gaps, light
 * over whichever photograph slides beneath it. */
.peel-slot:nth-of-type(3) .sc-statement {
  color: #ffffff;
  mix-blend-mode: difference;
}

/* ── The handoff (04) — the Claude Code session, alone on the funk ────── */
.rn-handoff img {
  max-width: 52vw;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

@media (max-width: 1024px) {
  .rn-handoff img {
    max-width: 88vw;
  }
}

/* ── The close ──────────────────────────────────────────────────────────
 * The celebration mark is the signature itself, stamped in coral — the
 * pop and dot burst come from showcase.css's .sc-done rules. */
.sc-panel--cta .sc-done .rn-sig {
  width: 150px;
  height: auto;
}

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