/* Startbeeld van de geïnstalleerde app (v0.182, los bestand sinds v0.186). Klein en zonder variabelen, zodat het vóór de grote
   stylesheets kan laden; gebruikt door de app (index.html) en de home van de site (tools/bouw-site.mjs). De klasse
   html.pwa-start zet scripts/pwa-start.js. */
/* v0.182 (Stefan 23-10): startbeeld van de geïnstalleerde app. Navy met het logo in het midden, precies zoals de
   startafbeelding van iOS (assets/icons/start/, tools/pwa-startbeelden.mjs), zodat er geen wit of zwart scherm meer is:
   het logo ademt rustig (1,6 s, in-uit) en een dun streepje eronder loopt door (laden, lineair). Weg: 250 ms, versnellend.
   Bij een vastgelopen opstart verdwijnt het na 6 s vanzelf. Minder beweging: alleen het logo, vervagen in 150 ms. */
.pwa-startbeeld{display:none}
html.pwa-start .pwa-startbeeld{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#002E54;
  animation:pwa-start-weg .25s cubic-bezier(.4,0,1,1) 6s forwards}
html.pwa-start-weg .pwa-startbeeld{animation:pwa-start-weg .25s cubic-bezier(.4,0,1,1) forwards}
.pwa-startbeeld img{width:180px;height:auto;display:block;transform-origin:50% 50%}
.pwa-startbeeld i{position:absolute;left:50%;top:calc(50% + 86px);width:72px;height:2px;margin-left:-36px;border-radius:1px;background:rgba(255,255,255,.18);overflow:hidden}   /* onder het logo (180 × 116 px), dat zelf precies in het midden staat */
.pwa-startbeeld i::before{content:'';position:absolute;inset:0 auto 0 0;width:24px;border-radius:1px;background:#fff;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .pwa-startbeeld img{animation:pwa-adem 1.6s cubic-bezier(.4,0,.2,1) .2s infinite alternate}
  .pwa-startbeeld i::before{animation:pwa-laad 1.1s linear infinite}
  html.pwa-start-weg .pwa-startbeeld img{animation:pwa-start-groei .25s cubic-bezier(.4,0,1,1) forwards}
}
@media (prefers-reduced-motion:reduce){
  .pwa-startbeeld i{display:none}
  html.pwa-start-weg .pwa-startbeeld{animation-duration:.15s}
}
@keyframes pwa-adem{from{transform:scale(1)}to{transform:scale(1.04)}}
@keyframes pwa-laad{from{transform:translateX(-24px)}to{transform:translateX(72px)}}
@keyframes pwa-start-groei{to{transform:scale(1.06)}}
@keyframes pwa-start-weg{to{opacity:0;visibility:hidden}}
/* v0.255 (Stefan 1-11, verspringend logo): onder het startbeeld staat de pagina nog zonder de grote stylesheets. Die blijft
   onzichtbaar tot het startbeeld wegvaagt (dan is de CSS er), zodat niets zichtbaar verspringt en de verschuivingen niet meetellen;
   het logo krijgt zolang geen overgang en staat meteen op maat. Vangnet: na 6 s wordt alles hoe dan ook zichtbaar. */
html.pwa-start:not(.pwa-start-weg) body>:not(.pwa-startbeeld):not(.ocv):not(.ocv-overlay):not(#menuMobiel):not(#menuOverlay){visibility:hidden;animation:pwa-toon 0s 6s forwards}
html.pwa-start img{transition:none!important}
@keyframes pwa-toon{to{visibility:visible}}