/* =====================================================================
   DE AANKONDIGINGSBALK, voor de homepage en de gidspagina's.

   Dit is dezelfde balk als op /plan, maar die pagina houdt met opzet
   zijn eigen kopie in het bestand zelf: daar komen de verkopen vandaan
   en die willen we niet laten afhangen van een extra bestand. Wijzig je
   hier iets aan het gedrag of de teksten, kijk dan of plan.html mee
   moet. De teksten staan bovenin aankondiging.js.

   De balk scrolt gewoon mee. De vastgezette menubalk eronder blijft
   doen wat hij deed.

   Zonder JavaScript blijft <section id="aank"> leeg, en dan is hij
   verborgen (#aank:empty). De pagina ziet er dan uit als vroeger. Met
   JavaScript vult aankondiging.js de balk voordat er iets getekend is,
   dus er verspringt niets.

   LET OP: verander je dit bestand of aankondiging.js, verhoog dan ?v= in
   alle dertig pagina's, anders blijven bezoekers tot vier uur de oude
   versie zien. Het scriptje aankondiging-versie.py in de projectmap
   (03 KANTOOR, 01 Pupwijzer, plan-2-0) laat zien welke pagina's nog op
   het oude nummer staan en kan ze in een keer ophogen.
   ===================================================================== */

#aank:empty{display:none}

/* Hier is de balk NIET vast: hij scrolt gewoon mee weg. Alleen op /plan
   blijft hij bovenaan staan, en die pagina heeft zijn eigen kopie. De
   vastgezette menubalk van deze pagina's blijft dus doen wat hij deed. */
.aank{position:relative;overflow:hidden;color:#F4EEDD;z-index:1;
  background:linear-gradient(100deg,#18402F 0%,#1F5A41 52%,#18402F 100%);
  /* Opvulling, marge en rand allemaal zelf zetten: de homepage heeft een
     eigen regel section{padding:56px 0;border-bottom:...} en die zou deze
     balk anders uit elkaar trekken. [GEMETEN] */
  padding:env(safe-area-inset-top,0px) 0 0;margin:0;border:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* Hoogte. De langste boodschap meet op een regel 579 px bij 13 px letter.
   Bij 320 px is er na de pijltjes 240 px per regel over, dus die heeft
   daar drie regels nodig. Daarom op mobiel een vaste 56 px en vanaf
   560 px 44 px. De hoogte staat per breedte vast en de slides liggen
   absoluut over elkaar, dus er verspringt nooit iets. [GEMETEN] */
.aank-binnen{position:relative;z-index:1;height:56px;display:flex;align-items:center;justify-content:center}
@media (min-width:560px){.aank-binnen{height:44px}}

.aank-lijst{position:absolute;left:40px;right:40px;top:0;bottom:0;margin:0;padding:0;list-style:none}
.aank-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;
  margin:0;padding:3px 0;text-align:center;pointer-events:none;color:#F4EEDD;
  font-size:clamp(11px,3.1vw,13px);font-weight:600;line-height:1.3;letter-spacing:.01em;
  word-spacing:normal;text-wrap:balance;opacity:0;visibility:visible;transform:translateY(105%);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.aank-slide.nu{opacity:1;transform:none}
.aank-slide.weg{opacity:0;transform:translateY(-105%)}
.aank-poot{flex:none;width:15px;height:15px;color:#E6D8BC;opacity:.9}

.aank-pijl{display:flex;align-items:center;justify-content:center;
  position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;z-index:2;
  background:none;border:0;padding:0;cursor:pointer;color:#F4EEDD;opacity:.55}
.aank-pijl.vorige{left:0}
.aank-pijl.volgende{right:0}
.aank-pijl:hover{opacity:.95}
.aank-pijl:focus-visible{outline:2px solid #E6D8BC;outline-offset:-4px;border-radius:10px;opacity:1}
.aank-pijl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* De voortgangslijn is tegelijk de klok: zijn animatie duurt 6,5 s en
   zijn einde zet de volgende boodschap. Pauzeren is daarom niets meer
   dan die animatie stilzetten. */
.aank-voortgang{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;
  background:rgba(230,216,188,.14)}
.aank-voortgang i{display:block;height:100%;background:rgba(230,216,188,.55);
  transform:scaleX(0);transform-origin:left}
.aank.loopt .aank-voortgang i{animation:aank-vul 6.5s linear forwards}
@keyframes aank-vul{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Een heel langzaam schuivend verloop, 22 s per ronde. Het staat op een
   laag die twee keer zo breed is en opschuift: een transform kost de
   telefoon veel minder dan het verschuiven van een achtergrond, en bij
   -50% sluit het naadloos aan. */
.aank::before{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;z-index:0;
  pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,#18402F 0%,#1F5A41 26%,#18402F 50%,#1F5A41 76%,#18402F 100%);
  animation:aank-verloop 22s linear infinite}
@keyframes aank-verloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* En een hele langzame, zachte glans, 14 s per ronde. */
.aank::after{content:"";position:absolute;top:0;bottom:0;left:-26%;width:26%;z-index:2;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(244,238,221,.10),transparent);
  animation:aank-glans 14s ease-in-out 3s infinite}
@keyframes aank-glans{0%{transform:translateX(0)}45%,100%{transform:translateX(500%)}}

@media (prefers-reduced-motion:reduce){
  .aank::before{animation:none}
  .aank::after{display:none}
  .aank-slide{transition:none;transform:none}
  .aank-slide.weg{display:none}
  .aank-voortgang{display:none}
}