/* V28 — beweging en vormgevingsafwerking (3 november 2026).
   Laag bovenop v04.css, v12-3.css en ui-contract.css. Verandert geen media, films of teksten.
   De homepage-animatie (#home-animation) wordt hier niet aangeraakt. */

:root {
  --v28-ease: cubic-bezier(.22, .61, .36, 1);      /* zacht uitlopend, zoals een camera die tot rust komt */
  --v28-shutter: cubic-bezier(.76, 0, .24, 1);     /* sluiter: snel open, rustig tot stilstand */
  --v28-reveal: 1000ms;
  --v28-header-h: 108px;
}
@media (max-width: 1050px) { :root { --v28-header-h: 88px; } }

/* ---------- 1. Leesbaarheid: bediening en kleine tekst iets groter (was 11–13px) ---------- */
.desktop-nav { font-size: 15px; }
.button { font-size: 15px; }
.text-link { font-size: 15px; }
.menu-button, .close-menu { font-size: 15px; }
.yt-status, .yt-fallback, .yt-close { font-size: 14px; }
.film-date, .film-bottom p, .film-preview small { font-size: 14px; }
.portrait-slot figcaption, figcaption { font-size: 14px; }
.preview-detail, .download-note, .footer, .home-footer p, .company-ids, .footer-preview { font-size: 14px; }
.eyebrow { font-size: 12px; }
@media (max-width: 760px) {
  .button { font-size: 15px; }
  .eyebrow { font-size: 12px; }
}

/* ---------- 2. Kop blijft bereikbaar: vast bovenaan, schuift weg bij omlaag scrollen ---------- */
.header, .header-solid, .header:not(.header-solid) {
  position: sticky; inset: auto; top: 0; z-index: 30;
  background: var(--paper); color: var(--ink);
  transition: transform 480ms var(--v28-ease), box-shadow 200ms ease;
}
.header.v28-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 24px -22px rgba(36, 40, 32, .45); }
.header.v28-hidden { transform: translateY(-100%); }
html { scroll-padding-top: calc(var(--v28-header-h) + 16px); }

/* ---------- 3. Interne links: rechte pijl (→) in plaats van "naar buiten"-pijl (↗) ---------- */
.v28-arrow-in { transition: transform 280ms var(--v28-ease); }
a:hover .v28-arrow-in, a:focus-visible .v28-arrow-in { transform: translateX(4px); }
/* v04 schuift elke pijl schuin; voor interne links alleen horizontaal */
.text-link:hover span:has(.v28-arrow-in), .date-link:hover span:has(.v28-arrow-in) { transform: none; }

/* ---------- 4. Films: rustige hover op de poster ---------- */
.yt-stage > img { transition: transform 900ms var(--v28-ease), filter 900ms var(--v28-ease); }
@media (hover: hover) {
  .yt-film:hover .yt-stage > img { transform: scale(1.025); }
  .yt-film:hover .play-disc { transform: scale(1.08); }
}
.yt-stage iframe { animation: v28-fade 600ms var(--v28-ease) both; }
@keyframes v28-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 5. Beelden openen als een sluiter wanneer ze in beeld komen (eenmalig) ----------
   Alleen met werkend script (klasse v28-motion op <html>) en zonder "minder beweging".
   Zonder script of bij reduced motion staat alles direct volledig in beeld. */
@media (prefers-reduced-motion: no-preference) {
  .v28-motion [data-v28-reveal] {
    clip-path: inset(12% 0 12% 0);
    transition: clip-path var(--v28-reveal) var(--v28-shutter);
  }
  .v28-motion [data-v28-reveal] img {
    transform: scale(1.06);
    transition: transform calc(var(--v28-reveal) * 1.5) var(--v28-shutter);
  }
  .v28-motion [data-v28-reveal].v28-in { clip-path: inset(0 0 0 0); }
  .v28-motion [data-v28-reveal].v28-in img { transform: scale(1); }
  /* De afspeelknop verschijnt pas als het beeld open is */
  .v28-motion [data-v28-reveal] .yt-start { opacity: 0; transition: opacity 400ms ease 750ms; }
  .v28-motion [data-v28-reveal].v28-in .yt-start { opacity: 1; }
  /* Na de onthulling neemt de gewone hover het weer over */
  .v28-motion [data-v28-reveal].v28-done img { transition: transform 900ms var(--v28-ease), filter 900ms var(--v28-ease); }
}

/* ---------- 6. Paginawissel: korte overvloei, de kop blijft staan ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .header { view-transition-name: v28-kop; }
  ::view-transition-old(root) { animation: 220ms var(--v28-ease) both v28-uit; }
  ::view-transition-new(root) { animation: 360ms var(--v28-ease) 60ms both v28-in; }
  ::view-transition-group(v28-kop) { animation: none; }
}
@keyframes v28-uit { to { opacity: 0; } }
@keyframes v28-in { from { opacity: 0; } }

/* ---------- Minder beweging: alles direct ---------- */
@media (prefers-reduced-motion: reduce) {
  .header { transition: none; }
  .header.v28-hidden { transform: none; }
  .yt-stage > img, .v28-arrow-in { transition: none; }
  .yt-stage iframe { animation: none; }
}

/* ---------- 7. Journal zonder (nog) eigen beeld: tekst krijgt de volle, rustige kolom ---------- */
.journal-list article:not(:has(.still__img, picture, img)) { grid-template-columns: minmax(0, 46rem); }