/* =========================================================
   COTAXOMIL
   CAMIÓN ANIMADO - VERSIÓN CORREGIDA
   ========================================================= */


/* ---------------------------------------------------------
   ESPACIO PARA LA CARRETERA
--------------------------------------------------------- */

body {
  padding-bottom: 76px;
}


/* =========================================================
   CONTENEDOR GENERAL
========================================================= */

.bus-lane {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 90px;

  /*
   * La carretera completa está por encima del fondo,
   * pero no bloquea ningún clic.
   */
  z-index: 50;

  pointer-events: none;

  overflow: hidden;
}


/* =========================================================
   CARRETERA
========================================================= */

.bus-lane::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 42px;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      #292936 0%,
      #20202b 45%,
      #17171f 100%
    );

  border-top:
    2px solid rgba(255, 255, 255, 0.10);

  box-shadow:
    0 -8px 25px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   LÍNEAS AMARILLAS
========================================================= */

/*
 * IMPORTANTE:
 *
 * La línea queda en la parte BAJA de la carretera.
 * Ya no pasa por encima del autobús.
 */

.bus-lane::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 10px;

  height: 3px;

  z-index: 2;

  background:
    repeating-linear-gradient(
      90deg,

      #f59e0b 0px,
      #f59e0b 44px,

      transparent 44px,
      transparent 88px
    );

  opacity: 0.95;

  animation:
    roadStripes 0.55s linear infinite;
}


@keyframes roadStripes {

  from {
    background-position-x: 0;
  }

  to {
    background-position-x: -88px;
  }

}


/* =========================================================
   AUTOBÚS
========================================================= */

.bus-vehicle {
  position: absolute;

  /*
   * El autobús ahora está claramente ARRIBA
   * de la línea amarilla.
   */

  bottom: 29px;

  left: 0;

  width: 220px;
  height: 70px;

  /*
   * Más alto que carretera y línea.
   */
  z-index: 10;

  transform: translateX(-250px);

  animation:
    driveBus 9s linear infinite;

  will-change: transform;
}


/* =========================================================
   MOVIMIENTO HORIZONTAL
========================================================= */

@keyframes driveBus {

  0% {
    transform:
      translateX(-250px);
  }

  100% {
    transform:
      translateX(calc(100vw + 250px));
  }

}


/* =========================================================
   SVG
========================================================= */

.bus-vehicle > svg {
  position: relative;

  display: block;

  width: 220px;
  height: 70px;

  overflow: visible;

  z-index: 5;

  /*
   * Movimiento muy pequeño para simular
   * las irregularidades del pavimento.
   */

  animation:
    busSuspension 0.32s ease-in-out infinite alternate;

  filter:
    drop-shadow(
      0 5px 4px rgba(0, 0, 0, 0.28)
    );
}


/* =========================================================
   SUSPENSIÓN
========================================================= */

@keyframes busSuspension {

  0% {
    transform:
      translateY(0);
  }

  100% {
    transform:
      translateY(-1.5px);
  }

}


/* =========================================================
   RUEDAS
========================================================= */

.bus-wheel {
  transform-box: fill-box;

  transform-origin: center;

  animation:
    spinWheel 0.42s linear infinite;
}


@keyframes spinWheel {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   HUMO
========================================================= */

.bus-smoke {
  position: absolute;

  /*
   * Sale de la parte trasera del autobús.
   */

  left: 5px;
  bottom: 35px;

  width: 25px;
  height: 25px;

  z-index: 3;
}


.smoke-puff {
  position: absolute;

  left: 0;
  bottom: 0;

  display: block;

  border-radius: 50%;

  background:
    rgba(130, 130, 145, 0.38);

  filter: blur(1px);
}


/* HUMO 1 */

.smoke-puff:nth-child(1) {

  width: 11px;
  height: 11px;

  animation:
    smokeAnimation 1.1s ease-out infinite;

}


/* HUMO 2 */

.smoke-puff:nth-child(2) {

  width: 8px;
  height: 8px;

  animation:
    smokeAnimation 1.1s ease-out infinite 0.35s;

}


/* HUMO 3 */

.smoke-puff:nth-child(3) {

  width: 6px;
  height: 6px;

  animation:
    smokeAnimation 1.1s ease-out infinite 0.7s;

}


@keyframes smokeAnimation {

  0% {

    opacity: 0.65;

    transform:
      translate(
        0,
        0
      )
      scale(0.8);

  }


  50% {

    opacity: 0.35;

  }


  100% {

    opacity: 0;

    transform:
      translate(
        -30px,
        -17px
      )
      scale(2.3);

  }

}


/* =========================================================
   FARO
========================================================= */

.bus-headlight {

  filter:
    drop-shadow(
      0 0 4px rgba(253, 230, 138, 0.95)
    );

  animation:
    headlightGlow 1.5s ease-in-out infinite alternate;

}


@keyframes headlightGlow {

  from {

    opacity: 0.75;

    filter:
      drop-shadow(
        0 0 2px rgba(253, 230, 138, 0.7)
      );

  }


  to {

    opacity: 1;

    filter:
      drop-shadow(
        0 0 7px rgba(253, 230, 138, 1)
      );

  }

}


/* =========================================================
   SOMBRA DEL AUTOBÚS SOBRE EL PAVIMENTO
========================================================= */

/*
 * Esta sombra hace que el autobús parezca realmente
 * estar sobre la carretera y no flotando.
 */

.bus-vehicle::after {

  content: "";

  position: absolute;

  left: 24px;

  bottom: 2px;

  width: 175px;
  height: 8px;

  z-index: -1;

  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.32);

  filter:
    blur(5px);

}


/* =========================================================
   DETALLE SUPERIOR DE LA CARRETERA
========================================================= */

/*
 * Borde claro muy sutil entre la página
 * y el pavimento.
 */

.bus-lane {

  background:
    linear-gradient(
      to bottom,

      transparent 0,
      transparent 47px,

      rgba(255, 255, 255, 0.08) 47px,
      rgba(255, 255, 255, 0.08) 49px,

      transparent 49px
    );

}


/* =========================================================
   MÓVILES
========================================================= */

@media (max-width: 768px) {

  body {
    padding-bottom: 64px;
  }


  .bus-lane {

    height: 76px;

  }


  /* CARRETERA */

  .bus-lane::before {

    height: 35px;

  }


  /* LÍNEA */

  .bus-lane::after {

    bottom: 8px;

    height: 3px;

    background:
      repeating-linear-gradient(
        90deg,

        #f59e0b 0px,
        #f59e0b 32px,

        transparent 32px,
        transparent 64px
      );

    animation-duration: 0.45s;

  }


  /* AUTOBÚS */

  .bus-vehicle {

    width: 175px;
    height: 56px;

    bottom: 24px;

    transform:
      translateX(-200px);

    animation-duration: 7.5s;

  }


  .bus-vehicle > svg {

    width: 175px;
    height: 56px;

  }


  .bus-vehicle::after {

    left: 20px;

    bottom: 0;

    width: 135px;
    height: 6px;

  }


  .bus-smoke {

    left: 3px;
    bottom: 28px;

  }


  @keyframes driveBus {

    0% {

      transform:
        translateX(-200px);

    }


    100% {

      transform:
        translateX(calc(100vw + 200px));

    }

  }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width: 480px) {

  .bus-vehicle {

    width: 155px;
    height: 50px;

    bottom: 23px;

  }


  .bus-vehicle > svg {

    width: 155px;
    height: 50px;

  }


  .bus-vehicle::after {

    width: 120px;

  }

}


/* =========================================================
   ACCESIBILIDAD
   REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .bus-lane::after,
  .bus-vehicle,
  .bus-vehicle > svg,
  .bus-wheel,
  .smoke-puff,
  .bus-headlight {

    animation: none !important;

  }


  .bus-vehicle {

    transform:
      translateX(30px);

  }

}