/* ===================================================================== oz-beweging.css · koppen in beweging · ontwerpzaak.nl · versie 1 Hoort bij oz-beweging.js. Alleen inladen als er op minstens één niveau een nieuw effect aan staat. Alle klassen beginnen met bw-, zodat niets van site.css of oz-kop.css erop grijpt, en andersom. ===================================================================== */ /* Tot het script het overneemt: de koppen van een niveau met een effect even onzichtbaar, zodat ze niet eerst gewoon staan en dan verdwijnen. Vangnet: na 3 s altijd zichtbaar, ook als het script niet laadt. De klassen oz-bw-1/2/3 op zet de server. */ html.js.oz-bw-1 .held__stapel { visibility: hidden; animation: bw-vangnet-zicht 0s 3s forwards; } html.js.oz-bw-2 .kop2:not(.bw-los), html.js.oz-bw-3 .kop1:not(.bw-los) { opacity: 0; animation: bw-vangnet .01s 3s forwards; } @keyframes bw-vangnet { to { opacity: 1; } } @keyframes bw-vangnet-zicht { to { visibility: visible; } } /* de wisselende kop */ .bw-stapel { display: grid; transform-origin: 30% 60%; } .bw-zin { grid-area: 1 / 1; display: block; align-self: end; visibility: hidden; } .bw-zin.bw-actief { visibility: visible; } .bw-wgroep, .bw-blok, .bw-letters .bw-w, .bw-zin .bw-w { white-space: nowrap; } .bw-blok { display: inline-block; background: var(--magenta, #e5007d); color: #fff; padding: .02em .16em .07em; border-radius: .07em; } .bw-zin.bw-bloklos .bw-blok { background: transparent; } .bw-l.bw-uit { opacity: 0; } .bw-wacht { opacity: 0; } /* de laag boven alles, ook boven het menu, nooit klikbaar */ .bw-laag { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; contain: strict; } .bw-laag canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .bw-laag canvas[hidden] { display: none; } .bw-laaggroep { position: absolute; inset: 0; } .bw-vlieg { position: absolute; margin: 0; color: var(--inkt, #1f1a17); font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; transform-origin: 50% 50%; } .bw-vlieg > span { position: absolute; white-space: pre; } .bw-vlieg--blok { background: var(--magenta, #e5007d); color: #fff; } .bw-stip { position: absolute; background: var(--inkt, #1f1a17); } .bw-vlieger { position: absolute; left: 0; top: 0; color: var(--magenta, #e5007d); will-change: transform; } .bw-vlieger svg { display: block; width: 100%; height: auto; overflow: visible; } /* Wie minder beweging heeft ingesteld: alles meteen, niets verborgen. */ @media (prefers-reduced-motion: reduce) { html.js.oz-bw-1 .held__stapel { visibility: visible; animation: none; } html.js.oz-bw-2 .kop2, html.js.oz-bw-3 .kop1, .bw-wacht { opacity: 1 !important; animation: none; } .bw-laag { display: none; } } @media print { .bw-laag { display: none; } .bw-wacht, .bw-l.bw-uit { opacity: 1 !important; } }