/* mrpapaya teaser: shared base for every design. Colours and type follow
   FINAL-mrpapaya-brand/06-design-tokens. Dark mode keeps the orange stage on
   purpose: it's the same first impression as the app icon and splash. */

:root {
  --papaya: #FF6B2C;      /* fills only; text on it is always ink */
  --papaya-deep: #C2410C;
  --ink: #1B1B1B;
  --cream: #FFF4E8;
  --leaf: #1E7A4C;

  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papaya);
  color: var(--ink);
  font: 700 1rem/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }

::selection { background: var(--ink); color: var(--cream); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Stage: one screen, the brand in the middle */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

.brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 0;
  text-align: center;
}

/* 576 × 576 Lottie composition (logo.js). Frame 0 is launch_symbol.svg, so it
   shows before the animation loads and the hand-off is seamless. Frame 0 fills
   15–78 % of the box and the finished lockup 22–78 %, so the box tucks under its
   neighbours while keeping the brand's clear space below the wordmark. */
.brand__mark {
  --size: min(560px, 92vw, 56svh);
  width: var(--size);
  aspect-ratio: 1;
  margin: calc(var(--size) * -0.12) 0 calc(var(--size) * -0.1);
  background: url("/brand/launch_symbol.svg") center / contain no-repeat;
  -webkit-tap-highlight-color: transparent;
}
.brand__mark.is-live { background: none; cursor: pointer; }
.brand__mark img { width: 100%; margin-top: 30%; }
@media (scripting: none) {
  .brand__mark { background: none; aspect-ratio: auto; margin: 0 0 1.5rem; }
  .brand__mark img { margin: 0; }
}

.brand__line {
  --line-delay: 900ms; /* lands as the wordmark finishes */
  margin: 0;
  font: 800 clamp(1.75rem, 1.1rem + 2.6vw, 3rem)/1.1 var(--font-display);
  letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: no-preference) {
  .brand__line { animation: rise 640ms var(--ease-enter) var(--line-delay) both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
}

.stage__foot {
  margin: 0;
  padding: 0.75rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

/* 404 */

.stage--page .brand { padding-bottom: 3rem; }
.stage--page .brand__symbol { width: 11rem; margin: -1.5rem 0 0.25rem; }
.stage--page .brand__line { animation: none; }
.stage--page .brand__note { margin: 0.5rem 0 1.75rem; font-size: 1.0625rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font: 800 1rem var(--font-ui);
  text-decoration: none;
  transition: transform 120ms, background-color 120ms;
}
.button:hover { background: #000; }
.button:active { transform: scale(0.98); }