/*
 * The landing page: the app's first screen, "Hallo, ich bin Mika", on the
 * welcome tour's hillside, one screen tall and never scrolling.
 *
 * The art is drawn in the app's "tour px" (a 390x844 phone, see
 * app/src/art/tour.ts), and --u is one tour px. A wide page scales the art by
 * its height; a phone-wide one by its width, as the app does, so a short phone
 * loses sky and never the green the button stands on. The page is a size
 * container, so all of it follows the page (the screen, or 560px at the least)
 * rather than the window. Mika stands at --spot across, on the same hilltop the
 * app's first screen stands it on.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
}

/* Pulled past either end, the page shows sky above and hill below. */
html {
  background: linear-gradient(180deg, #F2D3A2 50%, #2E6B5C 50%);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1E2B2A;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

.hill {
  --spot: 64%;
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  container-type: size;
  background: linear-gradient(180deg, #F2D3A2 0%, #FBEBD2 75%);
}

/* ---- the art ---------------------------------------------------------------- */

.art {
  --u: calc(100cqh / 844);
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@container (max-width: 600px) {
  .art {
    --u: min(100cqw / 390, 100cqh / 700);
  }
}

.art img {
  display: block;
  -webkit-user-drag: none;
}

.art > * {
  position: absolute;
}

/* The hill layers hang from the bottom, centred; each is several copies wide. */
.layer {
  bottom: 0;
  left: 50%;
  height: calc(844 * var(--u));
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

/* The clouds keep the place the design gave them: the seam after their third copy in the middle. */
.layer.clouds {
  left: calc(50% - 1980 * var(--u));
  transform: none;
}

/* The front layer's second copy is the app's hill as drawn: its first hilltop, at 1470 + 250, under --spot. */
.layer.front {
  left: calc(var(--spot) - 1720 * var(--u));
  transform: none;
}

.sun {
  left: calc(var(--spot) + 25 * var(--u));
  top: calc(51 * var(--u));
  width: calc(186 * var(--u));
  height: calc(186 * var(--u));
}

.sun img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sun-rays {
  animation: turn 40s linear infinite;
}

.sun-glow {
  animation: glow 2.6s ease-in-out infinite alternate;
}

.birds {
  left: calc(var(--spot) - 118 * var(--u));
  top: calc(76 * var(--u));
  width: calc(200 * var(--u));
}

/* ---- Mika -------------------------------------------------------------------- */

/* Mika stands on the ground (614 of 844) with its feet 89 of its 100 units down. */
.mika,
.mika-shadow {
  --size: calc(220 * var(--u));
}

.mika-shadow {
  left: calc(var(--spot) - 0.34 * var(--size));
  bottom: calc(230 * var(--u) - 0.055 * var(--size));
  width: calc(0.68 * var(--size));
  height: calc(0.11 * var(--size));
  border-radius: 50%;
  background: rgba(22, 48, 41, 0.2);
  animation: sprout 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms both;
}

.mika {
  left: calc(var(--spot) - var(--size) / 2);
  bottom: calc(230 * var(--u) - 0.11 * var(--size));
  width: var(--size);
  height: var(--size);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 89%;
  animation: sprout 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms both;
}

.mika .hop,
.mika .breath,
.mika .wave,
.mika img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* It breathes from the ground up, as in the app. */
.mika .breath {
  transform-origin: 50% 90%;
  animation: breathe 1.7s ease-in-out infinite alternate;
}

/* The leaves sway from the stem, and wave hello once it has sprouted. */
.mika .wave {
  transform-origin: 50% 31%;
  animation: wave 750ms ease-in-out 1050ms both;
}

.mika .leaves {
  transform-origin: 50% 31%;
  animation: sway 2.3s ease-in-out infinite alternate;
}

.mika .laughing {
  opacity: 0;
}

/* Tapped: it laughs, hops and waves (site.js sets the class). */
.mika.tapped .glad {
  opacity: 0;
}

.mika.tapped .laughing {
  opacity: 1;
}

.mika.tapped .hop {
  animation: hop 650ms both;
}

.mika.tapped .wave {
  animation: wave-again 750ms ease-in-out both;
}

/* ---- the words ---------------------------------------------------------------- */

.intro {
  position: absolute;
  left: max(24px, 8cqw);
  top: max(56px, 14cqh, env(safe-area-inset-top) + 24px);
  width: min(640px, 100% - 48px);
}

h1 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, min(7.2cqw, 11.5cqh), 104px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.lead {
  margin: 20px 0 0;
  font-size: clamp(17px, min(1.7cqw, 2.6cqh), 24px);
  line-height: 1.4;
  color: #4A5654;
}

/* ---- the button and the small print, on the green of the front hill ----------- */

/* One column from the bottom up, so the button can never sit on the small print. */
.bottom {
  position: absolute;
  left: max(24px, 8cqw);
  right: max(24px, 8cqw);
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 9cqh - 40px, 56px);
}

.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.cta {
  box-sizing: border-box;
  width: min(100%, 340px);
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2E6B5C;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(22, 48, 41, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(22, 48, 41, 0.34);
}

.cta:active {
  transform: scale(0.98);
}

.platforms {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: rgba(246, 241, 234, 0.92);
}

/* On a phone the button already goes to that phone's store, and the green is short. */
@container (max-width: 600px) {
  .platforms {
    display: none;
  }
}

.platforms a,
.foot a {
  color: #F6F1EA;
  text-underline-offset: 2px;
}

.platforms a:hover,
.foot a:hover {
  color: #FFFFFF;
}

:where(.get, .foot) a:focus-visible {
  outline: 3px solid #F6F1EA;
  outline-offset: 3px;
  border-radius: 4px;
}

.cta:focus-visible {
  border-radius: 999px;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  font-size: 13px;
  line-height: 18px;
  color: rgba(246, 241, 234, 0.92);
}

.foot p {
  margin: 0;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* ---- motion ------------------------------------------------------------------- */

@keyframes sprout {
  from {
    transform: scale(0);
  }
}

@keyframes breathe {
  to {
    transform: scale(0.988, 1.022);
  }
}

@keyframes sway {
  from {
    transform: rotate(-3.5deg);
  }
  to {
    transform: rotate(3.5deg);
  }
}

/* The app's wave: the leaves swing 16 degrees each way, a little less each time. */
@keyframes wave {
  0% { transform: rotate(0deg); }
  14.7% { transform: rotate(16deg); }
  37.3% { transform: rotate(-16deg); }
  60% { transform: rotate(12.8deg); }
  81.3% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

/* The same wave under another name, so a tap starts it again. */
@keyframes wave-again {
  0% { transform: rotate(0deg); }
  14.7% { transform: rotate(16deg); }
  37.3% { transform: rotate(-16deg); }
  60% { transform: rotate(12.8deg); }
  81.3% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

@keyframes hop {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  25% { transform: translateY(-9%); animation-timing-function: ease-in; }
  55% { transform: translateY(1.5%); }
  75% { transform: translateY(-1%); }
  100% { transform: translateY(0); }
}

@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow {
  from {
    opacity: 0.8;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .art *,
  .cta {
    animation: none !important;
    transition: none !important;
  }
}