svg {
    --animation-duration: 2s;
    --animation-iteration: infinite;
    --animation-timing: ease-in-out;
    --animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.st { 
    stroke: currentColor; 
    stroke-width: 3px !important; 
    fill: none; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
}

figure:has(svg){
    container-type: inline-size;

    svg{ width: 100%;
        height: 100%;
    }
}
@container (max-width: 100px) {
    .st {
        stroke-width: 4px !important;
    }
}

/* Logo */
/* Woordbeeld */
@keyframes rise-up {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}


/* --- Logo Animatie --- */
/* =========================================
   KEYFRAMES LOGO (Load & Hover gedupliceerd)
   ========================================= */

/* Woordbeeld */
@keyframes rise-up-load  { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes rise-up-hover { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* Beeldmerk Lijnen */
@keyframes bm2-outer-load  { 0% { stroke-dashoffset: 150; } 25%, 100% { stroke-dashoffset: 0; } }
@keyframes bm2-outer-hover { 0% { stroke-dashoffset: 150; } 25%, 100% { stroke-dashoffset: 0; } }

@keyframes bm2-center-load  { 0%, 25% { stroke-dashoffset: 150; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes bm2-center-hover { 0%, 25% { stroke-dashoffset: 150; } 50%, 100% { stroke-dashoffset: 0; } }

@keyframes bm2-inner-load  { 0%, 33% { stroke-dashoffset: -150; } 68%, 100% { stroke-dashoffset: 0; } }
@keyframes bm2-inner-hover { 0%, 33% { stroke-dashoffset: -150; } 68%, 100% { stroke-dashoffset: 0; } }

@keyframes bm2-hyphen-load  { 0%, 75% { stroke-dashoffset: -20; } 100% { stroke-dashoffset: 0; } }
@keyframes bm2-hyphen-hover { 0%, 75% { stroke-dashoffset: -20; } 100% { stroke-dashoffset: 0; } }


/* =========================================
   LOGO STYLING & TRIGGERS
   ========================================= */

#logo {
    animation-delay: 0.6s;

    .letter { transform: translateY(0); opacity: 1; fill: currentColor; stroke: none; }
    #logo-outer  { stroke-dasharray: 150; stroke-dashoffset: 0; }
    #logo-center { stroke-dasharray: 150; stroke-dashoffset: 0; }
    #logo-inner  { stroke-dasharray: 150; stroke-dashoffset: 0; }
    #logo-hyphen { stroke-dasharray:  20; stroke-dashoffset: 0; }

    /* ANIMATIES BIJ PAGINA LADEN 
    /* 'backwards' forceert dat ze onzichtbaar (0% status) starten tijdens de delay! */
    /* .letter { animation: rise-up-load 0.4s ease-out backwards; } */
    .letter:nth-child(1) { animation-delay: 0.10s; }
    .letter:nth-child(2) { animation-delay: 0.15s; }
    .letter:nth-child(3) { animation-delay: 0.20s; }
    .letter:nth-child(4) { animation-delay: 0.25s; }
    .letter:nth-child(5) { animation-delay: 0.30s; }
    .letter:nth-child(6) { animation-delay: 0.35s; }
    .letter:nth-child(7) { animation-delay: 0.40s; }
    .letter:nth-child(8) { animation-delay: 0.45s; }

    #logo-outer  { animation: bm2-outer-load  var(--animation-duration) ease-in-out backwards; }
    #logo-center { animation: bm2-center-load var(--animation-duration) ease-in-out backwards; }
    #logo-inner  { animation: bm2-inner-load  var(--animation-duration) ease-in-out backwards;  }
    #logo-hyphen { animation: bm2-hyphen-load var(--animation-duration) ease-in-out backwards;  }

    /* HERSTART ANIMATIES BIJ HOVER */
    /* Verandert uitsluitend de naam van de keyframes, waardoor de browser ze opnieuw activeert */
    /* &:hover .letter      { animation-name: rise-up-hover; } */
    &:hover {
        animation-delay: 0;      
        #logo-outer  { animation-name: bm2-outer-hover; }
        #logo-center { animation-name: bm2-center-hover; }
        #logo-inner  { animation-name: bm2-inner-hover; }
        #logo-hyphen { animation-name: bm2-hyphen-hover; }
}
}


#logo:not(:hover) #logo-outer,
#logo:not(:hover) #logo-center,
#logo:not(:hover) #logo-inner,
#logo:not(:hover) #logo-hyphen {
    animation: none;
}


.logo-foon{


}

/* --- Beeldmerk --- */

@keyframes draw-path { 0% { stroke-dashoffset: 150; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes draw-path { 0% { stroke-dashoffset: 150; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes draw-path-inverse { 0% { stroke-dashoffset: 150; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes draw-hyphen { 0% { stroke-dasharray: 0, 20; stroke-dashoffset: 10; } 50% { stroke-dasharray: 0, 20; stroke-dashoffset: 10; } 70%, 100% { stroke-dasharray: 20, 0; stroke-dashoffset: 0; } }

.wp-block-column:hover #beeldmerk, 
 #beeldmerk:hover {   
    .draw { animation: draw-path var(--animation-duration) var(--animation-timing) var(--animation-iteration); stroke-dasharray: 150; stroke-dashoffset: 150; }
    #inner.draw { animation: draw-path-inverse var(--animation-duration) var(--animation-timing) var(--animation-iteration); stroke-dasharray: 150; stroke-dashoffset: 0; }
    #hyphen { animation: draw-hyphen var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
}

/* Beeldmerk 2  */
@keyframes bm2-outer {
    0% { stroke-dashoffset: 150; }
    25%, 100% { stroke-dashoffset: 0; }
}
@keyframes bm2-center {
    0%, 25% { stroke-dashoffset: 150; }
    50%, 100% { stroke-dashoffset: 0; }
}
@keyframes bm2-inner {
    0%, 33% { stroke-dashoffset: -150; } 
    68%, 100% { stroke-dashoffset: 0; }
}
@keyframes bm2-hyphen {
    0%, 68% { stroke-dashoffset: -20; }
    78%, 100% { stroke-dashoffset: 0; }
}

#beeldmerk2{    --animation-duration: 3s; }

.wp-block-column:hover #beeldmerk2, 
#beeldmerk2:hover{
    #outer2 { animation: bm2-outer var(--animation-duration) ease-in-out var(--animation-iteration); stroke-dasharray: 150; }
    #center2 { animation: bm2-center var(--animation-duration) ease-in-out var(--animation-iteration); stroke-dasharray: 150; }
    #inner2 { animation: bm2-inner var(--animation-duration) ease-in-out var(--animation-iteration); stroke-dasharray: 150; }
    #hyphen2 { animation: bm2-hyphen var(--animation-duration) ease-in-out var(--animation-iteration); stroke-dasharray: 20; }
}


/* Beeldmerk 3 loader */
@keyframes bm3-outer {
    0% { stroke-dashoffset: 0; }
    25% { stroke-dashoffset: 124; } 

    50%, 100% { stroke-dashoffset: 248; } 

}
@keyframes bm3-center {
    0% { stroke-dashoffset: 0; }
    25% { stroke-dashoffset: 110; } 
    50%, 100% { stroke-dashoffset: 220; } 
}
@keyframes bm3-inner {
    0% { stroke-dashoffset: 0; }
    25% { stroke-dashoffset: -80; } 
    50%, 100% { stroke-dashoffset: -160; } 

}
@keyframes bm3-hyphen {
    0% { stroke-dashoffset: 0; }
    15% { stroke-dashoffset: 20; }
    30%, 100% { stroke-dashoffset: 40; }
}

.wp-block-column:hover #outer3, 
#beeldmerk3:hover #outer3 { animation: bm3-outer 3s ease-in-out infinite; stroke-dasharray: 124; }
.wp-block-column:hover #center3,  
#beeldmerk3:hover #center3 { animation: bm3-center 3s ease-in-out 1.3s infinite; stroke-dasharray: 110; }
.wp-block-column:hover #inner3, 
#beeldmerk3:hover #inner3 { animation: bm3-inner 3s ease-in-out 2.6s infinite; stroke-dasharray: 80; }
.wp-block-column:hover #hyphen3, 
#beeldmerk3:hover #hyphen3 { animation: bm3-hyphen 3s ease-in-out 3.8s infinite; stroke-dasharray: 20; }





/* --- Growth --- */
#growth {
    --animation-iteration: infinite;
    --animation-timing: ease-in-out;
    --animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  7%  { transform: rotate(-3deg); }
  15%  { transform: rotate(3deg); }
  22%  { transform: rotate(-2deg); }
  30%  { transform: rotate(2deg); }
  38%  { transform: rotate(-1deg); }
  45%  { transform: rotate(1deg); }
  50%, 100% { transform: rotate(0deg); }
}

@keyframes morph-leaf-left {
    0% { d: path("M36,69.6 C38.857,68.533 41.238,68.888 43.142,70.666 C45.047,72.444 46,74.044 46,75.466 C43.142,76.177 40.920,76.177 39.333,75.466 C37.746,74.755 36.634,72.8 36,69.6 Z");
    }
    40%, 100% { d: path("M22,60 C28,58 33,58.666 37,62 C41,65.333 43,68.333 43,71 C37,72.333 32.333,72.333 29,71 C25.666,69.666 23.333,66 22,60 Z"); }
}
@keyframes morph-leaf-right {
    0% { d: path("M63,69.6 C60.142,68.533 57.761,68.888 55.857,70.666 C53.952,72.444 53,74.044 53,75.466 C55.857,76.177 58.079,76.177 59.666,75.466 C61.253,74.755 62.365,72.8 63,69.6 Z"); }
    40%, 100% { d: path("M78,60 C72,58 67,58.666 63,62 C59,65.333 57,68.333 57,71 C63,72.333 67.666,72.333 71,71 C74.333,69.666 76.666,66 78,60 Z"); }
}
@keyframes morph-stem {
    0% { d: path("M50,65 C50,68.71 49.666,74.043 49,81"); }
    40%, 100% { d: path("M50,58 C50,63.333 49.666,71 49,81"); }
}
@keyframes morph-flower {
    0% { cy: 59px; r: 4px; }    
    40%, 100% { cy: 37px; r: 20px; }
}
@keyframes pop-dollar { 
    0%, 55% { opacity: 0; transform: scale(0); } 
    70%, 100% { opacity: 1; transform: scale(1); } 
}

 #dollar-sign { transform-box: fill-box; transform-origin: center; }


 .wp-block-column:hover #growth,
 #growth:hover {
    & #leaf-left { 
        transform-origin: right bottom;
        animation: morph-leaf-left var(--animation-duration) var(--animation-timing) var(--animation-iteration), wiggle var(--animation-duration) var(--animation-timing) var(--animation-iteration); 
      
        }
    & #leaf-right { 
        transform-origin: left bottom;
        animation: morph-leaf-right var(--animation-duration)  var(--animation-timing)var(--animation-iteration), 
        wiggle var(--animation-duration) var(--animation-timing) 0.2s var(--animation-iteration); 
        }
    & #stem { animation: morph-stem var(--animation-duration) var(--animation-timing) infinite; }
    & #flower { animation: morph-flower var(--animation-duration) var(--animation-timing) infinite; }
    & #dollar-sign { animation: pop-dollar var(--animation-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; }

  }


/* --- Winst --- */
@keyframes draw-profit { 0% { stroke-dashoffset: 45; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes move-arrow { 0% { transform: translate(35px, 46px); opacity: 1; } 50%, 100% { transform: translate(55px, 34.5px); opacity: 1; } }
#winst { 
    &:hover #line { animation: draw-profit var(--animation-duration) var(--animation-timing) var(--animation-iteration); stroke-dasharray: 45; stroke-dashoffset: 45; }
    &:hover #arrow-head { animation: move-arrow var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
}



/* --- Happy --- */

@keyframes smile-bounce {
    0% {
        d: path("M41,61 Q50,62 59,61"); 
        transform: translateY(4px);    
    }        
    80% { d: path("M41,61 Q50,76 59,61"); 
        transform: translateY(0px);    
    } /* Overshoot omlaag */
    100% { d: path("M41,61 Q50,71 59,61"); } /* Eindstand */
}

@keyframes sad-bounce {
    0% { d: path("M41,65 Q50,64 59,65"); }        /* Horizontaal */
    70% { d: path("M41,65 Q50,54 59,65"); } /* Overshoot omhoog */
    100% { d: path("M41,65 Q50,53 59,65"); } /* Eindstand */
}

@keyframes blink {
    0%, 90%, 96%, 100% { transform: scaleY(1); }
    93%, 98% { transform: scaleY(0.1); }
}

.wp-block-column:hover #happy,
#happy:hover{
    #mouth-happy { animation: smile-bounce 0.6s var(--animation-timing) forwards; }
    .eye { transform-origin: center; animation: blink 3s infinite; }
}


/* Deprecated hover */
.wp-block-column:hover #deprecated,
#deprecated:hover {
    #mouth-sad { animation: sad-bounce 0.6s ease-out forwards; }
    .eye { transform-origin: center; animation: blink 3s infinite; }
}
/* Trial */
@keyframes draw-dotted {
    0% { 
        transform: scaleX(0%);
        stroke-dasharray: 4 16;
    }
    60%, 100% {  
        transform:  scaleX(100%);
         stroke-dasharray: 0.8 6;
        }
    }

@keyframes move-arrow-head {
    0% { transform: translateX(-29px); }
    60%, 100% { transform: translateX(0); }
}

#trial {
    font-weight: 600;
    #dotted-line { stroke-dasharray: 0.8 6; }
    #arrow-head { transform: translateX(0); }

}

.wp-block-column:hover #trial,
#trial:hover{
    & #dotted-line { animation: draw-dotted var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
    & #arrow-head { animation: move-arrow-head var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
}

/* Reports */
@keyframes reports-grow {
    0% { stroke-dashoffset: 40; }
    80% { stroke-dashoffset: -4; } /* Lichte overshoot naar boven */
    100% { stroke-dashoffset: 0; }
}
#reports {
    .bar { stroke-dasharray: 40; stroke-dashoffset: 0; } /* Basis = zichtbaar */
    
    &:hover .bar,
    .wp-block-column:hover & .bar {
        stroke-dashoffset: 40; /* Start leeg op hover */
        animation: reports-grow 1s ease-out forwards; 
    }
    
    &:hover #left,
    .wp-block-column:hover & #left { animation-delay: 0s; }
    &:hover #b2,
    .wp-block-column:hover & #b2 { animation-delay: 0.1s; }
    &:hover #b3,
    .wp-block-column:hover & #b3 { animation-delay: 0.2s; }
    &:hover #b4,
    .wp-block-column:hover & #b4 { animation-delay: 0.3s; }
    &:hover #b5,
    .wp-block-column:hover & #b5 { animation-delay: 0.4s; }
    &:hover #b6,
    .wp-block-column:hover & #b6 { animation-delay: 0.5s; }
    &:hover #right,
    .wp-block-column:hover & #right { animation-delay: 0.6s; }
}


/* --- Fruits --- */
@keyframes bounce-fruit {
            0% { transform: translateY(22px); }
            25% { transform: translateY(-4px); opacity: 1; }
            40% { transform: translateY(2px); opacity: 1; }
            50%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes leaf-wave {
    0%, 40%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(0deg); }
}

.wp-block-column:hover #fruits,
#fruits:hover {
    & .fruit-front-wrap { animation: bounce-fruit var(--animation-duration) ease-in-out infinite; }
    & .fruit-back-wrap { animation: bounce-fruit var(--animation-duration) ease-in-out infinite; animation-delay: 0.15s; }

    & .leaves-front {
        transform-origin: 14.8px 10px; 
        animation: leaf-wave var(--animation-duration) ease-in-out infinite;
    }
    & .leaves-back {
        transform-origin: 10.7px 7.5px; 
        animation: leaf-wave var(--animation-duration) ease-in-out infinite;
        animation-delay: 0.15s;
    }
}


/* --- Cloud --- */
@keyframes float-up { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-6px); } }
@keyframes float-down { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(6px); } }
#cloud {  
    stroke: currentColor; 
    &:hover #arrow-up { animation: float-up var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
    &:hover #arrow-down { animation: float-down var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
}

/* --- no-connecton --- */
#no-connection{
    &:hover #sign { animation: float-down var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
}


/* ---Gloves --- */
    @keyframes dance-front { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(8deg); } }
    @keyframes dance-back { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-8deg); } }
#gloves {
  
    /* .glove { transform-box: fill-box; transform-origin: bottom center; }
    &:hover #glove-front { animation: dance-front var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
    &:hover #glove-back { animation: dance-back var(--animation-duration) var(--animation-timing) var(--animation-iteration); } */
}



/* Fair */
@keyframes seesaw {
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}
@keyframes scale-left {
    0% { transform: translateY(4px); }
    100% { transform: translateY(-4px); }
}
@keyframes scale-right {
    0% { transform: translateY(-4px); }
    100% { transform: translateY(4px); }
}


#fair {
    --animation-duration: .8s;
    #dwars { transform-origin: 49px 28.5px; }
}

.wp-block-column:hover #fair,
#fair:hover {
    
    & #dwars { animation: seesaw var(--animation-duration) var(--animation-timing) var(--animation-iteration) alternate; }
    & #schaal-links { animation: scale-left var(--animation-duration) var(--animation-timing) var(--animation-iteration) alternate; }
    & #schaal-rechts { animation: scale-right var(--animation-duration) var(--animation-timing) var(--animation-iteration) alternate;}
}


/* --- Analyse --- */
@keyframes inspect { 
    0%, 100% { transform: translate(0, 0) rotate(0deg); } 
    50% { transform: translate(-15px, -5px) rotate(-15deg); } }
    

    .wp-block-column:hover #analyse,
    #analyse:hover {

        #search-tool,
        #mask-search-tool { 
            transform-origin: 17.9px 17.9px; 
            animation: inspect var(--animation-duration) ease-in-out infinite; 
        }

}

/* --- Filtering --- */

.wp-block-column:hover #filtering,
#filtering {
    @keyframes slide1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
    @keyframes slide2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-15px); } }
    @keyframes slide3 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
    
    & #knob1 { animation: slide1 var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
    & #knob2 { animation: slide2 calc(var(--animation-duration) * 1.2) var(--animation-timing) var(--animation-iteration); }
    & #knob3 { animation: slide3 calc(var(--animation-duration) * 0.8) var(--animation-timing) var(--animation-iteration); }
}