/* =====================================================================
   Hero-logo — alleen geladen op de homepage.
   --------------------------------------------------------------------
   Animatie van het Katrien-Cambré logo: takken groeien, naam wordt
   geschreven door een pen, bloemen ontluiken, diamant verschijnt.
   De .ready class wordt door hero-logo.js gezet zodra de SVG ingeladen is.
   ===================================================================== */

.hero-logo-stage {
  --naam-color: #b8943a;     /* goud voor naam + accent */
  --tak-color: #b8943a;       /* goud voor takken */
  --ornament-color: #f5ede0;  /* zand voor bloemen + blaadjes */
  --diamant-color: #ffffff;   /* wit voor de diamant */
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1248.61 / 1080;
  max-height: 70vh;
}
.hero-logo-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(92, 61, 46, 0.08));
}

/* Outline-kopie van naam-paden — wordt geschreven door de pen */
.hero-logo-stage svg .write-path {
  fill: transparent;
  stroke: var(--naam-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero-logo-stage svg .filled-letter {
  fill: transparent;
  fill-rule: evenodd;
}
.hero-logo-stage svg #accent_op_é { fill: var(--naam-color); opacity: 0; }
.hero-logo-stage svg #puntje_op_i { fill: transparent; }
.hero-logo-stage svg #Tak,
.hero-logo-stage svg #Tak-2  { fill: transparent; }
.hero-logo-stage svg #Diamant { fill: transparent; }
.hero-logo-stage svg #Bloemen path { fill: transparent; }
.hero-logo-stage svg g[id^="Blaadjes"] path { fill: transparent; }

/* Animaties */
.hero-logo-stage.ready svg #K-outline,
.hero-logo-stage.ready svg #atrien-outline {
  animation: kc-write 2.2s ease-out 0.3s forwards,
             kc-outline-fade 0.5s ease-out 2.5s forwards;
}
.hero-logo-stage.ready svg #Cambré-2-outline {
  animation: kc-write 2.4s ease-out 2.3s forwards,
             kc-outline-fade 0.6s ease-out 4.7s forwards;
}
.hero-logo-stage.ready svg #K-filled,
.hero-logo-stage.ready svg #atrien-filled {
  animation: kc-letter-fill 0.8s ease-out 2.3s forwards;
}
.hero-logo-stage.ready svg #Cambré-2-filled {
  animation: kc-letter-fill 0.8s ease-out 4.5s forwards;
}
.hero-logo-stage.ready svg #puntje_op_i {
  transform-box: fill-box;
  transform-origin: center;
  animation: kc-dot-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.1s forwards;
}
.hero-logo-stage.ready svg #Tak {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: kc-grow-up 1.3s ease-out 3.5s forwards;
}
.hero-logo-stage.ready svg #Tak-2 {
  transform-box: fill-box;
  transform-origin: center top;
  animation: kc-grow-down 1.3s ease-out 3.9s forwards;
}
.hero-logo-stage.ready svg #Diamant {
  transform-box: fill-box;
  transform-origin: center;
  animation: kc-bloom-diamant 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 4.7s forwards;
}
.hero-logo-stage.ready svg #Bloemen path {
  transform-box: fill-box;
  transform-origin: center;
  animation: kc-bloom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.hero-logo-stage.ready svg #Bloemen path:nth-child(1) { animation-delay: 4.80s; }
.hero-logo-stage.ready svg #Bloemen path:nth-child(2) { animation-delay: 4.85s; }
.hero-logo-stage.ready svg #Bloemen path:nth-child(3) { animation-delay: 4.90s; }
.hero-logo-stage.ready svg #Bloemen path:nth-child(4) { animation-delay: 4.95s; }
.hero-logo-stage.ready svg #Bloemen path:nth-child(5) { animation-delay: 5.00s; }
.hero-logo-stage.ready svg g[id^="Blaadjes"] path {
  animation: kc-leaf-in 0.5s ease-out forwards;
}
.hero-logo-stage.ready svg #Blaadjes   path:nth-child(3n+1) { animation-delay: 5.20s; }
.hero-logo-stage.ready svg #Blaadjes   path:nth-child(3n+2) { animation-delay: 5.35s; }
.hero-logo-stage.ready svg #Blaadjes   path:nth-child(3n+3) { animation-delay: 5.50s; }
.hero-logo-stage.ready svg #Blaadjes-2 path:nth-child(3n+1) { animation-delay: 5.40s; }
.hero-logo-stage.ready svg #Blaadjes-2 path:nth-child(3n+2) { animation-delay: 5.55s; }
.hero-logo-stage.ready svg #Blaadjes-2 path:nth-child(3n+3) { animation-delay: 5.70s; }
.hero-logo-stage.ready svg #accent_op_é {
  transform-box: fill-box;
  transform-origin: center;
  animation: kc-accent-drop 1.0s cubic-bezier(0.34, 1.8, 0.5, 1.0) 6.4s forwards;
}
.hero-logo-stage.ready svg #Ornament_Cirkel {
  transform-box: fill-box;
  transform-origin: center;
  animation: kc-breathe 6s ease-in-out 7s infinite;
}

@keyframes kc-write           { to { stroke-dashoffset: 0; } }
@keyframes kc-outline-fade    { from { opacity: 1; } to { opacity: 0; } }
@keyframes kc-letter-fill     { from { fill: transparent; } to { fill: var(--naam-color); } }
@keyframes kc-dot-in {
  0%   { fill: transparent; opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { fill: var(--naam-color); opacity: 1; transform: scale(1); }
}
@keyframes kc-accent-drop {
  0%   { opacity: 0; transform: translate(-55px, 80px) rotate(-12deg) scale(0.5); }
  55%  { opacity: 1; transform: translate(8px, -12px) rotate(6deg) scale(1.2); }
  80%  { transform: translate(-2px, 3px) rotate(-2deg) scale(0.96); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}
@keyframes kc-grow-up         { 0% { fill: transparent; transform: scaleY(0); } 100% { fill: var(--tak-color); transform: scaleY(1); } }
@keyframes kc-grow-down       { 0% { fill: transparent; transform: scaleY(0); } 100% { fill: var(--tak-color); transform: scaleY(1); } }
@keyframes kc-bloom           { 0% { fill: transparent; transform: scale(0); } 100% { fill: var(--ornament-color); transform: scale(1); } }
@keyframes kc-bloom-diamant   { 0% { fill: transparent; transform: scale(0); } 100% { fill: var(--diamant-color); transform: scale(1); } }
@keyframes kc-leaf-in         { from { fill: transparent; } to { fill: var(--ornament-color); } }
@keyframes kc-breathe         { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }