/* ============================================================
   projects.css - the Projects page. Loads after core.css.

   One row per project: the reading side on the left, the film on
   the right, the same way round every time so the eye learns where
   to look. The film does not play in the row - the row is a poster
   with a way in. Pressing it opens the film at the size it was made
   for, over a dark ground, and nothing else on the page moves.
   ============================================================ */

/* Every frame a film sits in is cut the same way: a slight round, the
   same in the list as in the strip beneath the open film. */
:root{--r-film:8px}

/* ---------- the list ------------------------------------------ */
.plist{list-style:none;margin:var(--f30-52) 0 0;padding:0}
.pitem{padding:var(--f30-52) 0;border-top:1px solid var(--rule)}
.pitem:first-child{border-top:0}

@media(min-width:900px){
  /* The reading on the left, the film on the right, the same way round
     every time so the eye learns where to look. The film takes the wider
     track - it carries the detail, the copy carries the sentence - and
     the two meet on a shared centre line. */
  .pitem{
    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:var(--f34-72);align-items:center;
  }
  .pcopy{grid-column:1;grid-row:1}
  .pvideo{grid-column:2;grid-row:1}
}

/* ---------- the reading side ---------------------------------- */
.pnum{
  margin:0;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.08em;color:var(--ink-3);
}
.pitem h3{
  margin:var(--s12) 0 var(--s8);
  display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;
  font-size:var(--t-title);font-weight:600;letter-spacing:-.015em;line-height:1.1;
  text-wrap:balance;
}
/* The newest of the seven is marked beside its name: outlined in the
   accent rather than filled, and set at label size so a heading three
   times as large does not drag it along. */
.pnew{
  display:inline-flex;align-items:center;align-self:center;
  padding:3px 11px;border:1px solid var(--ember);border-radius:999px;
  font-family:var(--mono);font-size:var(--t-label);font-weight:650;
  line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember);white-space:nowrap;
}
.pmeta{margin:0 0 var(--s16);font-size:var(--t-label);line-height:1.5;color:var(--ink-3)}
.pdesc{margin:0;max-width:46ch;font-size:var(--t-body-s);line-height:1.65;color:var(--ink-2)}
/* The way in. It is the one line on the row that is plainly a link, so
   it carries the accent from the start rather than waiting for a pointer;
   the rule under it thickens on hover, which is all the movement it needs. */
.pcase{margin:var(--s16) 0 0;font-size:var(--t-label)}
.pcase a{
  color:var(--ember);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.28em;
  text-decoration-color:color-mix(in srgb,var(--ember) 42%,transparent);
  transition:text-decoration-color var(--dur-2,.22s) ease,
             text-decoration-thickness var(--dur-2,.22s) ease;
}
.pcase a:hover,.pcase a:focus-visible{
  text-decoration-color:var(--ember);
  text-decoration-thickness:2px;
}
.pcase a span{display:inline-block;transition:transform var(--dur-2,.22s) ease}
.pcase a:hover span{transform:translateX(3px)}

/* ---------- the poster ---------------------------------------- */
/* Every film opens on the same card: the project's name, set large on a
   near-white ground. A heavy veil is drawn over it, so what the cover
   carries is the press, not a second reading of the name - the film
   starts here, one press from full size. */
.pvideo{margin-top:var(--f22-32)}
@media(min-width:900px){.pvideo{margin-top:0}}

.pplay{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border:1px solid var(--rule);border-radius:var(--r-film);
  background:var(--sunk);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.pplay img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pplay::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,6,9,.84) 0%, rgba(5,6,9,.87) 55%, rgba(5,6,9,.90) 100%);
  transition:opacity var(--dur-2) var(--ease);
}
.pplay:hover,.pplay:focus-visible{border-color:var(--ember)}
/* On approach the veil thins: the card brightens under the cursor
   instead of anything sliding about. */
@media(hover:hover){.pplay:hover::after,.pplay:focus-visible::after{opacity:.90}}

/* Bottom left, where a caption would sit: the disc and, beside it, how
   long the film runs. The card behind is held well back - the project's
   name is already set in the column to the left, so the still is a
   ground, not a second place to read. */
/* The way in sits at the foot of the still: at rest a small disc and the
   running time, no more than a caption. Rest on the picture and the two
   become one object - a capsule opens out of the disc, frosted over
   whatever the film is doing behind it, and says what pressing will do.
   The time steps aside for the sentence; only one of them is ever out. */
.pplay-ui{
  position:absolute;z-index:2;
  left:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);right:auto;top:auto;
  display:flex;flex-direction:row;align-items:center;gap:0;
  padding:5px;border-radius:999px;
  background:rgba(9,10,13,0);border:1px solid transparent;
  pointer-events:none;
  transition:background var(--dur-3) var(--ease-head),
             border-color var(--dur-3) var(--ease-head),
             padding var(--dur-3) var(--ease-head),
             box-shadow var(--dur-3) var(--ease-head);
}
.pplay-dot{
  flex:0 0 auto;position:relative;display:grid;place-items:center;
  width:clamp(28px,2.3vw,34px);aspect-ratio:1;border-radius:50%;
  background:#fff;color:#0b0c10;
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.pplay-dot::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);opacity:.6;
  transition:inset var(--dur-3) var(--ease),opacity var(--dur-3) var(--ease);
}
/* The triangle is set a hair right of centre, because its own weight
   sits left - and it stays there. */
.pplay-dot svg{width:42%;height:auto;fill:currentColor;transform:translateX(7%)}

/* Both labels live in the capsule and take turns. A closed one is cut to
   nothing, padding included, so the capsule is only ever as wide as the
   words actually showing. */
.pplay-txt,.pplay-cta{
  overflow:hidden;white-space:nowrap;
  font-size:var(--t-label);font-weight:650;letter-spacing:.06em;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45);
  transition:max-width var(--dur-3) var(--ease-head),
             opacity var(--dur-2) var(--ease-head),
             padding var(--dur-3) var(--ease-head);
}
.pplay-txt{max-width:14em;opacity:1;padding-left:var(--s12)}
.pplay-cta{max-width:0;opacity:0;padding-left:0}

@media(hover:hover){
  .pplay:hover .pplay-ui,.pplay:focus-visible .pplay-ui{
    background:rgba(9,10,13,.58);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    padding:5px var(--s16) 5px 5px;
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  }
  .pplay:hover .pplay-txt,.pplay:focus-visible .pplay-txt{max-width:0;opacity:0;padding-left:0}
  .pplay:hover .pplay-cta,.pplay:focus-visible .pplay-cta{max-width:20em;opacity:1;padding-left:var(--s12)}
  .pplay:hover .pplay-dot,.pplay:focus-visible .pplay-dot{
    transform:scale(1.06);box-shadow:0 10px 26px rgba(0,0,0,.4);
  }
  .pplay:hover .pplay-dot::before{inset:-13px;opacity:0}
}

/* ---------- the film, opened ---------------------------------- */
/* ---------- the viewer -----------------------------------------
   The window becomes the viewer: the film centred in it, the controls
   in the top corner, an arrow at each edge, and the other six films
   along the foot. The browser's own control bar is not used - it brings
   a menu of things this page has no business offering. */
.vbox{
  width:100vw;max-width:100vw;height:100vh;max-height:100vh;
  margin:0;padding:0;border:0;background:transparent;color:var(--ink);
  overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;
  /* the ground is on the dialog as well as behind it: a backdrop alone
     leaves the page legible underneath, and the page is not the point */
  background:rgba(4,5,7,.97);
}
/* A dialog is hidden until it opens - but only because the browser sets
   display:none on it, and the line above takes that back. Put it back. */
.vbox:not([open]){display:none}
.vbox::backdrop{background:rgba(4,5,7,.97)}
.vbox-stage{
  display:grid;place-items:center;min-height:0;
  padding:clamp(60px,9vh,96px) clamp(60px,6vw,110px) var(--s16);
}
.vbox-frame{position:relative;display:flex;flex-direction:column;max-width:100%;max-height:100%}
.vbox-video{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  background:#000;border-radius:var(--r);
}

/* what is playing, and which of how many */
.vbox-head{
  position:absolute;top:clamp(14px,2.2vh,26px);left:clamp(16px,2.4vw,34px);
  display:flex;align-items:baseline;gap:var(--s12);flex-wrap:wrap;
  max-width:min(52vw,560px);pointer-events:none;
}
.vbox-count{
  margin:0;font-family:var(--mono);font-size:var(--t-label);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--ink);
}
.vbox-name{margin:0;font-size:var(--t-label);letter-spacing:.02em;color:var(--ink-3)}

/* ---------- the controls, in the corner ----------------------- */
.vbox-tools{
  position:absolute;top:clamp(10px,1.8vh,22px);right:clamp(16px,2.4vw,34px);
  display:flex;align-items:center;gap:var(--s8);
}
.vbox-btn{
  display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:50%;background:transparent;color:var(--ink-2);
  cursor:pointer;transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.vbox-btn svg{width:22px;height:22px;fill:currentColor}
.vbox-btn svg .w{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.vbox-btn:hover,.vbox-btn:focus-visible{background:rgba(255,255,255,.1);color:var(--ink)}
.vbox-close:hover,.vbox-close:focus-visible{background:var(--ember);color:#0b0c10}

.vbox-speed{
  display:inline-flex;align-items:stretch;overflow:hidden;
  border:1px solid var(--edge);border-radius:999px;margin:0 var(--s4);
}
.vbox-rate{
  min-height:36px;padding:0 var(--s12);
  border:0;background:transparent;color:var(--ink-3);
  font:inherit;font-size:var(--t-label);font-variant-numeric:tabular-nums;cursor:pointer;
  transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.vbox-rate + .vbox-rate{border-left:1px solid var(--edge)}
.vbox-rate:hover{color:var(--ink)}
.vbox-rate[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}

/* ---------- one film either side ------------------------------ */
.vbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:52px;height:52px;
  border:1px solid var(--rule-2);border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease);
}
.vbox-arrow svg{width:24px;height:24px}
.vbox-arrow svg .w{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vbox-arrow:hover,.vbox-arrow:focus-visible{background:rgba(255,255,255,.14);color:var(--ink);border-color:var(--ink-3)}
.vbox-prev{left:clamp(8px,1.6vw,26px)}
.vbox-next{right:clamp(8px,1.6vw,26px)}

/* ---------- how far in ---------------------------------------- */
.vbox-seek{
  position:relative;height:3px;margin-top:var(--s8);
  background:rgba(255,255,255,.14);border-radius:999px;cursor:pointer;
}
.vbox-seek::before{content:"";position:absolute;inset:-10px 0}  /* a line is thin; the target is not */
.vbox-seek i{
  display:block;height:100%;width:0;border-radius:999px;background:var(--ember);
}

/* ---------- the other films -----------------------------------
   Six stills along the foot, each a card in its own right: rounded,
   lifted off the ground by its shadow, and held back under a veil so a
   bright screenshot does not shout over the film being watched. The one
   playing steps forward out of the row - the veil lifts, the card rises
   and takes a ring in the accent. */
.vbox-strip{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,1.1vw,18px);
  padding:var(--s16) var(--s20) clamp(18px,3vh,34px);
  overflow-x:auto;overflow-y:visible;scrollbar-width:none;
}
.vbox-strip::-webkit-scrollbar{display:none}
.vbox-thumb{
  position:relative;flex:0 0 auto;
  width:clamp(86px,9.2vw,138px);padding:0;cursor:pointer;
  border:0;border-radius:var(--r-film);
  background:var(--sunk);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  transition:transform var(--dur-3) var(--ease-head),
             box-shadow var(--dur-3) var(--ease-head);
}
.vbox-thumb img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:inherit;
}
/* the veil, and the hairline that keeps a pale still off the ground */
.vbox-thumb::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgba(4,5,7,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background var(--dur-3) var(--ease-head),
             box-shadow var(--dur-3) var(--ease-head);
}
.vbox-thumb:hover,.vbox-thumb:focus-visible{transform:translateY(-3px)}
.vbox-thumb:hover::after,.vbox-thumb:focus-visible::after{background:rgba(4,5,7,.26)}
.vbox-thumb[aria-selected="true"]{
  transform:translateY(-10px);
  box-shadow:0 18px 38px rgba(0,0,0,.62),0 0 0 2px var(--ember);
}
.vbox-thumb[aria-selected="true"]::after{background:transparent;box-shadow:none}

/* A film of this size takes a moment to arrive, and a still frame with
   nothing happening on it reads as broken. A ring turns over the poster
   until there is enough of the film to show. */
.vbox-frame::after{
  content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);border-top-color:var(--ember);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.vbox.is-waiting .vbox-frame::after{opacity:1;animation:vbox-spin .9s linear infinite}
@keyframes vbox-spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){
  .vbox.is-waiting .vbox-frame::after{animation:none}
}

/* Full screen: the frame becomes the screen, so the film may use all of
   it and the line of progress sits along the foot. */
.vbox-frame:fullscreen{width:100%;height:100%;justify-content:center;background:#000}
.vbox-frame:fullscreen .vbox-video{max-height:100%;max-width:100%;border-radius:0}
.vbox-frame:fullscreen .vbox-seek{position:absolute;left:0;right:0;bottom:0;margin:0}

@media(max-width:700px){
  /* On a phone the side padding was costing the film a third of the
     width for arrows that can sit over it instead. */
  .vbox-stage{padding:clamp(52px,8vh,68px) var(--s8) var(--s8)}
  .vbox-arrow{width:40px;height:40px}
  .vbox-head{max-width:46vw}
  .vbox-name{display:none}
  .vbox-strip{justify-content:flex-start}
  .vbox-tools{gap:2px;right:var(--s8);top:var(--s8)}
  .vbox-btn{width:40px;height:40px}
  .vbox-btn svg{width:20px;height:20px}
  .vbox-rate{padding:0 var(--s8);font-size:11px}
}
/* Narrower still: the speed group is the one thing a reader can do
   without, and full screen is the one they cannot. */
@media(max-width:420px){
  .vbox-speed{display:none}
}
@media(prefers-reduced-motion:reduce){
  .vbox-btn,.vbox-arrow,.vbox-thumb,.vbox-thumb::after,.vbox-rate{transition:none}
  .vbox-thumb:hover,.vbox-thumb[aria-selected="true"]{transform:none}
}

/* Without JavaScript the poster is a link to the file, and that is a
   working answer - so nothing here hides it. */
@media(prefers-reduced-motion:reduce){
  .pplay::after,.pplay-ui,.pplay-dot,.pplay-dot::before,
  .pplay-txt,.pplay-cta{transition:none}
  .pplay:hover .pplay-dot{transform:none}
}

/* ---------- arriving ------------------------------------------
   A row does not slide in, it comes into focus: a little under size,
   out of focus and out of sight, settling into all three at once over
   the better part of a second. Slower than the page's other reveals on
   purpose - this is the part of the page meant to be looked at. */
html.js .rev.rise{opacity:0;transform:scale(.9);filter:blur(10px)}
html.js .rev.rise.in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .72s var(--ease-head),
             transform .96s var(--ease-head),
             filter .72s var(--ease-head);
}
@media (prefers-reduced-motion:reduce){
  html.js .rev.rise,html.js .rev.rise.in{
    opacity:1;transform:none;filter:none;transition:none;
  }
}

/* ---------- the film under the pointer -------------------------
   Resting on a row starts the film where it starts, without sound, the
   way a thumbnail previews itself. It is a look, not a viewing: it runs
   the opening and returns to it, and leaves the moment the pointer
   does. The poster stays underneath, so nothing moves in the layout and
   a frame is always on screen. */
.pprev{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .45s var(--ease);
}
.pplay.is-previewing .pprev{opacity:1}
/* the veil lifts a little while the film is running, and the control
   with the length stays put - it is the way in, not decoration */
.pplay.is-previewing::after{opacity:.46}

/* Original graphic covers already carry their own contrast and safe area. */
.pplay[data-poster-art]::after{
  background:linear-gradient(180deg,transparent 65%,var(--canvas));
  opacity:.22;
}
.pplay[data-poster-art]:hover::after,
.pplay[data-poster-art]:focus-visible::after{opacity:.22}
.pplay[data-poster-art].is-previewing::after{opacity:.46}