/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 14 2026 | 22:50:12 */
/* ==========================================================
   BeeldBlinkers – fraai inladen van label, titel en intro (alle pagina's)
   Plaats in: Weergave → Customizer → Extra CSS
   Hoort bij intro-animatie.js
   ========================================================== */

/* verborgen tot het script start (voorkomt eerst even 'kale' tekst) */
.fade-in-text,
:where(.header-work-detail-text) p.text-big,
:where(.header-work-detail-text) h1,
:where(.header-work-detail .work-info-meta) p {
  opacity: 0;
  /* vangnet: zonder script verschijnt alles na 2 s alsnog */
  animation: bb-intro-fallback .6s ease 2s forwards;
}
@keyframes bb-intro-fallback { to { opacity: 1; } }

.bb-intro-ready .fade-in-text { animation: none; opacity: 1; }

/* labelregel en losse alinea's: zacht omhoog faden */
.bb-intro-ready .fade-in-text.bb-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--bb-d, 0s);
}
.bb-intro-ready .fade-in-text.bb-fade.bb-go { opacity: 1; transform: none; }

/* titel: woord voor woord uit een masker omhoog */
.bb-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;   /* ruimte voor letters als g, j, p */
  margin-bottom: -.12em;
}
.bb-wi {
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--bb-d, 0s);
  will-change: transform;
}
.bb-go .bb-wi { transform: none; }

/* het blink-sterretje */
.bb-blink {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -1px;
  margin-right: 6px;
  color: inherit;
  transform: scale(0) rotate(-180deg);
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--bb-d, 0s);
}
.bb-blink path { fill: currentColor; }
.bb-go .bb-blink,
.bb-blink.bb-go { transform: none; }

/* af en toe een knipoog: draaien + oplichten */
.bb-blink.bb-idle { animation: bb-blink-idle 5s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes bb-blink-idle {
  0%, 78%, 100% { transform: none; }
  84%           { transform: scale(1.55) rotate(45deg); }
  90%           { transform: scale(.8) rotate(90deg); }
  95%           { transform: scale(1.05) rotate(90deg); }
}
/* en ook bij hover over de labelregel */
.fade-in-text:hover .bb-blink { animation: bb-blink-hover .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bb-blink-hover {
  0%   { transform: none; }
  50%  { transform: scale(1.6) rotate(90deg); }
  100% { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-text, .bb-intro-ready .fade-in-text.bb-fade { opacity: 1; transform: none; animation: none; transition: none; }
  .bb-wi, .bb-blink { transform: none !important; transition: none; animation: none !important; }
}