/* E1 SUP FEST 2026 — заглушка «Скоро» */

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

html, body { height: 100%; }

body {
  background: #9A7ECA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 24px;
  overflow: hidden;
}

/* Контейнер для слова «СКОРО» — все absolute-элементы относительно него.
   aspect-ratio фиксирует пропорции исходного SVG (1147×185), чтобы при ресайзе
   все вложенные элементы (голубь, облачко) сохраняли относительные позиции. */
.skoro-wrap {
  position: relative;
  width: min(85vw, 1147px);
  aspect-ratio: 1147 / 185;
}

.skoro {
  width: 100%;
  height: 100%;
  display: block;
}

/* Голубь сидит «в» средней букве «О» в слове «СКОРО».
   На hover меняется фон картинки (pigeon.png → pigeon-hover.png).
   background-image вместо <img> — чтобы плавно переключать фон по hover. */
.pigeon {
  position: absolute;
  width: 13%;
  aspect-ratio: 148 / 132;
  left: 43.5%;
  top: 14%;
  background: url('../img/pigeon.png') center/contain no-repeat;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.pigeon:hover {
  background-image: url('../img/pigeon-hover.png');
}

/* Облачко с текстом «Готовь свой костюм!» — выходит вверх из головы голубя */
.bubble {
  position: absolute;
  width: 14%;
  aspect-ratio: 161 / 143;
  left: 52%;
  top: -50%;
  pointer-events: none;
}

/* «E1 SUP FEST – 2026» — мелкий текст под СКОРО */
.footer-text {
  display: block;
  width: min(40vw, 480px);
  margin-top: clamp(20px, 4vw, 56px);
}

@media (max-width: 600px) {
  body { padding: 16px; }

  .skoro-wrap { width: 90vw; }

  /* Положение голубя/облачка для узкого экрана (подобрано через F12) */
  .pigeon { width: 13%; left: 43.5%; top: 15%; }
  .bubble { width: 25%; left: 54%; top: -105%; }

  .footer-text {
    width: min(70vw, 420px);
    margin-top: 28px;
  }
}