/* ===========================================================================
   niko-poster · THE PROJECT PANEL
   ---------------------------------------------------------------------------
   Niko, 14 Oct: "In a panel that opens when you press the cloud line on the
   left, which opens and has both thumbnails inside... And there's an animation
   for the panel opening, and the page kind of moves around."

   Two projects (Cloudline and the IRC) own more than one film but want ONE
   plate on the page. Their plate is a trigger; every film lives in the panel.

   WHAT THIS FILE OWNS, and what it does not: the panel's own paint and its two
   animations. The engine (scrollcraft.css) is untouched, and so is every
   existing theme rule in ground-ink.css — the panel reads the same tokens the
   sheet reads (--sc-ink, --sc-accent, --sc-canvas, --sc-font-*), so it inherits
   the ground it was opened from instead of declaring a second palette.

   THE PAGE MOVES, and it moves with GPU properties only. `main` takes a
   translate + scale and a dim; nothing animates width, height, top or left, so
   the open costs no layout. The transform is applied to <main> rather than to
   <body> because <dialog> in the top layer is NOT a child of main — pushing a
   common ancestor would push the panel with it.
   ========================================================================= */

/* -------------------------------------------------------------- the trigger */

/* THE CREDIT-LINE CUE. The page's credit lines are the smallest type on it, so
   the cue is set in that same small-caps and marked only by the accent and a
   rule under it — a button that looks like a button would be the loudest thing
   in a column of printed type. */
.pcue {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--sc-accent);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  transition: border-color 160ms var(--vf-ease, ease), color 160ms var(--vf-ease, ease);
}
.pcue:hover { border-bottom-color: var(--sc-accent); }
.pcue:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* THE PLATE TRIGGER. Same printed-plate rest state as a .vframe__pic, so the
   reader cannot tell a trigger plate from a player plate until they read its
   cue — which is the point: both are "a film you can get to from here". */
.pplatebtn {
  position: relative;
  width: 100%;
  min-width: 0;
}
.pplatebtn__open {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 1.7778);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: color-mix(in oklab, var(--sc-ink) 8%, transparent);
  cursor: pointer;
}
.pplatebtn__open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pplatebtn__open:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* The cue sits ON the plate the way .vframe__meta does, in the same small-caps,
   so the plate announces that it holds more than one film.

   LEFT, NOT CENTRED, and it was centring that was wrong: the IRC plate is a
   logo lock-up whose own word COMMITTEE runs across the bottom centre, and a
   centred cue landed straight on it (lab/reorder2/proof/after-irc-mobile.png,
   first pass). Pinned left it sits in the plate's own dead corner on both
   plates, which is where .vframe__meta puts a film's name too. */
.pplatebtn__cue {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1.6em 0.7em 0.42em;
  font-family: var(--sc-font-ui, inherit);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: #F4EFE6;
  background: linear-gradient(to top, rgb(8 7 6 / 0.82), rgb(8 7 6 / 0));
}

/* ------------------------------------------------------------- the panel */

/* THE PANEL IS A LIT SHEET, and it restates its roles the way .sheet--close-lit
   does — for the identical reason that file documents: the page's ground is
   ink, so --sc-ink resolves to the BONE that is legible on dark. Inheriting it
   onto the panel's own bone sheet painted bone-on-bone and every word in here
   vanished (measured: lab/reorder2/proof/panel-open-desktop.png, first pass).
   A light subtree on this page has to say its own ink out loud.

   The accent is #9E2A16, the 6.21:1-on-bone stop — NOT #E8613F, which is the
   on-dark one. ground-ink.css documents getting that backwards as the exact
   failure mode, so the panel takes the close's lit values verbatim. */
.panel {
  --sc-ink: #121110;
  --sc-ink-soft: #4A443C;
  --sc-accent: #9E2A16;
  --sc-accent-ink: #EFE9DD;
  --sc-canvas: #E2D9C8;

  width: min(68rem, 94vw);
  max-height: 88svh;
  padding: 0;
  border: 0;
  background: #E2D9C8;
  color: #121110;
  box-shadow: 0 2rem 5rem rgb(8 7 6 / 0.42);
  overflow: hidden;
}
/* The facades inside the panel are the page's own markup, and their meta bar is
   painted for a dark sheet. On the lit panel they keep their own dark plate, so
   nothing in here needs re-inking except the panel's own type. */
.panel .vframe__name, .panel .vframe__dur { color: #F4EFE6; }
.panel::backdrop { background: rgb(8 7 6 / 0.62); }

.panel__sheet {
  display: flex;
  flex-direction: column;
  max-height: 88svh;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.8rem) clamp(1rem, 2.6vw, 2.2rem) 0.6rem;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent);
}
.panel__title {
  margin: 0;
  font-family: var(--sc-font-display, inherit);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.panel__close {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
  color: var(--sc-ink);
  font-family: var(--sc-font-ui, inherit);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5em 0.9em;
  cursor: pointer;
  flex: none;
}
.panel__close:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.panel__close:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

.panel__body {
  padding: clamp(0.9rem, 2.4vw, 1.6rem) clamp(1rem, 2.6vw, 2.2rem) clamp(1.2rem, 3vw, 2.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel__no {
  margin: 0 0 0.5rem;
  font-family: var(--sc-font-ui, inherit);
  font-size: 0.64rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 62%, transparent);
}
.panel__claim {
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
  max-width: 44rem;
  font-family: var(--sc-font-text, inherit);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.45;
}

/* TWO FILMS SIDE BY SIDE on a desk, stacked on a phone. */
.panel__films {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
@media (max-width: 760px) { .panel__films { grid-template-columns: 1fr; } }

.panel__film { margin: 0; min-width: 0; }
.panel__film figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0.6rem;
}
.panel__fname {
  font-family: var(--sc-font-ui, inherit);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.panel__fcred {
  font-family: var(--sc-font-ui, inherit);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 58%, transparent);
}

/* ---------------------------------------------------------- the animation */

/* THE PANEL ARRIVES FROM ITS PLATE. panel.js measures the trigger and writes
   --px/--py (the plate's centre, relative to the panel's own centre) and --ps
   (the plate's width as a fraction of the panel's), so the open is a real
   movement from the thing that was pressed rather than a generic zoom.
   Transform and opacity only. */
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 0.86)); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes panel-bd {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.panel[open] { animation: panel-in 450ms cubic-bezier(0.16, 0.84, 0.3, 1) both; }
.panel[open]::backdrop { animation: panel-bd 450ms cubic-bezier(0.16, 0.84, 0.3, 1) both; }

/* Closing reverses it. The class is added by panel.js, which waits for the
   animation to finish before calling close() so the reverse is actually seen. */
.panel.is-closing { animation: panel-in 300ms cubic-bezier(0.4, 0, 0.9, 0.5) reverse both; }
.panel.is-closing::backdrop { animation: panel-bd 300ms cubic-bezier(0.4, 0, 0.9, 0.5) reverse both; }

/* THE PAGE MOVES. A few percent back and aside, plus a dim. Transform and
   opacity only (F-005): both stay on the compositor; a filter would not. The
   ink body shows through the dimmed main, which reads as the page receding. */
main {
  transition: transform 450ms cubic-bezier(0.16, 0.84, 0.3, 1),
              opacity 450ms cubic-bezier(0.16, 0.84, 0.3, 1);
  transform-origin: 50% 40%;
}
html.panel-open main {
  transform: translate3d(-2.5%, 0, 0) scale(0.965);
  opacity: 0.62;
}

/* The page behind must not scroll while the panel holds the reader. */
html.panel-open { overflow: hidden; }

/* ------------------------------------------------------------ the phone */

/* On a phone the panel is a full-screen sheet: a centred dialog with a backdrop
   is a desktop object, and at 390px the two films need the whole width. */
@media (max-width: 760px) {
  .panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 100svh;
    height: 100svh;
    margin: 0;
    inset: 0;
  }
  .panel__sheet { max-height: 100svh; height: 100svh; }
  /* A full-screen sheet has nothing to travel from, so it rises instead. */
  .panel[open] { animation-name: panel-sheet-in; }
  @keyframes panel-sheet-in {
    from { opacity: 0; transform: translate3d(0, 4%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  /* The page behind a full-screen sheet is not visible, so it does not move. */
  html.panel-open main { transform: none; opacity: 1; }
}

/* --------------------------------------------------------- reduced motion */

/* "Under prefers-reduced-motion: no transform animation, the panel appears, the
   page does not move." Stated last so it wins on every width. */
@media (prefers-reduced-motion: reduce) {
  .panel[open],
  .panel[open]::backdrop,
  .panel.is-closing,
  .panel.is-closing::backdrop { animation: none; }
  main { transition: none; }
  html.panel-open main { transform: none; opacity: 1; }
}