:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: #061024;
  font-family: Arial, Helvetica, sans-serif;
}

.page {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding:
    calc(22px + var(--safe-top))
    calc(18px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(18px + var(--safe-left));
  place-items: center;
  isolation: isolate;
}

.background,
.vignette {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.background {
  background-image: url("cs.jpg");
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(1.15) brightness(0.62);
  transform: scale(1.08);
}

.vignette {
  z-index: -1;
  background:
    radial-gradient(circle at 50% 38%, rgb(20 78 175 / 0.22), transparent 34rem),
    linear-gradient(180deg, rgb(0 0 0 / 0.26), rgb(0 0 0 / 0.62)),
    linear-gradient(90deg, rgb(0 0 0 / 0.34), transparent 42%, rgb(0 0 0 / 0.34));
}

.hero {
  display: flex;
  width: min(100%, 520px);
  min-height: calc(100svh - 46px - var(--safe-top) - var(--safe-bottom));
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(34px, 7svh, 72px);
}

.logo {
  display: block;
  width: min(86vw, 380px);
  height: auto;
  filter:
    drop-shadow(0 10px 20px rgb(0 0 0 / 0.55))
    drop-shadow(0 0 18px rgb(65 160 255 / 0.44));
}

.store-button {
  display: block;
  width: min(86vw, 360px);
  aspect-ratio: 646 / 250;
  border-radius: 18px;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  filter:
    drop-shadow(0 16px 28px rgb(0 0 0 / 0.48))
    drop-shadow(0 0 16px rgb(0 114 255 / 0.2));
  animation: button-breathe 2.4s ease-in-out infinite;
  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.store-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-button:focus-visible {
  outline: 3px solid #5bc7ff;
  outline-offset: 6px;
}

.store-button:active {
  transform: scale(0.975);
  animation-play-state: paused;
}

@media (hover: hover) {
  .store-button:hover {
    transform: translateY(-2px);
    filter:
      drop-shadow(0 20px 34px rgb(0 0 0 / 0.54))
      drop-shadow(0 0 22px rgb(0 132 255 / 0.32));
  }
}

@keyframes button-breathe {
  0%,
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 16px 28px rgb(0 0 0 / 0.48))
      drop-shadow(0 0 16px rgb(0 114 255 / 0.2));
  }

  48% {
    transform: scale(1.035);
    filter:
      drop-shadow(0 20px 34px rgb(0 0 0 / 0.54))
      drop-shadow(0 0 28px rgb(52 166 255 / 0.48));
  }

  58% {
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-button {
    animation: none;
  }

  .store-button,
  .store-button:hover,
  .store-button:active {
    transition: none;
  }
}

@media (max-width: 390px) {
  .page {
    padding-inline:
      calc(12px + var(--safe-left))
      calc(12px + var(--safe-right));
  }

  .logo {
    width: min(90vw, 320px);
  }

  .store-button {
    width: min(90vw, 320px);
    border-radius: 14px;
  }
}

@media (max-height: 640px) {
  .hero {
    gap: clamp(22px, 5svh, 40px);
    min-height: calc(100svh - 32px - var(--safe-top) - var(--safe-bottom));
  }

  .logo {
    width: min(66vw, 250px);
  }

  .store-button {
    width: min(76vw, 300px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    width: min(100%, 720px);
    flex-direction: row;
    gap: clamp(28px, 7vw, 64px);
  }

  .logo {
    width: min(40vw, 270px);
  }

  .store-button {
    width: min(38vw, 300px);
  }
}