/*

==============================================================

Pssst... 👀  
How nice of you to take a peek in here!  
Not everyone takes the time to look under the hood.  
So here’s a well-deserved digital high five 🖐  

Got a briefing, spotted a bug, or just want to say hi?  
Let’s connect!
Mail: mauro.vanderflaes@gmail.com
Instagram: @maurovanderflaes
Linkedin: Mauro Van der Flaes

==============================================================

*/

/*
================
Element fade-in Animation
================
*/

.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in.open {
    opacity: 1;
    transform: translateY(0);
}

/*
================
Opening Home video wrapper Animation
================
*/

.video-portrait-wrapper {
    overflow: hidden;
    border-radius: 100px 100px 0 0;
    /* altijd zichtbaar */
    position: relative;
    clip-path: inset(0 50% 0 50% round 100px 100px 0 0);
    transition: clip-path 1.8s cubic-bezier(0.77, 0, 0.175, 1);
}


.video-portrait-wrapper.open {
    clip-path: inset(0 0 0 0 round 100px 100px 0 0);
}

.video-portrait-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-controls {
    opacity: 0;
    transition: opacity 0.8s ease-out 1.5s;
}

.video-portrait-wrapper.open .video-controls {
    opacity: 1;
}

/*
================
Logo revealing Animation
================
*/

.logo {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    transition: 
        opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.logo.open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*
================
Home arrow hover down bouncing Animation
================
*/

.checkout:hover img {
  animation: arrow-bounce-down 0.6s ease-in-out infinite;
}

@keyframes arrow-bounce-down {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

/*
================
Workpieces Animation
================
*/

.video-portrait-wrapper-work,
.video-portrait-wrapper-allwork {
    overflow: hidden;
    position: relative;
    clip-path: inset(0 0 100% 0 round 10% / 5% 0%);
    transition: clip-path 1.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.video-portrait-wrapper-work.open,
.video-portrait-wrapper-allwork.open {
    clip-path: inset(0 0 0 0 round 10% / 5% 0%);
}

.video-portrait-wrapper-work img,
.video-portrait-wrapper-allwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.video-portrait-wrapper-work:hover img,
.video-portrait-wrapper-allwork img:hover {
    transform: scale(1.05);
}

/*
================
Work arrow hover side bouncing Animation
================
*/

.seework:hover img {
  animation: arrow-bounce-down 0.6s ease-in-out infinite;
}

@keyframes arrow-bounce-side {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}


/*
================
Service box reveal Animation
================
*/

.service-box {
  /* Add these properties to your existing .service-box */
  clip-path: inset(0 50% 0 50% round 0 50px 0 50px);
  transition: clip-path 1.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.service-box.open {
  clip-path: inset(0 0 0 0 round 0 20px 0 20px);
}

/*
================
Service box opening Animation
================
*/

.service-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              padding-top 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
  padding-top: 0;
}

.service-box.active .service-content {
  max-height: 2000px; /* Large enough for content, animates smoothly */
  margin-top: 0;
  padding-top: 4%;
}

/*
================
Service toggle hover Animation
================
*/

@keyframes toggle-bounce-rotate {
  0%, 70%, 100% { transform: rotate(0deg); }
  35%           { transform: rotate(22.5deg); }
}

@keyframes toggle-bounce-rotate-active {
  0%, 70%, 100% { transform: rotate(45deg); }
  35%           { transform: rotate(22.5deg); }
}

.service-toggle:hover .plus-icon {
  animation: toggle-bounce-rotate 1.2s ease-in-out infinite;
}

/* Bounce animation for the cross (active) state */
.service-toggle.active:hover .plus-icon {
  animation: toggle-bounce-rotate-active 1.2s ease-in-out infinite;
}

/*
================
About wrapper Animation
================
*/

.about-wrapper {
    z-index: 2;
    border-radius: 20% 20% 0% 0%;
    clip-path: inset(0 50% 0 50% round 20% 20% 0% 0%);
    transition: clip-path 1.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.about-wrapper.open {
    clip-path: inset(0 0 0 0 round 20% 20% 0% 0%);
}

/*
================
Floating award Animation
================
*/

#award {
  visibility: hidden; /* Volledig verborgen */
  opacity: 0;
  transform: translateY(20px); /* Start iets naar beneden */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0s;
  animation: none; /* Geen animatie in de beginstaat */
}

/* Award fade-in EN floating tegelijk */
#award.fade-in-and-float {
  visibility: visible; /* Zichtbaar maken */
  opacity: 1;
  transform: translateY(0px);
  animation: float 3s ease-in-out infinite;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-50px);
        /* omhoog bewegen */
    }
    100% {
        transform: translateY(0px);
    }
}

/*
================
Peeking panda Animation
================
*/

#panda {
  display: block; /* Zichtbaar maken */
  transform: translateX(-100%);
  /* volledig links buiten scherm */
  z-index: 1;
  /* achter #ik */
  opacity: 0; /* Volledig onzichtbaar */
  animation: pandaPeekX 8s ease-in-out infinite;
  animation-play-state: paused; /* Start gepauzeerd */
}

@keyframes pandaPeekX {
  0%, 50%, 100% {
    transform: translateX(-100%); /* volledig verborgen */
  }
  20% {
    transform: translateX(-40%); /* langzaam piept tevoorschijn */
  }
  70% {
    transform: translateX(0%); /* snel volledig zichtbaar */
  }
  80% {
    transform: translateX(0%); /* lang blijven piepen */
  }
  90% {
    transform: translateX(-100%); /* weer verdwijnen */
  }
}

/* Panda animatie starten */
#panda.start-animation {
  opacity: 1; /* Zichtbaar maken */
  animation-play-state: running;
}

/*
================
Socials hover Animation
================
*/

.socials a {
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover state */
.socials a:hover {
  color: var(--AntiqueRed);
  transform: translateX(5px) scale(1.05);
}

.socials a:hover::after {
  width: 100%;
}