/* intro.css, de intro met het logo (27 oktober 2026): de AI ademt uit. Hoort bij intro.js; werkt zonder de demo.
   De klassen op <html> (gezet door de regel in de head, anders door intro.js):
   - intro-speelt: het podium is van het merk. Wat de opening laat zien (kop, regel, formulier, aanwijzing) draagt
     data-na-intro en wacht; de opening start haar onthulling op het event dailight:intro-klaar.
   - intro-balk-wacht: de balk is er nog niet (intro.js laat hem vanaf 1,38 s opkomen).
   - intro-golf: het raster van de pagina staat uit, want de golf tekent het zelf; daarna neemt het raster het over.
   Een vangnet: als intro.js niet laadt, komt alles 3 s na de eerste verf vanzelf terug. Dat vangnet hangt aan de klasse
   intro-wacht-js (ook uit de regel in de head), die intro.js weghaalt zodra hij start; vanaf dan bewaakt intro.js het
   einde zelf, zodat een trage verbinding de opening nooit midden in de intro laat verschijnen. Zonder JavaScript bestaat geen van
   deze klassen en staat de pagina gewoon. */

/* De houder heeft zelf geen positie (geen eigen stapel): het ene doek ligt onder de inhoud, net boven het veld, het
   andere boven de balk. Beide laten elke klik door. */
.merk-intro { position: static; }
.merk-intro canvas { position: fixed; left: 0; top: 0; display: block; max-width: none; pointer-events: none; transition: opacity 0.22s ease; }
.merk-intro .mi-grond { z-index: -1; }
.merk-intro .mi-merk { z-index: 70; }
.merk-intro.mi-uit canvas { opacity: 0; }
.merk-intro.mi-snel canvas { transition-duration: 0.18s; }

/* Wat wacht is onzichtbaar én niet aan te klikken of te focussen (visibility), zodat een klik tijdens de intro alleen
   overslaat en nooit een knop raakt die je nog niet ziet. */
.intro-speelt [data-na-intro] { opacity: 0; visibility: hidden; }
.intro-geen-tik [data-na-intro] { pointer-events: none; }
.intro-balk-wacht .balk { opacity: 0; }
.intro-balk-wacht .balk .pill { pointer-events: none; }
/* Het raster en de wolk van blauwe puntjes ontstaan pas waar de golf langskomt. Met visibility (en niet opacity), omdat
   veld.js de dekking van de wolk zelf inline zet; bij de overname komen ze in 0,22 s op naar de dekking die ze hebben. */
.intro-golf .veld-raster, .intro-golf .veld-wolk { visibility: hidden; }
.intro-raster-terug .veld-raster, .intro-raster-terug .veld-wolk { animation: mi-in 0.22s ease both; }
@keyframes mi-in { from { opacity: 0; } }
.intro-wacht-js.intro-speelt [data-na-intro], .intro-wacht-js.intro-balk-wacht .balk, .intro-wacht-js.intro-golf .veld-raster,
.intro-wacht-js.intro-golf .veld-wolk { animation: mi-vangnet 0.3s ease 3s forwards; }
@keyframes mi-vangnet { to { opacity: 1; visibility: visible; } }