/* apply a natural box layout model to all elements */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  background-color: #111;
  margin: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
  transform: perspective(99%) translateZ(-50px);
  overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10001;
    /*box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);*/
}

/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* Estilos básicos para tostadoras y tostadas */
.toaster, .toast {
  position: absolute;
  width: 64px;
  height: 64px;
}
.toaster {
  background-image: url("img/toaster-sprite.gif");
  z-index:20;
}
.toast {
  background-image: url("img/toast1.gif");
  z-index:99;
}

/* Clases de animación para tostadoras */
.t1 { animation: flap 0.2s steps(4) infinite alternate, fly 10s linear infinite; }
.t2 { animation: flap 0.2s steps(4) infinite alternate-reverse, fly 16s linear infinite; }
.t3 { animation: flap 0.2s steps(4) infinite alternate, fly 24s linear infinite; }
.t4 { animation: flap 0.2s steps(4) infinite alternate, fly 10s 5s linear infinite; }
.t5 { animation: flap 0.2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite; }
.t6 { animation: flap 0.2s steps(4) infinite alternate, fly 24s 8s linear infinite; }
.t7 { animation: flap 0.2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite; }
.t8 { animation: flap 0.2s steps(4) infinite alternate, fly 24s 16s linear infinite; }
.t9 { animation: flap 0.2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite; }

/* Clases de animación para tostadas */
.tst1 { animation: fly 10s linear infinite; }
.tst2 { animation: fly 16s linear infinite; }
.tst3 { animation: fly 24s linear infinite; }
.tst4 { animation: fly 24s 12s linear infinite; }

/* Posiciones iniciales */
.p6 { right: -2%; top: -17%; }
.p7 { right: 10%; top: -19%; }
.p8 { right: 20%; top: -18%; }
.p9 { right: 30%; top: -20%; }
.p10 { right: 40%; top: -21%; }
.p11 { right: 50%; top: -18%; }
.p12 { right: 60%; top: -20%; }
.p13 { right: -17%; top: 10%; }
.p14 { right: -19%; top: 20%; }
.p15 { right: -21%; top: 30%; }
.p16 { right: -23%; top: 50%; }
.p17 { right: -25%; top: 70%; }
.p18 { right: 0%; top: -26%; }
.p19 { right: 10%; top: -20%; }
.p20 { right: 20%; top: -36%; }
.p21 { right: 30%; top: -24%; }
.p22 { right: 40%; top: -33%; }
.p23 { right: 60%; top: -40%; }
.p24 { right: -26%; top: 10%; }
.p25 { right: -36%; top: 30%; }
.p26 { right: -29%; top: 50%; }
.p27 { right: 0; top: -46%; }
.p28 { right: 10%; top: -56%; }
.p29 { right: 20%; top: -49%; }
.p30 { right: 30%; top: -60%; }
.p31 { right: -46%; top: 10%; }
.p32 { right: -56%; top: 20%; }
.p33 { right: -49%; top: 30%; }

/* Animación de aleteo */
@keyframes flap {
  from { background-position: 0px; }
  to { background-position: -256px; }
}

/* Animación de vuelo */
@keyframes fly {
  from { transform: translate(0, 0); }
  to { transform: translate(-1600px, 1600px); }
}

/* Efecto de líneas de escaneo */
.scanlines {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 2px,
    rgba(255, 255, 255, 0.05) 4px
  );
  z-index: 10000;
  animation: scanline-move 0.5s linear infinite;
}

@keyframes scanline-move {
  from { transform: translateY(0%); }
  to { transform: translateY(50%); }
}

/* Estilo retro para el texto final, ahora más sutil y centrado */
.footer-retro {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: monospace;
  font-size: 24px;
  color: #8fbc8f; /* Verde más sutil */
  text-shadow: 0 0 2px #8fbc8f;
  z-index: 0; 
  text-align: center;
  width: 100%;
}