/* De binnenkomst: het logo en de bal (js/intro.js). intro-bezig staat op
   html zolang hij loopt; het script in de kop van index.html zet de klasse al
   voor het eerste beeld, zodat het logo in de kop nooit even te zien is. */

/* Tijdens de binnenkomst is de kop leeg: het grote logo vliegt straks naar
   zijn plek, de knoppen komen daarna terug. */
.kop-binnen > :not(.kop-logo) { transition: opacity 0.3s var(--uit), visibility 0s; }
.intro-bezig .kop-logo img { opacity: 0; }
/* Onzichtbaar en ook niet te tikken of met Tab te bereiken */
.intro-bezig .kop-binnen > :not(.kop-logo) { opacity: 0; visibility: hidden; transition: none; }
/* Het vliegende logo landt precies op het logo in de kop: dat staat er dan
   meteen, zonder in te faden. */
.kop-logo img { transition: opacity 0.2s var(--uit); }
.intro-loopt .kop-logo img { transition: none; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}
.intro-doek { position: absolute; inset: 0; width: 100%; height: 100%; }

.intro-logo {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 0.35s var(--uit);
}
.intro-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro-logo-in .intro-logo { opacity: 1; }
/* Op het hoogste punt is de streep compleet en licht het logo kort op. */
.intro-logo-flits svg { animation: intro-flits 0.5s ease-out; }
@keyframes intro-flits {
  0% { filter: drop-shadow(0 0 0 rgba(74, 149, 242, 0)); }
  30% { filter: drop-shadow(0 0 18px rgba(120, 180, 255, 0.95)) brightness(1.35); }
  100% { filter: drop-shadow(0 0 0 rgba(74, 149, 242, 0)); }
}

.intro-bal {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 8, 20, 0.45));
}
.intro-bal-zichtbaar { opacity: 1; }

/* De klap op de borst: een ring die snel uitdijt en vervaagt. */
.intro-klap {
  position: absolute;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: intro-klap 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes intro-klap {
  from { scale: 0.25; opacity: 1; border-width: 4px; }
  to { scale: 1.5; opacity: 0; border-width: 1px; }
}

/* Zonder 3D-shirt raakt de bal het platte shirt: dat zwaait aan de haak
   (boven de kraag, op 12 procent van de hoogte van het shirt) en dempt uit. */
.intro-plat-geraakt > .shirt {
  transform-origin: 50% -12%;
  animation: intro-plat-geraakt 1.4s cubic-bezier(0.25, 0.6, 0.35, 1);
}
@keyframes intro-plat-geraakt {
  0% { rotate: 0deg; }
  12% { rotate: -9deg; }
  34% { rotate: 5deg; }
  56% { rotate: -2.5deg; }
  78% { rotate: 1deg; }
  100% { rotate: 0deg; }
}