/* v5 · C · Proof · round 5 · front R: 07 show-first (the frame that opens into the wall) and the stamps of 08 me.
   Loads after r5-glow.css, before r4-mobile.css. Mobile first: 390, then 768 / 1000. The look of the prints comes from
   css/r4-mid.css; this sheet makes the wall flat and tidy and adds the opening. Modes: .r5r (root) and .r5-open
   (section) are set by js/r5-r.js; without JS, with ?static or reduced motion the wall is complete and still. */

/* ═════════════════ 07 · the wall, flat: no perspective, no 3D layers (they rasterize soft and cost frames) ═════════════════ */
#show-first .show4__stage { perspective: none; }
#show-first .bento { transform-style: flat; transform: none; }
#show-first .bt { transform-style: flat; }
/* the section's grain: same look without a blend over the moving wall */
#show-first.darkroom::after { mix-blend-mode: normal; opacity: .05; }

/* the blue light under the first screen (round 5 accent: arc + fine grid from r5-glow.css) */
/* the same arc and grid as the round 5 tokens, but centred on the foot of the first screen and faded on both sides:
   the section goes on below it, so the light can never end on a hard edge behind the wall */
.r5-glow { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 140vh; pointer-events: none;
  background: radial-gradient(60% 33% at 50% 71%, color-mix(in srgb, var(--g-glow) 70%, transparent) 0%, color-mix(in srgb, var(--g-glow) 26%, transparent) 42%, transparent 70%), var(--g-grid);
  -webkit-mask: linear-gradient(180deg, transparent 6%, #000 46%, #000 70%, transparent 94%); mask: linear-gradient(180deg, transparent 6%, #000 46%, #000 70%, transparent 94%); }
.r5-open .r5-glow { height: calc(var(--r5-vh, 100vh) * 1.4); }

/* ── grid: phone (390), 2 columns, rows sized by their content; every print filled ── */
#show-first .bento { --gap: 10px; gap: var(--gap); grid-auto-rows: auto; grid-template-rows: none; align-items: stretch;
  grid-template-areas: "prep prep" "note clock" "otr otr" "black inv" "keep keep" "uk uk"; }
/* round 6: Keepcut takes the place of From Invisible to Authority (the pale strip): a third film print, recorded */
#show-first .bt--keep { grid-area: keep; }
#show-first .bt__in { display: flex; flex-direction: column; height: 100%; }
#show-first .bt__print .bt__cap { margin-top: auto; }
#show-first .bt__win { flex: none; }
#show-first .bt--prep .bt__win { aspect-ratio: 2 / 3; }
#show-first .bt--otr .bt__win, #show-first .bt--uk .bt__win, #show-first .bt--keep .bt__win { aspect-ratio: 16 / 10; }
#show-first .bt--black .bt__phone, #show-first .bt--pen .bt__phone { flex: none; width: 100%; height: auto; margin: 4px 0 0; }
@media (max-width: 767px) and (max-height: 760px) { #show-first .bt--prep .bt__win { aspect-ratio: 3 / 4; } }

/* a film frame for the two hero prints (the dark tiles of the wall): sprockets, the frame code, the label in the edge */
#show-first .bt--film { --ft: 35px; --fs: 7px; --fb: 50px; }
#show-first .bt__print--film { position: relative; padding: var(--ft) var(--fs) 0; border-radius: 3px; background: var(--film);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 11%, transparent); }
#show-first .bt__print--film::before, #show-first .bt__print--film::after { content: ""; position: absolute; left: 9px; right: 9px; height: 8px;
  background: color-mix(in srgb, var(--paper) 24%, transparent);
  -webkit-mask: var(--sprocket) repeat-x left center / 20px 8px; mask: var(--sprocket) repeat-x left center / 20px 8px; }
#show-first .bt__print--film::before { top: 6px; }
#show-first .bt__print--film::after { bottom: 6px; }
#show-first .bt__code { position: absolute; top: 18px; left: 10px; right: 10px; display: flex; justify-content: space-between; margin: 0;
  font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: color-mix(in srgb, var(--marker) 86%, var(--paper)); }
#show-first .bt__print--film .bt__win { border-radius: 1px; }
#show-first .bt__print--film .bt__win::after { display: none; } /* no grain over the video: nothing blended on top of it */
#show-first .bt__print--film .bt__cap { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;
  height: calc(var(--fb) - 18px); margin: 0 0 18px; padding: 0 3px; }
#show-first .bt__print--film .bt__lab { color: color-mix(in srgb, var(--paper) 62%, var(--film)); }
#show-first .bt__print--film .bt__name { color: var(--paper); margin-left: auto; }
#show-first .is-playing .bt__still { visibility: hidden; } /* the poster under a playing video is never painted again */

/* the other photo prints: grain without a blend */
#show-first .bt__print:not(.bt__print--film) .bt__win::after { mix-blend-mode: normal; opacity: .05; }

/* paper tiles */
#show-first .bt__slip, #show-first .bt__card { display: flex; flex-direction: column; }
#show-first .bt__w { font-size: 20px; }
#show-first .bt__leaks { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 10px; }
#show-first .bt__leaks li { padding: 4px 0; }

/* 72h: the dark card of the wall, ink in paper, the live part of the dial in the blue of round 5 */
#show-first .bt--clock .bt__card { position: relative; isolation: isolate; overflow: hidden; color: var(--paper);
  background: linear-gradient(172deg, color-mix(in srgb, var(--night) 62%, var(--film)), var(--film));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 10%, transparent); }
#show-first .bt--clock .bt__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--g-arc); opacity: .75; }
#show-first .bt--clock .bt__meta { color: color-mix(in srgb, var(--paper) 66%, var(--film)); }
#show-first .bt--clock .bt__meta b { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
#show-first .bt--clock .bt__dial { min-height: 116px; }
#show-first .bt--clock .d-face { stroke: var(--paper); }
#show-first .bt--clock .d-ticks path { stroke: var(--paper); }
#show-first .bt--clock .d-arc--a { stroke: var(--marker); }
#show-first .bt--clock .d-arc--b { stroke: color-mix(in srgb, var(--g-glow) 70%, var(--g-lav)); }
#show-first .bt--clock .d-knob { fill: var(--film); stroke: var(--paper); }
#show-first .bt--clock .bt__hrs { color: var(--paper); }
#show-first .bt--clock .bt__tag { color: color-mix(in srgb, var(--paper) 36%, transparent); }
#show-first .bt--clock .bt__tag.is-on { color: var(--paper); }
#show-first .bt--clock .bt__tag--b.is-on { color: color-mix(in srgb, var(--g-lav) 70%, var(--g-glow)); }
#show-first .bt__st--72 { right: 8px; bottom: 8px; --ss: 58px; }
/* the moving parts of the dial sit on their own layers: the filtered face is drawn once */
#show-first .d-live, #show-first .bt__hrs { will-change: transform; }

/* the invoice slip: words on top, the two stamps at the foot */
#show-first .bt--inv .bt__meta { padding-right: 0; }
#show-first .bt__slip--inv { position: relative; min-height: 300px; container-type: inline-size; }
#show-first .bt__amt { font-size: 34px; }
#show-first .bt__no { margin-top: 10px; }
/* phone and tablet: the slip stands next to a phone, so the two stamps fill its lower half */
#show-first .bt__st--cur { top: auto; right: auto; left: 7cqw; bottom: 55cqw; --ss: 44cqw; }
#show-first .bt__st--inv { top: auto; right: 5cqw; bottom: 5cqw; --ss: 62cqw; }

/* stamps: ink without a blend (same look on the paper), each on its own layer so the #ink filter rasters once */
#show-first .st4, #me .st4 { mix-blend-mode: normal; }
.motion #show-first .st4, .motion #me .st4 { will-change: transform; }

/* hover (desktop): the print lifts off the wall on a spring, its shadow opens (no script, no 3D) */
@media (hover: hover) and (pointer: fine) {
  #show-first .bt__in { transition: translate .73s var(--sp-soft, var(--ease-out)); }
  #show-first .bt:hover .bt__in { translate: 0 -6px; }
  #show-first .bt:hover::before { transform: translateY(calc(18px + var(--z, 20) * .3px)) scale(1.02); opacity: .7; }
}

/* pre-states: the round 4 wall pre-state no longer applies; round 5 shows each print on its own entrance */
.b4.motion #show-first .bt { opacity: 1; }
.r5r.motion #show-first .bt:not(.bt--prep) { opacity: 0; }
.r5r.motion #show-first .show4__text { opacity: 0; }

/* ── the opening (motion only): the headline waits around a small frame on the first screen ── */
.r5-open.show4 { padding-top: clamp(56px, 8vh, 84px); }
.r5-open .show4__head { position: static; } /* the headline is placed on the section's first screen, not in the head */
.r5-open .show4__fr, .r5-open .show4__text { position: relative; z-index: 3; }
.r5-open .show4__stage { z-index: 4; margin-top: 22px; }
.r5-open .show4__text { margin-top: 12px; font-size: 16px; }
.r5-open .show4__h { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 0; height: var(--r5-vh, 100vh); margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: var(--r5-gap, 50vh); pointer-events: none; }
.r5-open .show4__b { padding-left: 0; text-align: right; }
.r5-open .bt--prep { z-index: 6; }
/* the print's shadow stays on the wall where the frame will land; it only opens once the frame is home.
   round 6: the hover lift (desktop) no longer reaches the frame in flight: the pointer over its empty place on the wall
   used to open that shadow, a black box over the headline. Until it lands, the print takes no pointer at all */
#show-first.r5-open .bt--prep:not(.is-landed) { pointer-events: none; }
#show-first.r5-open .bt--prep:not(.is-landed)::before { opacity: 0; transition: none; }

/* ═════════════════════ 08 · me: the clock stamp on a round paper tag ═════════════════════ */
/* the stamp sits over the edge of the print; a die-cut paper tag under the ink keeps the black frame from showing
   through it at every width (the tag moves and turns with the stamp) */
.me4__st--clock::before { content: ""; position: absolute; z-index: -1; inset: -5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 36% 30%, var(--print), color-mix(in srgb, var(--print) 84%, var(--silver)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--film) 8%, transparent), 0 1px 1px color-mix(in srgb, var(--film) 20%, transparent), 0 12px 20px -12px color-mix(in srgb, var(--film) 60%, transparent); }
.me4__clock { right: -30px; }
.me4__clock .me4__dial { z-index: 5; } /* the drawn clock sits on the tag, inside the stamp's ring */

/* ═════════════════════ ≥ 430 ═════════════════════ */
@media (min-width: 430px) {
  #show-first .bt__w { font-size: 21px; }
}

/* ═════════════════════ ≥ 768 · tablet: 6 columns ═════════════════════ */
@media (min-width: 768px) {
  #show-first .bento { --gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: "prep prep prep prep prep prep" "note note note clock clock clock" "otr otr otr otr otr otr" "black black inv inv pen pen" "keep keep keep uk uk uk"; }
  #show-first .bt--pen { display: block; }
  #show-first .bt--prep .bt__win { aspect-ratio: 16 / 9; }
  /* Keepcut stands next to the jeweller: its window fills the row the 16:10 print sets */
  #show-first .bt--keep .bt__win { flex: 1; aspect-ratio: auto; min-height: 160px; }
  #show-first .bt--film { --ft: 40px; --fs: 9px; --fb: 58px; }
  #show-first .bt__print--film::before, #show-first .bt__print--film::after { height: 9px; left: 10px; right: 10px; -webkit-mask-size: 22px 9px; mask-size: 22px 9px; }
  #show-first .bt__print--film::before { top: 8px; } #show-first .bt__print--film::after { bottom: 8px; }
  #show-first .bt__code { top: 22px; left: 12px; right: 12px; }
  #show-first .bt__print--film .bt__cap { height: calc(var(--fb) - 22px); margin-bottom: 22px; }
  #show-first .bt__w { font-size: 24px; }
  #show-first .bt--clock .bt__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 18px; }
  #show-first .bt--clock .bt__meta { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  #show-first .bt--clock .bt__dial { grid-column: 1; grid-row: 1 / -1; margin: 0; min-height: 150px; }
  #show-first .bt--clock .bt__legend { grid-column: 2; grid-row: 3; gap: 4px; }
  .r5-open .show4__text { font-size: 17px; }
  .me4__clock { right: -44px; }
}

/* ═════════════════════ ≥ 1000 · desktop: 12 columns, rows that line up with the media ═════════════════════ */
@media (min-width: 1000px) {
  /* row heights come from the hero windows: 16:9 for Prepara, 16:10 for Out of the Room, a real phone for the last row */
  #show-first .bento { --gap: 16px; --pad: 7px; max-width: 1560px; margin-inline: auto;
    --wb: min(calc(100vw - 2 * var(--gutter)), 1560px);
    --c: calc((var(--wb) - 11 * var(--gap)) / 12);
    --w8: calc(8 * var(--c) + 7 * var(--gap) - 18px);
    --hA: calc(40px + var(--w8) * 9 / 16 + 60px);
    --hB: calc(40px + var(--w8) * 10 / 16 + 60px);
    --hC: calc(11px + (2 * var(--c) + var(--gap) - 14px) * 844 / 390 + 52px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: calc((var(--hA) - var(--gap)) / 2) calc((var(--hA) - var(--gap)) / 2) calc((var(--hB) - var(--gap)) / 2) calc((var(--hB) - var(--gap)) / 2) var(--hC);
    grid-template-areas:
      "prep prep prep prep prep prep prep prep note note note note"
      "prep prep prep prep prep prep prep prep clock clock clock clock"
      "inv inv inv inv otr otr otr otr otr otr otr otr"
      "uk uk uk uk otr otr otr otr otr otr otr otr"
      "keep keep keep keep black black pen pen imp imp imp imp"; }
  #show-first .bt--imp { display: block; }
  #show-first .bt__win, #show-first .bt--prep .bt__win, #show-first .bt--otr .bt__win, #show-first .bt--uk .bt__win, #show-first .bt--keep .bt__win { flex: 1; aspect-ratio: auto; min-height: 0; }
  #show-first .bt--film { --ft: 40px; --fs: 9px; --fb: 60px; }
  #show-first .bt__print--film .bt__cap { height: 38px; margin-bottom: 22px; }
  #show-first .bt--black .bt__cap, #show-first .bt--pen .bt__cap { height: 52px; margin-top: 0; padding-top: 7px; }
  #show-first .bt--black .bt__phone, #show-first .bt--pen .bt__phone { margin-top: 4px; }

  #show-first .bt__slip, #show-first .bt__card { padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.5vw, 22px) 14px; }
  #show-first .bt__w { font-size: clamp(20px, 2.15vw, 36px); }
  #show-first .bt__leaks { margin-top: clamp(8px, 1vw, 16px); }
  #show-first .bt__leaks li { padding: clamp(2px, .4vw, 6px) 0; }
  #show-first .bt--clock .bt__dial { min-height: 0; }
  #show-first .bt__hrs { font-size: clamp(26px, 2.4vw, 38px); }
  #show-first .bt__st--72 { --ss: clamp(58px, 5.2vw, 78px); right: 12px; bottom: 12px; }

  /* desktop: the words on the left, the price large; the stamps stacked down the right edge */
  #show-first .bt__slip--inv { min-height: 0; container-type: normal; padding-bottom: 14px; padding-right: clamp(118px, 11vw, 176px); }
  #show-first .bt__st--cur { left: auto; top: 12px; bottom: auto; right: clamp(48px, 4.6vw, 70px); --ss: clamp(58px, 5.2vw, 80px); }
  #show-first .bt__st--inv { right: 10px; bottom: 10px; --ss: clamp(84px, 8.2vw, 128px); }
  #show-first .bt__amt { font-size: clamp(34px, 3.9vw, 66px); }
  #show-first .bt__no { margin-top: auto; }

  /* wide screens: the head lines up with the wall (both stop at 1560 px) */
  #show-first .show4__head { max-width: 1560px; margin-inline: auto; }
  .r5-open .show4__h { left: max(var(--gutter), calc((100% - 1560px) / 2)); right: max(var(--gutter), calc((100% - 1560px) / 2)); }
  .r5-open.show4 { padding-top: clamp(52px, 7vh, 80px); }
  .r5-open .show4__head { align-items: center; }
  .r5-open .show4__fr { grid-column: 1 / span 7; grid-row: 1; }
  .r5-open .show4__text { grid-column: 8 / -1; grid-row: 1; margin: 0; max-width: 30em; justify-self: end; }
  .r5-open .show4__stage { margin-top: 26px; }
  .r5-open .show4__b { padding-right: .4em; }

  .me4__clock { right: -60px; }
}

/* ═════════════════════ reduced motion / static: the wall is final; no layer hints ═════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #show-first .bt__in { transition: none; }
}
.is-reduced #show-first .bt, .is-static #show-first .bt { opacity: 1; }