/*
Theme Name:      Sabores del Ecuador
Version:         0.1
Description:     Dit is een thema speciaal gemaakt voor de website Sabores del Ecuador
Author:          Ashley Diaz Parraga
Tags:            full-site-editing
*/

.gerecht-titel {
    color: #8C4113;
}
.gerecht-titel:hover {
    color: rgba(140, 65, 19, 0.57);
}

.header-menu li {
    position: relative;
    transition: all 0.25s ease;
}

.header-menu li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: rgba(0, 0, 0, 0.74);
    transition: width 0.25s ease;
}

.header-menu li:hover {
    color: white;
    transform: translateY(-2px);
}

.header-menu li:hover::after {
    width: 100%;
}


.nav-footer li {
    position: relative;
    transition: all 0.25s ease;
}
.nav-footer li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: rgba(0, 0, 0, 0.74);
    transition: width 0.25s ease;
}

.nav-footer li:hover {
    color: white;
    transform: translateY(-2px);
}

.nav-footer li:hover::after {
    width: 100%;
}

.wp-embed-aspect-16-9.wp-has-aspect-ratio {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(1);
  animation: fadeInBase 1s ease forwards;
    
}

/* basis fade-in */
@keyframes fadeInBase {
  to {
    opacity: 1;
  }
}

/* licht-sweep overlay effect */
.wp-embed-aspect-16-9.wp-has-aspect-ratio::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: lightSweep 1.4s ease forwards;
  pointer-events: none;
  z-index: 2;
}

@keyframes lightSweep {
  0% {
    left: -120%;
  }
  100% {
    left: 140%;
  }
}

.wp-embed-aspect-16-9.wp-has-aspect-ratio:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}



.afbeelding-muts {
  display: inline-block;
  transform-origin: bottom center; /* 🔥 onderkant blijft vast */
  animation: mutsWiggle 4.5s ease-in-out infinite;
}

/* rustige sway rond de basis */
@keyframes mutsWiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}





/* De toestand wanneer je er met de muis overheen zweeft (hover) */

.gerecht-afbeelding img:hover {
	opacity: .8;
}


.gerecht-afbeelding:hover {
	transform: translateY(-8px); /* beweegt het blok 8px omhoog */
/* 	border: 5px solid red; */
}


.gerecht-titel:hover {
  opacity: .5;
}