/* Pixel Fields — coming soon landing page.
   All sizes derive from the 1512x982 Figma frame, multiplied by --s so the
   whole composition scales as one unit across breakpoints. */

:root {
  --s: 1;

  --ink: #000000;
  --paper: #ffffff;
  --sky: #0164F5;
  --ground: #0164F5;

  --font: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --mobile-bg-shift: 20vh;
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #0164F5;
}

body {
  font-family: var(--font);
  color: var(--ink);
}

/* Desktop: locked viewport, fixed backdrop. */
html:not(.is-mobile-portrait),
html:not(.is-mobile-portrait) body {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

.backdrop {
  z-index: 0;
  pointer-events: none;
}

html:not(.is-mobile-portrait) .backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.backdrop__desktop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.backdrop__mobile {
  display: none;
}

/* Mobile portrait: document flow (looks correct) — scroll blocked in JS. */
html.is-mobile-portrait,
html.is-mobile-portrait body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  height: auto;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
}

html.is-mobile-portrait .backdrop {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
  margin-top: calc(-1 * var(--mobile-bg-shift));
}

html.is-mobile-portrait .backdrop__desktop {
  display: none;
}

html.is-mobile-portrait .backdrop__mobile {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

html.is-mobile-portrait .page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: visible;
  justify-content: flex-start;
  padding: max(72px, calc(env(safe-area-inset-top) + 52px)) 12px calc(48px * var(--s));
}

html.is-mobile-portrait .stack {
  margin-top: 0;
}

/* CSS fallback if JS hasn't run yet. */
@media (max-width: 900px) and (orientation: portrait) {
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    height: auto;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .backdrop {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    margin-top: calc(-1 * var(--mobile-bg-shift));
  }

  .backdrop__desktop {
    display: none;
  }

  .backdrop__mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
    justify-content: flex-start;
    padding: max(72px, calc(env(safe-area-inset-top) + 52px)) 12px calc(48px * var(--s));
  }

  .stack {
    margin-top: 0;
  }
}

.page {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* The Figma composition sits above the optical centre; this offset
     reproduces the 106px / 275px split of the leftover vertical space. */
  padding: calc(40px * var(--s)) 20px calc(209px * var(--s));
}

html:not(.is-mobile-portrait) .page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html:not(.is-mobile-portrait) .stack {
  margin-top: calc(36px * var(--s));
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.logo {
  display: block;
  width: calc(285px * var(--s));
  height: auto;
  will-change: transform;
  animation: float 4.5s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

.headline {
  margin: calc(30px * var(--s)) 0 0;
  line-height: 0;
}

.headline img {
  display: block;
  width: calc(485px * var(--s));
  height: auto;
}

.tagline {
  margin: calc(22px * var(--s)) 0 0;
  font-size: calc(21px * var(--s));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--paper);
}

.note {
  margin: calc(24px * var(--s)) 0 0;
  font-size: calc(21px * var(--s));
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--paper);
}

/* Signup ------------------------------------------------------------------ */

.signup {
  margin-top: calc(25px * var(--s));
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--s));
  width: 100%;
  max-width: calc(473px * var(--s));
}

.field {
  position: relative;
  flex: 1 1 auto;
  width: calc(317px * var(--s));
  min-width: 0;
  height: calc(54px * var(--s));
  /* Frame and envelope glyph are baked into the exported vector. */
  background-image: url("Assets/InputField.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.field__input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(16px * var(--s)) 0 calc(46px * var(--s));
  border: 0;
  background: transparent;
  font-family: inherit;
  /* Never below 16px, or mobile Safari zooms the page on focus. */
  font-size: max(16px, calc(18px * var(--s)));
  line-height: 1;
  color: var(--ink);
  appearance: none;
}

.field__input::placeholder {
  color: var(--ink);
  opacity: 1;
}

.field__input:focus {
  outline: none;
}

.field.is-invalid {
  outline: calc(2px * var(--s)) solid #c0392b;
  outline-offset: calc(2px * var(--s));
}

.notify {
  flex: none;
  width: calc(150px * var(--s));
  height: calc(51px * var(--s));
  padding: 0;
  border: 0;
  background: url("Assets/Button.svg") center / 100% 100% no-repeat;
  cursor: pointer;
  transition: transform 80ms ease-out, filter 80ms ease-out;
}

.notify:hover {
  filter: brightness(1.08);
}

.notify:active {
  transform: translateY(calc(2px * var(--s)));
}

.notify:focus-visible {
  outline: calc(2px * var(--s)) solid var(--paper);
  outline-offset: calc(2px * var(--s));
}

/* Success state: the form is replaced by the confirmation line. */
.signup.is-sent {
  display: none;
}

.note.is-success {
  font-weight: 600;
}

.stores {
  margin-top: calc(48px * var(--s));
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--s));
}

.store {
  display: block;
  line-height: 0;
  flex: none;
}

.store img {
  display: block;
  width: calc(140px * var(--s));
  height: auto;
}

.store:focus-visible {
  outline: calc(2px * var(--s)) solid var(--paper);
  outline-offset: calc(2px * var(--s));
}

/* Utilities --------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Breakpoints ------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --s: 0.85; }
}

@media (max-width: 860px) {
  :root { --s: 0.72; }
}

/* Keep field + button on one row; shrink the whole composition to fit. */
@media (max-width: 640px) {
  :root { --s: 0.68; }

  .page {
    justify-content: flex-start;
    padding: max(72px, calc(env(safe-area-inset-top) + 52px)) 12px calc(48px * var(--s));
  }

  .logo {
    width: min(58vw, 240px);
  }
}

@media (max-width: 400px) {
  :root { --s: 0.58; }

  .page {
    justify-content: flex-start;
    padding: max(64px, calc(env(safe-area-inset-top) + 44px)) 10px calc(32px * var(--s));
  }

  .logo {
    width: min(62vw, 220px);
  }
}

@media (max-height: 720px) and (min-width: 641px) {
  :root { --s: 0.72; }

  .page {
    padding: calc(24px * var(--s)) 20px calc(80px * var(--s));
  }
}

@media (max-height: 600px) {
  :root { --s: 0.55; }

  .page {
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notify {
    transition: none;
  }
}