/* ----------------------- */
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a0a1a;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

/* Enlaces */
a {
  color: white;
  position: relative;
  z-index: 10;
}

/* ----------------------- */
/* Ondas verticales laterales */
.bg-layer {
  position: absolute;
  top: 0;
  width: 10vw;
  height: 100%;

  /* Fondo infinito */
  background-repeat: repeat-y;
  background-size: contain;

  pointer-events: none;
}

/* Lado izquierdo */
.bg-layer.left {
  left: 0;
  background-position: left top;
}

/* Lado derecho */
.bg-layer.right {
  right: 0;
  transform: scaleX(-1); 
  background-position: left top;
}

.layer1 { 
  opacity: 0.6;
  animation: moveBg 25s linear infinite; 
}

.layer2 { 
  opacity: 1;
  animation: moveBg 18s linear infinite; 
}

.layer3 { 
  opacity: 1;
  animation: moveBg 12s linear infinite; 
}

@keyframes moveBg {
  from { background-position-y: -2160px; }
  to { background-position-y: 2160px; } 
}

/* ----------------------- */
/* Contenedor principal */
.main-container {
  text-align: center;
  position: relative;
  z-index: 10;
}

/* Engranaje y foto */
.gear-container {
  position: relative;
  width: 220px;
  height: 220px;
  margin: auto;
  margin-bottom: 50px;
}

.gear-image {
  width: 100%;
  height: 100%;
}

.profile-image {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid white;
  z-index: 11;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-image.animate {
  animation: profileBounce 0.6s ease;
}

/* Animación de rebote de perfil */
@keyframes profileBounce {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  30%  { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
  50%  { transform: translate(-50%, -50%) scale(1.1) rotate(-5deg); }
  70%  { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}