Tarjetas e imagenes

.float-animation {
    animation: float 4s infinite;
}
#bott {
  --pulse-scale: 1.045;
  --pulse-speed: 2.8s;

  animation: bott-pulse var(--pulse-speed) ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

#bott:hover {
  animation-duration: 2.2s;
}

#bott:active {
  transform: scale(0.98);
}

@keyframes bott-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--pulse-scale));
  }
  100% {
    transform: scale(1);
  }
}



/* Flotación más notable para #imma */
#imma {
  --float-speed: 9s;     /* un poco más rápido para acentuar */
  --float-amp-x: 14px;   /* antes 6px */
  --float-amp-y: 20px;   /* antes 8px */
  --float-rot: 0.8deg;   /* antes 0.35deg */
  animation: imma-float var(--float-speed) ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
  display: inline-block;
}

/* Pausa al hover (opcional) */
#imma:hover { animation-play-state: paused; }

@keyframes imma-float {
  0%   { transform: translate3d(0, 0, 0) rotate(0); }
  20%  { transform: translate3d(var(--float-amp-x), calc(var(--float-amp-y) * -0.6), 0) rotate(calc(var(--float-rot) * -1)); }
  40%  { transform: translate3d(calc(var(--float-amp-x) * -0.8), calc(var(--float-amp-y) * 0.7), 0) rotate(calc(var(--float-rot) * 0.6)); }
  60%  { transform: translate3d(calc(var(--float-amp-x) * 0.9), var(--float-amp-y), 0) rotate(0); }
  80%  { transform: translate3d(calc(var(--float-amp-x) * -0.6), calc(var(--float-amp-y) * -0.5), 0) rotate(calc(var(--float-rot) * 0.7)); }
  100% { transform: translate3d(0, 0, 0) rotate(0); }
}

/* Motion reducido */
@media (prefers-reduced-motion: reduce) {
  #imma { animation: none !important; }
}

/* Movimiento suave para #tarjee (sin cambios visuales de estilo) */
#tarjee {
  transition: transform .28s ease;
  transform: translateZ(0); /* activa GPU sin afectar estilos */
  will-change: transform;
}

/* Hover: levanta y escala sutil */
#tarjee:hover {
  transform: translateY(-8px) scale(1.02);
}

/* Accesible al teclado (mismo efecto que hover) */
#tarjee:focus-visible {
  transform: translateY(-8px) scale(1.02);
}

/* Click: pequeña compresión para feedback */
#tarjee:active {
  transform: translateY(-2px) scale(0.99);
}

/* Respeto a usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce) {
  #tarjee,
  #tarjee:hover,
  #tarjee:focus-visible,
  #tarjee:active {
    transform: none !important;
    transition: none !important;
  }
}