/* ==== Reset ==== */
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0b1220;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader-img {
  max-width: 180px;
  max-height: 180px;
  margin-bottom: 52px;
  display: block;
}

.preloader-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2); /* полупрозрачный круг */
  border-top: 4px solid #18a0fb;          /* основной цвет */
  box-shadow: 0 4px 24px #18a0fb33;
  animation: spin 0.85s linear infinite;   /* чуть быстрее */
}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}


/* ==== Top header ==== */
.top-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, #87CEEB, #B0E2FF);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)s;
  font-size: 32px;
  font-weight: 700;
  color: rgba(206, 28, 28, .8);
  text-transform: uppercase;
  font-family: 'Segoe UI', Arial, sans-serif;
  pointer-events: none;
  user-select: none;
  z-index: 1001;
}

/* ==== Background ==== */
.background {
  background: url('img/chicks.jpg') no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ==== Stripes ==== */
.stripe-container {
  position: absolute;
  z-index: 150;
  width: 100%;
  height: 79%;
  bottom: 0;
  overflow: hidden;
}

.stripe {
  position: absolute;
  bottom: -20%;
  left: 50%;
  width: 10px;
  height: 20%;
  background: rgba(255, 255, 255, .7);
  transform: translateX(-50%);
  animation: moveStripe 2s linear infinite;
  z-index: 150;
}

/* <-- полосы поверх машин и над курицей во время прыжка */
@keyframes moveStripe {
  0% {
    bottom: -20%;
  }

  100% {
    bottom: 100%;
  }
}

/* ==== Center GIF ==== */
@keyframes zoomUp {
  from {
    width: 150px;
  }

  to {
    width: 320px;
  }
}

.center-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: auto;
  z-index: 990;
}



/* ==== Buttons ==== */
.start-button {
  position: absolute;
  z-index: 1005;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #ff8a00, #ffbf28);
  color: #fff;
  border: none;
  border-radius: 35px;
  padding: 15px 40px;
  font-size: 22px;
  cursor: pointer;
  font-family: 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(255, 139, 0, .3);
  transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .2);
}

.start-button:hover {
  background: linear-gradient(45deg, #ffa500, #ffd700);
  box-shadow: 0 12px 25px rgba(255, 139, 0, .4);
  transform: translateX(-50%) translateY(-4px);
}

.start-button:disabled {
  opacity: 1;
  cursor: not-allowed;
  transform: translateX(-50%);
  box-shadow: none;
  background:linear-gradient(45deg, #cc6e00, #cca322);
  color: #f5f5f5;
}

.start-button,
.back-button,
.start-button * {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.back-button {
  position: absolute;
  z-index: 1005;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #ff4757, #ff6b81);
  color: #fff;
  border: none;
  border-radius: 35px;
  padding: 15px 40px;
  font-size: 22px;
  cursor: pointer;
  font-family: 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(255, 71, 87, .3);
  transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .2);
  text-decoration: none;
}

.back-button:hover {
  background: linear-gradient(45deg, #ff6b81, #ff8395);
  box-shadow: 0 12px 25px rgba(255, 71, 87, .4);
  transform: translateX(-50%) translateY(-4px);
}

/* ==== Clouds ==== */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, .9);
  border-radius: 50px;
  animation: floatCloud linear infinite;
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .9);
  border-radius: 50%;
}

.cloud::before {
  width: 50%;
  height: 100%;
  top: -40%;
  left: 15%;
}

.cloud::after {
  width: 40%;
  height: 80%;
  top: -30%;
  right: 15%;
}

@keyframes floatCloud {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100vw);
  }
}

/* ==== Counter (square arrows) ==== */
.counter-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, .9);
  padding: 10px 5px;
  margin-top: auto;
  margin-bottom: 0;
  z-index: 1001;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
}

.arrow {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  display: grid;
  line-height: 1;
  box-sizing: border-box;
  font-size: 22px;
  color: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .15);
  font-family: Arial, sans-serif;
  font-weight: bold;
  opacity: .35;
}

.arrow.left {
  background: #4CAF50;
  padding-left: 3px;
}

.arrow.right {
  background: #2196F3;
  padding-left: 3px;
}

.arrow.active {
  opacity: 1;
}

/* ==== Cars (no flash) ==== */
.car {
  position: absolute;
  width: auto;
  height: 180px;
  z-index: 995;
  opacity: 0;
  will-change: transform, opacity;
}

.car.left {
  bottom: -180px;
  left: 5%;
}

.car.right {
  bottom: -180px;
  right: 5%;
}

@keyframes carMoveUp {
  0% {
    bottom: -180px;
    opacity: 1;
  }

  100% {
    bottom: 100%;
    opacity: 1;
  }
}

/* ==== Modal styles ==== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  z-index: 1999;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: #fff;
  padding: 30px 50px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
  text-align: center;
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal h2 {
  margin: 0 0 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #333;
}

.modal-button {
  background: linear-gradient(45deg, #ff8a00, #ffbf28);
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 12px 35px;
  font-size: 18px;
  cursor: pointer;
  font-family: 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 5px 15px rgba(255, 139, 0, .3);
  transition: all .2s ease;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .2);
}