/* =====================================================================
   CUTSCENE — WORK (gallery) + moving between pages
   Work: every film in a 3-across grid, no borders, title beneath.
   Opening the page, the thumbnails flicker in and out in a random order
   (like a projector finding its light) before settling as stills.
   Hovering a thumbnail enlarges it slightly and plays its preview.

   Moving between Home and Work: a splice. A slanted, see-through cut
   runs down the screen, then the two halves of the old page slide
   straight apart to the sides, revealing the new page beneath.
   ===================================================================== */

:root{
  --work-cols: 3;
  --work-max: 1320px;                  /* grid never wider than this        */
  --work-top: 150px;                   /* top of the page -> first row      */
  --work-col-gap: 40px;
  --work-row-gap: 44px;
  --work-ratio: 1.85;                  /* thumbnail shape                   */
  --work-title-size: 20px;
  --work-label-size: 11.5px;           /* category / role above each frame  */
  --work-hover-scale: 1.04;            /* hover: slightly bigger            */
  --work-reveal-dur: 1600ms;           /* fade (and the others): each thumbnail */
  --work-reveal-stagger: 140ms;        /* ...the next one starts after this  */
  --work-reveal-max: 1600ms;           /* ...last one starts by this at most */
  --work-bleed-spots: 5;               /* bleed: how many patches come up    */
  --work-bleed-soft: 55;               /* bleed: how soft their edges are (%) */
  --work-bleed-spread: .55;            /* bleed: 0 = patches together, higher =
                                          one after another                   */
  --work-print-soften: 0px;            /* print: optional softness that sharpens
                                          as it comes up (0 = off)          */
  /* the two-pass flash (Tune: "Thumbnails appear" → Flash) */
  --work-flash-fast: 145ms;             /* first flashes: a quick turn each  */
  --work-flash-slow: 240ms;            /* last flashes: a slower turn each  */
  --work-flash-curve: 1.8;             /* 1 = steady slow-down, higher = stays
                                          fast longer then slows late        */
  --work-flash-vary: .5;              /* random wobble on each turn (0 = none) */
  --work-flash-gap: 250ms;             /* pause between the two passes      */
  --work-flash-glow: 0ms;            /* the bright flash settling down    */
  --work-flash-bright: 1;              /* how bright the flash is (1 = none) */
  --work-flash-max: 2500ms;            /* the whole thing never runs longer */
  --work-flash-count: 9;               /* most thumbnails that flash one by one;
                                          with more on screen they land in
                                          small groups so the rhythm holds  */
  --work-caption-delay: 100ms;         /* words come in after the pictures  */
  --work-caption-stagger: 40ms;        /* ...one caption after another       */
  --work-flash-start: .8;              /* coming from Home: the flash starts when
                                          the splice is this far open        */

  --splice-cut: 260ms;                 /* the cut running down the screen   */
  --splice-open: 1000ms;               /* the halves sliding apart          */
}

/* ---- Which page is showing ---- */
.stage{ transition: opacity .45s ease; }
.app.view-work .stage{ visibility: hidden; pointer-events: none; }
.site-nav a[aria-current="page"]{ color: var(--fg); }
.app.work-scrolled .site-head::before{ opacity: 1; }

.work{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: var(--work-top) var(--gutter) 96px;
  transition: opacity .45s ease;
}
.work::-webkit-scrollbar{ display: none; }
.work[hidden]{ display: none; }
.app.is-playing .work{ opacity: 0; pointer-events: none; }

.work-grid{
  display: grid;
  grid-template-columns: repeat(var(--work-cols), minmax(0, 1fr));
  gap: var(--work-row-gap) var(--work-col-gap);
  max-width: var(--work-max);
  margin: 0 auto;
}

.w-item{
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-drag: none;
}
.w-labels{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  font-size: var(--work-label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.w-thumb{
  position: relative;
  aspect-ratio: var(--work-ratio);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.w-pic{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--frame-empty);
}
.w-pic img,
.w-pic video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.w-pic video{ opacity: 0; transition: opacity .45s ease; }
.w-pic video.is-ready{ opacity: 1; }
.work.is-waiting .w-pic{ opacity: 0; }

.work.is-settled .w-item:hover .w-thumb,
.work.is-settled .w-item:focus-visible .w-thumb{ transform: scale(var(--work-hover-scale)); }

.w-cap{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}
.w-names{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w-title{
  font-family: var(--font-display);
  font-size: var(--work-title-size);
  font-weight: var(--title-weight);
  font-stretch: var(--title-width);
  letter-spacing: var(--title-track);
  line-height: 1.1;
}
.w-sub{
  font-size: 11px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg-2);
}
.w-num{
  flex: none;
  font-size: 11px;
  letter-spacing: var(--label-track);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
/* ---- The words: letter by letter (css/base.css, js/words.js), labels
        first, then the title, then the subtitle ---- */
.w-title.wl, .w-sub.wl{ display: block; }
.w-item.is-in .wl-c{ transform: none; opacity: 1; }
/* coming back to the page: everything resets at once, nothing animates out */
.work.is-resetting *, .work.is-resetting *::before, .work.is-resetting *::after{ transition: none !important; }

/* ---- The splice between pages ---- */
.splice-half{
  position: fixed;
  inset: 0;
  z-index: 4;                          /* over the pages, under the header */
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  will-change: transform;
}
.splice-half > *{ pointer-events: none !important; }

/* ---- Tablets: two across ---- */
@media (max-width: 1100px) and (min-width: 761px){
  :root{ --work-cols: 2; }
}

/* ---- Phones: a contact sheet, two across ----
   Home already shows one film at a time; here a phone gets the overview:
   two frames per row (same frame shape as everywhere else, so stills are
   framed once), category and role above, title and number under, and the
   frame nearest the middle of the screen plays its preview as you scroll
   (js/work.js). */
@media (max-width: 760px){
  :root{
    --work-cols: 2;
    --work-top: 112px;
    --work-col-gap: 12px;
    --work-row-gap: 26px;
    --work-title-size: 14px;
    --work-label-size: 9px;
  }
  .w-labels{ padding-bottom: 6px; gap: 8px; letter-spacing: .07em; }
  .w-labels > *{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .w-cap{ padding-top: 8px; gap: 8px; align-items: flex-start; }
  .w-names{ gap: 4px; min-width: 0; }
  .w-title{ line-height: 1.12; }
  .w-sub{
    font-size: 9px;
    letter-spacing: .07em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .w-num{ font-size: 9px; letter-spacing: .07em; padding-top: 2px; }
}