/* ---- logofilm (src/logo_film.py) ---- */
  .lf-intro { position:fixed; inset:0; z-index:90; background:#0b0c0c; display:none; }
  .lf-intro.on { display:block; }
  .lf-intro svg, .lf-top svg { width:100%; height:100%; display:block; }
  .lf-intro .lf-svgwrap { position:absolute; inset:0; transform-origin:0 0; transition:transform 1.5s cubic-bezier(.65,0,.25,1); }
  .lf-intro.fly .lf-svgwrap { will-change:transform; }
  .lf-vid { position:absolute; z-index:1; display:block; max-width:none; background:#0b0c0c; }
  .lf-vid.off { display:none; }
  .lf-intro.fly { background:transparent; transition:background .8s ease .7s; }
  .lf-intro.fly .lf-fade { opacity:0 !important; transition:opacity .25s ease; }
  .lf-intro.gone { opacity:0; transition:opacity .45s ease; pointer-events:none; }
  .lf-skip { position:absolute; right:24px; bottom:24px; z-index:2; font:600 14px "Geist", system-ui, sans-serif; color:#ded6c2; background:rgba(255,255,255,.06); border:0; border-radius:999px; padding:11px 18px; cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:opacity .4s ease; }
  .lf-skip:hover { background:rgba(255,255,255,.12); }
  .lf-intro.fly .lf-skip { opacity:0; }
  body.lf-playing { overflow:hidden; }
  body.lf-playing .site-nav .brand { opacity:0; }
  .site-nav .brand { transition:opacity .4s ease; }
  .lf-top { position:relative; height:100vh; min-height:560px; max-height:1100px; background:#0b0c0c; overflow:hidden; display:none; }
  body.film-top .lf-top { display:block; }
  .lf-cue { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); color:#a59e8c; font:500 13px "Geist", system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:opacity 1s ease; }
  .lf-cue.on { opacity:1; }
  .lf-cue::after { content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(#c9a84c, transparent); }
  /* overgangen 1 okt: het kopscript beslist al voor de eerste weergave of de intro komt (html.lf-pre), zodat de
     homepage niet eerst een seconde zichtbaar is; tot de film start alleen de donkere achtergrond */
  html.lf-pre .lf-intro { display:block; }
  html.lf-pre .lf-intro:not(.on) .lf-svgwrap, html.lf-pre .lf-intro:not(.on) .lf-skip { visibility:hidden; }
  html.lf-pre body { overflow:hidden; }
  html.lf-pre .site-nav .brand { opacity:0; }
  @media (prefers-reduced-motion: reduce) { .lf-intro { display:none !important; } }