/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* VARIABLES PARA CAMBIO DE COLOR */
:root {
  --bg-1: #000000;
  --bg-2: #000000;
  --bg-3: #000000;
  --bg-4: #000000;
}

/* BODY */
body {
  min-height: 100vh;
  background: var(--bg-1);
  overflow: hidden;
  font-family: Impact, 'Arial Black', sans-serif;
  animation: bgImpact 3s infinite;
}

/* ESCENA */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* TEXTO */
h1 {
  position: absolute;
  bottom: 6vh;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: clamp(28px, 4vw, 64px);
  letter-spacing: 0.4em;
  opacity: 0.9;
}

/* PISO */
.floor {
  position: absolute;
  bottom: 22vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(70vw, 600px);
  height: 14px;
  background: #f1e2e2;
  border-radius: 8px;
  animation: floorShake 3s infinite;
}

/* CONTENEDOR LOGO */
.box-wrapper {
  position: absolute;
  bottom: calc(22vh + 14px);
  left: 50%;
  transform: translateX(-50%);
  animation: heavyLift 3s infinite ease-in-out;
}

/* LOGO COMO CAJA */
.box-logo {
  width: clamp(120px, 20vw, 220px);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.8));
  transform-origin: bottom left;
}

/* ANIMACIÓN DE LEVANTAMIENTO PESADO */
@keyframes heavyLift {
  0%, 20% {
    transform: translateX(-50%) rotate(0deg) translateY(0);
  }
  45% {
    transform: translateX(-50%) rotate(15deg) translateY(-70px);
  }
  60% {
    transform: translateX(-50%) rotate(25deg) translateY(-100px);
  }
  75% {
    transform: translateX(-50%) rotate(6deg) translateY(-30px);
  }
  85% {
    transform: translateX(-50%) rotate(0deg) translateY(0);
  }
  100% {
    transform: translateX(-50%) rotate(0deg) translateY(0);
  }
}

/* VIBRACIÓN DEL PISO */
@keyframes floorShake {
  0%, 20%, 100% {
    transform: translateX(-50%);
  }
  86% {
    transform: translateX(calc(-50% - 4px));
  }
  88% {
    transform: translateX(calc(-50% + 4px));
  }
  90% {
    transform: translateX(calc(-50% - 2px));
  }
  92% {
    transform: translateX(calc(-50% + 2px));
  }
  94% {
    transform: translateX(-50%);
  }
}

/* CAMBIO DE COLOR CON CADA IMPACTO */
@keyframes bgImpact {
  0%, 20% {
    background: var(--bg-1);
  }
  60% {
    background: var(--bg-2);
  }
  85% {
    background: var(--bg-3);
  }
  100% {
    background: var(--bg-4);
  }
}

/* MOBILE AJUSTES */
@media (max-width: 768px) {
  .floor {
    bottom: 26vh;
  }

  .box-wrapper {
    bottom: calc(26vh + 14px);
  }

  h1 {
    bottom: 4vh;
    letter-spacing: 0.25em;
  }
}