/* rideoto.com's home page: the waitlist. Paper's "v3" frames: the copy and the email box beside two upright
   iPhones, the ride page in front and the feed behind, which trade places on hover or a swipe. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

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

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold-Latin.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --background: #0a0b0e;
  --surface: #14161b;
  --bezel: #1d2027;
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --hairline: rgba(255, 255, 255, 0.14);
  --accent: #c5cff2;
  --ink: #0a0c12;
  --danger: #ff5e52;
  /* The ride page's background, behind its stats. */
  --ride-page: #090b10;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--background);
  overflow-x: clip;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Layout: copy beside the phones, stacked on narrow screens. */

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
  padding: 48px 64px 96px;
}

.copy {
  width: 520px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wordmark {
  height: 26px;
  width: auto;
}

h1 {
  margin: 0;
  font-weight: 800;
  font-size: 80px;
  line-height: 84px;
  letter-spacing: -0.04em;
}

.lede {
  margin: 0;
  text-wrap: pretty;
  font-size: 20px;
  line-height: 30px;
  color: var(--text-secondary);
}

/* The email box and its button, joined in one bar. */

.waitlist,
.joined {
  display: flex;
  width: 100%;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
}

/* The one thing to do on the page, so it reads first: a lighter field, a periwinkle edge and a soft glow. */
.waitlist {
  border: 1.5px solid rgba(197, 207, 242, 0.42);
  background: #1a1d25;
  box-shadow: 0 0 0 5px rgba(197, 207, 242, 0.07), 0 14px 44px rgba(164, 179, 239, 0.2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.waitlist:hover {
  border-color: rgba(197, 207, 242, 0.6);
}

.waitlist:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(197, 207, 242, 0.16), 0 14px 44px rgba(164, 179, 239, 0.28);
}

.waitlist input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 20px;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: transparent;
}

.waitlist input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.waitlist button {
  border: 0;
  padding: 0 26px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: var(--accent);
  cursor: pointer;
}

.waitlist button:disabled {
  opacity: 0.7;
  cursor: default;
}

.joined {
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}

.joined[hidden] {
  display: none;
}

.joined svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note {
  margin: -12px 0 0;
  text-wrap: balance;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-tertiary);
}

.note.error {
  color: var(--danger);
}

/* The phones. Each keeps its own spot; the one in front is full size and the other sits back, smaller and dimmer,
   scaled about its middle. The geometry is in units of the stage's width (cqw), so it scales with the page;
   home.js reads the same numbers to follow a swipe. */

.showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.stage {
  --phone-w: 52.63;
  --ride-x: 5.26;
  --ride-y: 1.4;
  --feed-x: 49.82;
  --feed-y: 11.72;
  --back-s: 0.9067;
  position: relative;
  width: 570px;
  aspect-ratio: 570 / 700;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}

.stage::before {
  content: "";
  position: absolute;
  left: -40%;
  top: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 50% 50%, rgba(190, 211, 246, 0.22) 0%, rgba(164, 179, 239, 0.1) 32%, rgba(10, 11, 14, 0) 62%);
  pointer-events: none;
  z-index: 0;
}

.phone {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--phone-w) * 1cqw);
  padding: 1.4cqw;
  border-radius: 8.42cqw;
  background: var(--bezel);
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  --s: 1;
  transform-origin: 50% 50%;
  transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) scale(var(--s));
  transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), filter 0.5s ease;
  will-change: transform;
}

.phone[data-phone="ride"] {
  --x: var(--ride-x);
  --y: var(--ride-y);
}

.phone[data-phone="feed"] {
  --x: var(--feed-x);
  --y: var(--feed-y);
}

.phone.is-front {
  z-index: 2;
}

.phone.is-back {
  --s: var(--back-s);
  z-index: 1;
  filter: brightness(0.82);
  cursor: pointer;
}

.screen {
  display: block;
  width: 100%;
  aspect-ratio: 1206 / 2622;
  border-radius: 7.02cqw;
  overflow: hidden;
}

img.screen,
.ride-screen img {
  height: auto;
  object-fit: cover;
}

.ride-screen {
  position: relative;
  container-type: inline-size;
}

.ride-screen img {
  display: block;
  width: 100%;
}

.phone .screen {
  border-radius: calc(7.02cqw);
}

/* The ride page's stats, drawn over the screenshot at the app's sizes (in points of a 402 point wide screen) so
   they can count up like RideStatsGrid. */

.stats {
  --pt: calc(100cqw / 402);
  position: absolute;
  left: 0;
  top: calc(535.33 * var(--pt));
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(12 * var(--pt));
  row-gap: calc(18 * var(--pt));
  padding: calc(6 * var(--pt)) calc(20 * var(--pt));
  background: var(--ride-page);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--pt));
  min-width: 0;
}

.reading {
  display: flex;
  align-items: flex-start;
  gap: calc(3 * var(--pt));
  white-space: nowrap;
}

.num {
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: calc(24 * var(--pt));
  line-height: calc(31 * var(--pt));
  letter-spacing: -0.02em;
  color: #fff;
}

.unit,
.label {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color: rgba(255, 255, 255, 0.55);
}

.unit {
  font-size: calc(9 * var(--pt));
  line-height: calc(12 * var(--pt));
  letter-spacing: 0.04em;
  padding-top: calc(2 * var(--pt));
}

.unit.gap {
  padding-right: calc(3 * var(--pt));
}

.label {
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.links {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 14px;
  color: var(--text-tertiary);
}

.links a {
  color: var(--text-tertiary);
  text-decoration: none;
}

.links a:hover {
  color: var(--text);
}

/* Desktops: everything fits in the window with no scrolling. The phones take their size from the window's height
   (leaving room for the links at the bottom) as well as its width, and the headline shrinks on short windows. */

@media (min-width: 1000px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding-top: 32px;
    padding-bottom: 72px;
  }

  .stage {
    width: min(570px, calc((100dvh - 120px) * 570 / 700));
  }

  .copy {
    gap: min(28px, 3.2vh);
  }

  h1 {
    font-size: min(80px, 9.4vh);
    line-height: 1.05;
  }
}

/* Narrower desktops: tighten the gap and shrink the phones. */

@media (max-width: 1340px) and (min-width: 1000px) {
  .page {
    gap: 64px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .stage {
    width: min(570px, calc(100vw - 520px - 64px - 80px), calc((100dvh - 120px) * 570 / 700));
  }
}

/* Phones and tablets: one column, the phones under the copy, a swipe to trade them. */

@media (max-width: 999px) {
  .page {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 36px;
    padding: max(44px, calc(env(safe-area-inset-top) + 28px)) 24px 40px;
    max-width: 560px;
    margin: 0 auto;
  }

  /* Centered, in one column: the brand, then the headline and its line as a pair, then the email box. */
  .copy {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .brand {
    gap: 10px;
    margin-bottom: 26px;
  }

  .app-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .wordmark {
    height: 18px;
  }

  h1 {
    font-size: clamp(44px, 13.5vw, 56px);
    line-height: 1.02;
  }

  .lede {
    max-width: 330px;
    margin-top: 14px;
    font-size: 17px;
    line-height: 25px;
    text-wrap: balance;
  }

  .waitlist,
  .joined {
    margin-top: 28px;
  }

  .joined {
    justify-content: center;
  }

  .waitlist,
  .joined {
    height: 54px;
  }

  .waitlist input {
    padding: 0 16px;
    font-size: 16px;
  }

  .waitlist button {
    padding: 0 18px;
    font-size: 16px;
  }

  .joined {
    font-size: 15px;
    padding: 0 16px;
  }

  .note {
    margin-top: 12px;
    font-size: 14px;
  }

  /* The ride page sits centered and pins in the middle of the screen while the page scrolls on, and the scroll
     turns the two around each other until the feed is in front (home.js). Without the script, the feed peeks out
     from behind. */
  .showcase {
    display: block;
    /* The phones' height plus the scroll it takes to turn them; a pinned element can't use padding. */
    height: calc(min(100vw - 48px, 420px) * 1.55 + 28svh);
    /* The glow is wider than the screen; clip it (not hidden, which would stop the phones pinning). */
    overflow-x: clip;
    margin: 0 -24px;
    padding: 0 24px;
  }

  .stage {
    --phone-w: 69;
    --ride-x: 15.5;
    --ride-y: 0;
    --feed-x: 29;
    --feed-y: 0;
    --back-s: 0.86;
    position: sticky;
    top: max(12px, calc(50svh - min(100vw - 48px, 420px) * 0.775));
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 100 / 155;
    perspective: 1400px;
  }

  .phone {
    padding: 1.75cqw;
    border-radius: 11.1cqw;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  }

  .phone .screen {
    border-radius: 9.36cqw;
  }

  .links {
    position: static;
    padding: 8px 24px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone {
    transition: filter 0.2s ease;
  }
}