/* animations.css */

/* Animación: expandir (de pequeño a tamaño normal con suavizado) */
    @keyframes expandir {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    }

    /* Clase reutilizable */
    .expandir {
    animation: expandir 0.6s ease-out forwards;
    }


/* des de a bajo */
    @keyframes deslizar-abajo {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
    }

    .deslizar-abajo {
    opacity: 0; /* oculto por defecto */
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
    }

    .deslizar-abajo.visible {
    animation: deslizar-abajo 0.8s ease-out forwards;
    transform-origin: center;
    }

    /* Si és un <p> o una .intro */
    .intro.deslizar-abajo {
    display: block;      /* evita que el translateY mogui tot el layout */
    margin: 0;       /* elimina marges que poden fer “botar” */
    }

/* ---------------------------------------- */
/* EFECTE HOVER GROG AMB TEXT ANIMAT        */
/* ---------------------------------------- */

/* ---------------------------------------- */
/* EFECTE HOVER GROG + TEXT CENTRAT FIXE    */
/* ---------------------------------------- */

/* Contenidor general */
.hover-overlay {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Capa groga translúcida */
.hover-overlay::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background-color: rgba(255, 213, 4, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Text que apareix al centre */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  opacity: 0;
  z-index: 2; /* molt important: per sobre de la capa groga */
  pointer-events: none; /* no bloqueja el hover */
  transition: opacity 0.4s ease;
}

.overlay-text p {
  margin: 0;
  font-size: 1rem;
  width: 130%;
  max-width: none;
  line-height: 1.2;
}

/* Efecte hover */
.hover-overlay:hover::after {
  opacity: 1;
}

.hover-overlay:hover .overlay-text {
  opacity: 1;
}

/* Efecte opcional de color en text o botons */
.hover-amarillo {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.hover-amarillo:hover {
  background-color: #FFD504;
  color: #000;
}



/* ==================== 
   Animació Volteadora
   ==================== */

.image {
  perspective: 800px;
}

.logo {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateY(0deg); /* posició inicial */
  transition: transform 1s ease-in-out;
}

/* quan entra en pantalla → flip cap a l’esquerra */
.logo.apareix {
  transform: rotateY(-180deg);
}