/* =====================================================================
   SideQuest — teaser / landing page
   No build step. Vanilla HTML + CSS (+ a little JS for form validation).
   All values pulled from the Figma "Landing Page" (Trippy-Designs-4.23.26, qt69FjmstTjNZsCfRaMFKx, node 429-39416).
   ===================================================================== */

/* ---------- Fonts (self-hosted — no third-party requests) ---------- */
@font-face {
  font-family: "Syne";
  src: url("../assets/fonts/Syne-Variable.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Commercial / licensed display face. See README before going live. */
  font-family: "Bringbold Nineties";
  src: url("../assets/fonts/BringboldNineties-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens (from Figma variables) ---------- */
:root {
  --white: #ffffff;
  --charcoal: #363738;          /* "Grey"  */
  --lime: #e8fd88;              /* "Yellow"*/
  --blue: #4c91ed;              /* "Blue"  */
  --charcoal-10: rgba(54, 55, 56, 0.1); /* "Grey 10" */
  --placeholder: #9a9b9b;
  --error: #8f2b16;

  --font-body: "Syne", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Bringbold Nineties", "Times New Roman", Georgia, serif;

  /* Horizontal gutters that scale between mobile (24px) and desktop (64px) */
  --pad-x: clamp(24px, 4.6vw, 64px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The whole page mirrors the 1440-wide desktop frame; centered on wider screens. */
.page {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--white);
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(80px, calc(1.9vw + 72.6px), 100px);
  padding: 0 var(--pad-x);
  background: var(--white);
}
.logo {
  display: flex;
  align-items: center;
  height: clamp(34px, calc(0.82vw + 31.2px), 43px);
  text-decoration: none;
  flex: 0 0 auto;
}
.logo__lockup { height: 100%; width: auto; aspect-ratio: 193 / 43; }

.pill {
  flex: 0 0 auto;
  background: var(--lime);
  color: var(--charcoal);
  font-weight: 600;
  font-size: clamp(12px, calc(0.19vw + 11.26px), 14px);
  letter-spacing: 0.2px;
  line-height: 1;
  padding: 0.57em 1.14em;
  border-radius: 999px;
  white-space: nowrap;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  /* full-bleed: break out of the centered .page to the full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 390 / 330;     /* mobile frame ratio */
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Subtle dark wash on the left so the lime headline stays legible. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.22) 40%,
    rgba(0, 0, 0, 0) 72%
  );
}
.hero__title {
  position: absolute;
  left: clamp(33px, calc(2.95vw + 21.5px), 64px);
  bottom: clamp(20px, calc(6.86vw - 1.76px), 97px);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--lime);
  font-size: clamp(34px, calc(4.24vw + 24.92px), 86px);
  line-height: 0.977;
  text-shadow: 0 0.047em 0.63em rgba(0, 0, 0, 0.55);
}

/* =====================================================================
   TWO-UP SHOWCASE
   ===================================================================== */
.showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: clamp(24px, 4vw, 50px) clamp(15px, 3.3vw, 47px);
}

/* Each card is authored at the 640x400 desktop size and scales as one unit via
   container-query units, so it stays pixel-faithful at any width (the mobile
   frame is simply this card at 0.5625x). The container lives on the WRAPPER so
   the card's own cqw-based radius/shadow resolve against the card width too. */
.card-wrap {
  container-type: inline-size;
  width: 100%;
  max-width: 600px;
}
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 400;
  border-radius: 4.6875cqw;
  box-shadow: 0 0 1.5625cqw 0.78125cqw var(--charcoal-10);
  overflow: hidden;
}

/* ---- Dark copy + collage card ---- */
.card--dark { background: var(--charcoal); }

.card__copy {
  position: absolute;
  /* Align the copy to the page gutter so it lines up with the nav logo and
     hero headline (both sit at --pad-x), instead of the card's inner padding. */
  left: 2.6%;
  top: 12.5cqw;
  width: 44.53%;
  color: var(--white);
  font-size: 2.34375cqw;
  line-height: 1.3333;
}
.card__copy p { margin: 0 0 1.3333em; }
.card__copy p:last-child { margin-bottom: 0; }
.card__copy-accent { font-weight: 700; color: var(--lime); }

/* Staggered two-column photo wall, clipped by the card. Each column slowly
   scrolls vertically and loops seamlessly (its photo set is duplicated, and the
   loop distance equals exactly one set, so the seam is invisible). The two
   columns move in opposite directions for a gentle up-and-down feel. */
.collage { position: absolute; inset: 0; pointer-events: none; }
.collage__col {
  position: absolute;
  width: 20.3125cqw;
  will-change: transform;
}
.collage__col--a { left: 56.25%;  top: -15.625cqw; animation: collage-up   30s linear infinite; }
.collage__col--b { left: 78.125%; top: -7.8125cqw; animation: collage-down 30s linear infinite; }

.tile {
  width: 20.3125cqw;
  height: 20.3125cqw;
  margin-bottom: 1.5625cqw;
  border-radius: 3.125cqw;
  overflow: hidden;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* One full set = 4 tiles x (20.3125 + 1.5625) = 87.5cqw */
@keyframes collage-up   { from { transform: translateY(0); }         to { transform: translateY(-87.5cqw); } }
@keyframes collage-down { from { transform: translateY(-87.5cqw); }  to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .collage__col--a, .collage__col--b { animation: none; }
}

/* ---- Lime waitlist card ---- */
.card--lime { background: var(--lime); }

/* Centered headline: sparkle · "Anywhere Together." · sparkle */
.lime__head {
  position: absolute;
  left: 0;
  right: 0;
  top: 17.8125cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9375cqw;
}
.lime__sparkle { flex: 0 0 auto; width: 6.25cqw; height: 6.25cqw; }
.lime__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--charcoal);
  font-size: 7.03125cqw;
  line-height: 1;
  white-space: nowrap;
}
.lime__sub {
  position: absolute;
  left: 23.281%;
  top: 25.9375cqw;
  width: 53.438%;
  margin: 0;
  font-size: 2.8125cqw;
  line-height: 1.2;
  text-align: center;
  color: var(--charcoal);
}
.lime__form {
  position: absolute;
  left: 23.281%;
  top: 33.75cqw;
  width: 53.438%;
  display: flex;
  flex-direction: column;
  gap: 1.875cqw;
}
.lime__input {
  height: 8.75cqw;
  border: 0;
  border-radius: 4.375cqw;
  background: var(--white);
  padding: 0 3.4375cqw;
  font-family: var(--font-body);
  /* clamp keeps the field from triggering iOS zoom on small screens */
  font-size: max(2.5cqw, 16px);
  color: var(--charcoal);
  width: 100%;
}
.lime__input::placeholder { color: var(--placeholder); }
.lime__input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lime__input[aria-invalid="true"] { outline: 2px solid var(--error); }

.lime__btn {
  height: 8.4375cqw;
  border: 0;
  border-radius: 4.21875cqw;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.65625cqw;
  cursor: pointer;
  width: 100%;
}
.lime__btn:hover { filter: brightness(1.05); }
.lime__btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }

.lime__error {
  position: absolute;
  left: 23.281%;
  top: 53.5cqw;
  width: 53.438%;
  margin: 0;
  font-size: 2cqw;
  font-weight: 600;
  color: var(--error);
}

.lime__success {
  position: absolute;
  left: 23.281%;
  top: 25.9375cqw;
  width: 53.438%;
}
.lime__success-title {
  margin: 0 0 0.4em;
  font-weight: 700;
  font-size: 3cqw;
  color: var(--charcoal);
}
.lime__success-note {
  margin: 0;
  font-size: 2cqw;
  color: rgba(54, 55, 56, 0.7);
}
/* Swap form for confirmation on a valid submit */
.card--lime.is-success .lime__sub,
.card--lime.is-success .lime__form,
.card--lime.is-success .lime__error { display: none; }

/* =====================================================================
   ABOUT / CONTACT
   ===================================================================== */
.about {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--pad-x) clamp(40px, 5vw, 72px);
}
.about__title {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--charcoal);
  font-size: clamp(26px, calc(1.2vw + 22px), 40px);
  line-height: 1.05;
}
.about__title + .about__body { margin-bottom: clamp(28px, 3.5vw, 48px); }
.about__body {
  font-size: clamp(15px, calc(0.28vw + 14px), 18px);
  line-height: 1.55;
  color: var(--charcoal);
}
.about__body p { margin: 0 0 1.1em; }
.about__body p:last-child { margin-bottom: 0; }
.about__body a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.about__body a:hover { text-decoration: underline; }

/* =====================================================================
   LEGAL PAGES (privacy policy)
   ===================================================================== */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--pad-x) clamp(48px, 6vw, 88px);
}
.legal h1 {
  margin: 0 0 0.35em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, calc(1.6vw + 24px), 48px);
  line-height: 1.05;
}
.legal h2 {
  margin: 1.8em 0 0.5em;
  font-size: clamp(18px, calc(0.4vw + 16px), 22px);
  font-weight: 700;
}
.legal p, .legal li {
  font-size: clamp(15px, calc(0.28vw + 14px), 17px);
  line-height: 1.55;
}
.legal .legal__updated {
  color: var(--placeholder);
  font-weight: 600;
  margin-bottom: 2em;
}
.legal a { color: var(--blue); font-weight: 600; text-decoration: none; }
.legal a:hover { text-decoration: underline; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  /* full-bleed: break out of the centered .page to the full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column-reverse;  /* email on top, copyright below (mobile) */
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 0 var(--pad-x);
  background: var(--charcoal);
  text-align: center;
}
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer__copy {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  color: var(--white);
}
.footer__copy--sub {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}
.footer__email {
  margin: 0;
  font-size: 14px;
  color: var(--lime);
  text-decoration: none;
  word-break: break-word;
}
.footer__email:hover { text-decoration: underline; }

/* =====================================================================
   WIDER SCREENS
   ===================================================================== */

/* Hero takes the wide desktop proportions once there's room. */
@media (min-width: 700px) {
  .hero { aspect-ratio: 1440 / 500; }
}

/* Footer goes back to the desktop split (copyright left / email right). */
@media (min-width: 600px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .footer__copy  { font-size: 13px; }
  .footer__legal { align-items: flex-start; }
}

/* Two-up cards sit side by side, at the desktop layout. */
@media (min-width: 860px) {
  .showcase {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 63px;
    padding: 50px clamp(40px, 3.3vw, 47px);
  }
  .card-wrap { flex: 1 1 0; max-width: 640px; }
}