:root {
  color-scheme: light dark;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
  color: #111111;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #000000;
    color: #ffffff;
  }
}

/* PAGE LAYOUT */

.hero,
.about-page {
  width: min(100%, 1060px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-page {
  width: min(100%, 860px);
}

/* AVATAR */

.avatar-wrap {
  width: clamp(150px, 18vw, 250px);
  margin: 0 auto 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.avatar-birds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  opacity: 0.8;
}

/* TEXT */

.hero-text,
.about-text {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 26px;
  font-size: clamp(1rem, 0.72rem + 0.95vw, 1.35rem);
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.about-text {
  max-width: 760px;
}

/* COUNTDOWN */

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 0 auto 28px;
  width: 100%;
}

.countdown--ghost {
  visibility: hidden;
  pointer-events: none;
}

.countdown-block {
  min-width: 0;
  width: clamp(64px, 13vw, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-number {
  font-size: clamp(2.9rem, 7vw, 6.2rem);
  line-height: 0.88;
  font-weight: 300;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}

.countdown-colon {
  font-size: clamp(2.9rem, 7vw, 6.2rem);
  line-height: 0.84;
  font-weight: 300;
  transform: translateY(-1px);
  padding-inline: 1px;
  flex: 0 0 auto;
}

.countdown-label {
  margin-top: 10px;
  font-size: clamp(0.82rem, 0.62rem + 0.5vw, 1.15rem);
  line-height: 1.15;
  font-weight: 400;
  color: #8f8f8f;
}

/* ACTIONS */

.hero-actions,
.about-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}

.hero-btn {
  min-width: min(260px, 42vw);
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.045em;
  border: 2px solid #111111;
  background: transparent;
  color: #111111;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hero-btn:hover {
  transform: translateY(-1px);
  opacity: 0.88;
}

.hero-btn--filled {
  background: #111111;
  color: #ffffff;
}

.hero-btn--outline {
  background: transparent;
  color: #111111;
}

@media (prefers-color-scheme: dark) {
  .countdown-label {
    color: #9a9a9a;
  }

  .hero-btn {
    border-color: #ffffff;
    color: #ffffff;
  }

  .hero-btn--filled {
    background: #ffffff;
    color: #000000;
  }

  .hero-btn--outline {
    background: transparent;
    color: #ffffff;
  }
}

/* BIRDS */

.birds-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.bird-svg {
  position: absolute;
  left: 0;
  width: 18px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.bird-1 { top: 14vh; animation: birdFly1 28s linear infinite; animation-delay: -5s; }
.bird-2 { top: 24vh; animation: birdFly2 32s linear infinite; animation-delay: -12s; }
.bird-3 { top: 34vh; animation: birdFly3 26s linear infinite; animation-delay: -8s; }
.bird-4 { top: 18vh; animation: birdFly4 30s linear infinite; animation-delay: -15s; }
.bird-5 { top: 42vh; animation: birdFly5 27s linear infinite; animation-delay: -10s; }

@keyframes birdFly1 {
  0% { transform: translateX(-150px) translateY(0); }
  100% { transform: translateX(calc(100vw + 150px)) translateY(0); }
}

@keyframes birdFly2 {
  0% { transform: translateX(-160px) translateY(0); }
  100% { transform: translateX(calc(100vw + 160px)) translateY(0); }
}

@keyframes birdFly3 {
  0% { transform: translateX(-150px) translateY(0); }
  100% { transform: translateX(calc(100vw + 150px)) translateY(0); }
}

@keyframes birdFly4 {
  0% { transform: translateX(-170px) translateY(0); }
  100% { transform: translateX(calc(100vw + 170px)) translateY(0); }
}

@keyframes birdFly5 {
  0% { transform: translateX(-145px) translateY(0); }
  100% { transform: translateX(calc(100vw + 145px)) translateY(0); }
}

/* ABOUT SPACER + PASSIONS */

.about-spacer {
  position: relative;
  width: 100%;
}

.about-passions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 28px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
}

.about-passion {
  margin: 0;
  font-size: clamp(1rem, 0.72rem + 0.95vw, 1.35rem);
  line-height: 1.5;
  opacity: 0.9;
}

/* MOBILE */

@media (max-width: 820px) {
  .countdown-number,
  .countdown-colon {
    font-size: clamp(2.4rem, 10vw, 4.9rem);
  }

  .countdown-block {
    width: clamp(54px, 16vw, 110px);
  }

  .hero-btn {
    min-width: min(220px, 80vw);
  }
}

@media (max-width: 560px) {
  .hero,
  .about-page {
    padding: 24px 14px;
  }

  .avatar-wrap {
    width: 150px;
    margin-bottom: 24px;
  }

  .hero-text,
  .about-text {
    max-width: 100%;
    font-size: 0.98rem;
    line-height: 1.5;
    padding-inline: 2px;
  }

  .countdown {
    gap: 8px 2px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .countdown-block {
    width: 64px;
    max-width: 64px;
  }

  .countdown-number {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .countdown-colon {
    display: none;
  }

  .countdown-label {
    margin-top: 8px;
    font-size: 0.74rem;
  }

  .about-passions {
    bottom: 24px;
    gap: 2px;
  }

  .about-passion {
    font-size: 0.98rem;
    line-height: 1.3;
  }

  .hero-actions,
  .about-actions {
    gap: 10px;
  }

  .hero-btn {
    width: min(100%, 320px);
    min-width: 0;
    padding: 14px 22px;
    font-size: 0.86rem;
  }
}