/* ============================================================
   Parqvia — coming soon.

   The page is the artwork, one image per screen shape (wide, desktop, tablet, mobile; see the
   :root blocks below), drawn at a fixed aspect ratio on a "stage". The only live element is the email form, placed over the
   empty slot in the artwork. Every position is a % of the stage and every size is in `cqw`
   (1% of the stage width), measured from the design's pixels, so the form stays locked to the
   artwork at any screen size.

   Whatever the stage doesn't cover (wider or taller screens) shows a blurred copy of the art.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/inter-latin.woff2") format("woff2");
}

:root {
  --ink: #15163a;
  --muted: #8a8fa3;
  --violet-1: #5443f6;
  --violet-2: #7e5cfa;
  --danger: #c2334d;

  /* One artwork per screen shape, each with an empty slot for the form. The form sits in that slot:
     positions are % of the artwork, sizes are cqw (1% of its width), all measured from its pixels.
     The note goes under the pill; an error shows between the subtitle and the pill. */

  /* Desktop, 1920×1080 (16:9): laptops, desktops, landscape tablets. Slot: subtitle ends 521px,
     icons start 733px, subtitle text starts at x 151px. */
  --art-w: 1920;
  --art-h: 1080;
  --art: url("assets/parqvia-desktop-1920x1080.jpg");
  --form-left: 7.45%;      /* 143px */
  --form-top: 51.76%;      /* 559px */
  --form-w: 40.78%;        /* 783px */
  --form-h: 5cqw;          /* 96px  */
  --btn-w: 15.1cqw;        /* 290px */
  --btn-h: 4.06cqw;        /* 78px  */
  --btn-inset: 0.47cqw;    /* 9px   */
  --icon-x: 2.34cqw;       /* 45px  */
  --icon-size: 1.56cqw;    /* 30px  */
  --text-x: 5.2cqw;        /* 100px */
  --text-size: 1.25cqw;    /* 24px  */
  --btn-text: 1.35cqw;     /* 26px  */
  --msg-top: 49.1%;        /* 530px */
  --consent-top: 62.5%;    /* 675px */
  --consent-size: 0.94cqw; /* 18px  */
  --msg-size: 0.94cqw;
}

/* Wide, 2560×1080 (21:9): ultrawide monitors. Same layout and text size as desktop, shifted right:
   subtitle ends 521px, icons start 732px, text starts at x 471px. */
@media (min-aspect-ratio: 2/1) {
  :root {
    --art-w: 2560;
    --art-h: 1080;
    --art: url("assets/parqvia-wide-2560x1080.jpg");
    --form-left: 18.09%;    /* 463px */
    --form-top: 51.76%;     /* 559px */
    --form-w: 30.59%;       /* 783px */
    --form-h: 3.75cqw;      /* 96px  */
    --btn-w: 11.33cqw;      /* 290px */
    --btn-h: 3.05cqw;       /* 78px  */
    --btn-inset: 0.35cqw;   /* 9px   */
    --icon-x: 1.76cqw;      /* 45px  */
    --icon-size: 1.17cqw;   /* 30px  */
    --text-x: 3.91cqw;      /* 100px */
    --text-size: 0.94cqw;   /* 24px  */
    --btn-text: 1.02cqw;    /* 26px  */
    --msg-top: 49.1%;
    --consent-top: 62.5%;
    --consent-size: 0.7cqw; /* 18px  */
    --msg-size: 0.7cqw;
  }
}

/* Tablet, 1536×2048 (3:4): upright iPads and other portrait screens that are not phone-narrow.
   Centred layout: subtitle ends 643px, icons start 874px. */
@media (max-aspect-ratio: 1/1) {
  :root {
    --art-w: 1536;
    --art-h: 2048;
    --art: url("assets/parqvia-tablet-1536x2048.jpg");
    --form-left: 23.96%;     /* 368px */
    --form-top: 33.54%;      /* 687px */
    --form-w: 52.08%;        /* 800px */
    --form-h: 6.77cqw;       /* 104px */
    --btn-w: 19.53cqw;       /* 300px */
    --btn-h: 5.6cqw;         /* 86px  */
    --btn-inset: 0.59cqw;    /* 9px   */
    --icon-x: 3.26cqw;       /* 50px  */
    --icon-size: 2.6cqw;     /* 40px  */
    --text-x: 7.49cqw;       /* 115px */
    --text-size: 1.76cqw;    /* 27px  */
    --btn-text: 1.95cqw;     /* 30px  */
    --msg-top: 31.64%;       /* 648px */
    --consent-top: 39.4%;    /* 807px */
    --consent-size: 1.56cqw; /* 24px  */
    --msg-size: 1.56cqw;
  }
}

/* Mobile, 1080×1920 (9:16): phones. Centred layout: subtitle ends 603px, icons start 820px. The pill
   starts at 12.5% so it keeps a margin when the phone layout trims the sides (see Stage). */
@media (max-aspect-ratio: 13/20) {
  :root {
    --art-w: 1080;
    --art-h: 1920;
    --art: url("assets/parqvia-mobile-1080x1920.jpg");
    --form-left: 12.5%;     /* 135px */
    --form-top: 33.23%;     /* 638px */
    --form-w: 75%;          /* 810px */
    --form-h: 9.63cqw;      /* 104px */
    --btn-w: 27cqw;         /* 292px */
    --btn-h: 7.96cqw;       /* 86px  */
    --btn-inset: 0.93cqw;   /* 10px  */
    --icon-x: 5.09cqw;      /* 55px  */
    --icon-size: 4.07cqw;   /* 44px  */
    --text-x: 11.57cqw;     /* 125px */
    --text-size: 2.5cqw;    /* 27px  */
    --btn-text: 2.87cqw;    /* 31px  */
    --msg-top: 31.6%;       /* 607px */
    --consent-top: 39.38%;  /* 756px */
    --consent-size: 2.3cqw; /* 25px  */
    --msg-size: 2.3cqw;
  }
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  /* White: Safari tints its status-bar strip with this, and the artwork's top edge is white sky. */
  background: #fff;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* clip, not hidden: a "hidden" box is still scrollable, and mobile browsers scroll it sideways when
     the stage is wider than the screen (trimmed layouts below), pushing the artwork off-centre. */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* Blurred copy of the artwork, filling whatever the stage leaves uncovered. */
.page::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: var(--art) center / cover no-repeat;
  filter: blur(40px) saturate(1.05);
  opacity: 0.85;
}

/* ---------- Stage ----------
   The stage is the artwork at its fixed aspect ratio. How it meets the screen:

   - Landscape (desktop and wide artwork): the artwork fills the screen. If the screen is narrower
     than the artwork, it fills the height and the extra width is trimmed, a quarter on the left
     (where the text and form are) and three quarters on the right (phone mockup, parking sign),
     capped at 14% of the artwork. If the screen is wider, it fills the width and up to 6% is
     trimmed off the top and bottom. Only past those caps (very square or very wide screens) do
     thin blurred bands show.
   - Portrait (tablet and mobile artwork): full width. If the screen is taller than the artwork
     (phones), the stage also grows to the full screen height with the sides trimmed evenly, at
     most 10% each side. "Full height" is lvh plus 5rem: iPhone Safari (iOS 26) reports an lvh about
     60px short of the area it draws, which left an empty strip under the floating toolbar and home
     bar; the extra covers it, at the cost of the page scrolling that far. If the artwork is taller
     than the screen, the page scrolls a little. */

.stage {
  position: relative;
  flex: none;
  container-type: inline-size;
  /* Screen wider than the artwork: fill the width, trimming up to 6% off the top and bottom (first
     term). Narrower: fill the height, trimming the sides, capped at 14% (second term). */
  --stage-w: max(
    min(100vw, 112svh * var(--art-w) / var(--art-h)),
    min(100svh * var(--art-w) / var(--art-h), 100vw / 0.86)
  );
  width: var(--stage-w);
  /* Explicit rather than aspect-ratio: as a flex item in the fixed-height landscape page, an
     aspect-ratio height got squeezed to the screen height, flattening the artwork. */
  height: calc(var(--stage-w) * var(--art-h) / var(--art-w));
  /* Centred when narrower than the screen; trimmed 1/4 left, 3/4 right when wider. */
  left: max((100vw - var(--stage-w)) / 2, (100vw - var(--stage-w)) / 4);
}

.stage__art,
.stage__art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Never stretched: if the box and the image ever disagree, crop rather than distort. */
.stage__art img {
  object-fit: cover;
}

@media (min-aspect-ratio: 1/1) {
  /* Fixed to the screen height so a stage taller than the screen is centred and its top and bottom
     clipped, rather than making the page scroll. */
  .page {
    height: 100vh;
    height: 100svh;
    display: flex;
    /* Not place-items: that shorthand would also reset align-items. */
    justify-items: normal;
    align-items: center;
  }
}

/* Squarer than 3:2 (iPad landscape): the side trim hits its cap and thin bands show above and
   below; fade the artwork into them. Wider screens never show bands, so no fade there. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  .stage__art img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  }
}

@media (max-aspect-ratio: 1/1) {
  .page {
    display: block;
    /* Newer browsers apply place-items to block layout too; that would centre the stage a second time. */
    place-items: normal;
  }

  .stage {
    --stage-w: min(max(100vw, (100lvh + 5rem) * var(--art-w) / var(--art-h)), 100vw / 0.8);
    left: 50%;
    transform: translateX(-50%);
  }

  /* The top sits at the top of the screen; only the bottom can meet the blurred surround. */
  .stage__art img {
    -webkit-mask-image: linear-gradient(to bottom, #000 97%, transparent);
    mask-image: linear-gradient(to bottom, #000 97%, transparent);
  }
}

/* Every screen: one full screen, never any scrolling. The page is pinned to the screen (which on
   iPhone Safari also reaches under the floating toolbar); whatever of the artwork runs past the
   edges is clipped rather than scrolled to. */
.page {
  position: fixed;
  inset: 0;
  min-height: 0;
}

@media (max-aspect-ratio: 1/1) {
  .stage__art img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Form ---------- */

.notify {
  position: absolute;
  left: var(--form-left);
  top: var(--form-top);
  width: var(--form-w);
  height: var(--form-h);
  margin: 0;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  /* A visible edge: the pill is white and often sits on white sky, where a faint border made it
     all but disappear. */
  border: 1.5px solid rgba(92, 70, 246, 0.22);
  box-shadow:
    0 0.6cqw 2.4cqw rgba(72, 60, 180, 0.16),
    0 0.1cqw 0.4cqw rgba(20, 22, 60, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.notify:hover {
  border-color: rgba(92, 70, 246, 0.38);
}

.notify:focus-within {
  border-color: rgba(92, 70, 246, 0.45);
  box-shadow:
    0 0 0 0.3cqw rgba(92, 70, 246, 0.14),
    0 0.5cqw 2.2cqw rgba(72, 60, 180, 0.12);
}

.notify__field {
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  cursor: text;
}

.notify__icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: var(--icon-x);
  fill: none;
  stroke: #9aa0b4;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.notify__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin-left: calc(var(--text-x) - var(--icon-x) - var(--icon-size));
  padding: 0 1cqw 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-size);
  letter-spacing: -0.005em;
}

.notify__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.notify__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100cqw #fff inset;
  -webkit-text-fill-color: var(--ink);
}

.notify__button {
  flex: none;
  width: var(--btn-w);
  height: var(--btn-h);
  margin-right: var(--btn-inset);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(60deg, var(--violet-1), var(--violet-2));
  color: #fff;
  font: inherit;
  font-size: var(--btn-text);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 0.35cqw 1.1cqw rgba(84, 67, 246, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.notify__button:hover {
  filter: brightness(1.06);
  box-shadow: 0 0.5cqw 1.5cqw rgba(84, 67, 246, 0.42);
}

.notify__button:active {
  transform: translateY(1px);
}

.notify__button:focus-visible {
  outline: 0.2cqw solid var(--violet-1);
  outline-offset: 0.25cqw;
}

.notify__button:disabled {
  cursor: progress;
  filter: saturate(0.8) brightness(0.98);
}

.notify__arrow {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.notify__button:hover .notify__arrow {
  transform: translateX(0.15em);
}

.notify.is-busy .notify__arrow {
  animation: nudge 0.8s ease-in-out infinite;
}

@keyframes nudge {
  50% { transform: translateX(0.3em); }
}

.notify__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Success replaces the field and button inside the same pill. */
.notify__done {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: var(--text-size);
  font-weight: 600;
  color: var(--ink);
  padding: 0 1.5cqw;
  text-align: center;
}

.notify__done svg {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  padding: 0.25em;
  border-radius: 50%;
  background: linear-gradient(60deg, var(--violet-1), var(--violet-2));
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notify.is-done .notify__field,
.notify.is-done .notify__button {
  display: none;
}

.notify__error {
  position: absolute;
  left: var(--form-left);
  top: var(--msg-top);
  width: var(--form-w);
  margin: 0;
  text-align: center;
  font-size: var(--msg-size);
  font-weight: 500;
  color: var(--danger);
}

/* ---------- Consent note ----------
   Clicking "Notify Me" is the consent; this line says what they're agreeing to and links the notice. */

.consent {
  position: absolute;
  left: var(--form-left);
  top: var(--consent-top);
  width: var(--form-w);
  margin: 0;
  text-align: center;
  font-size: var(--consent-size);
  line-height: 1.3;
  color: #5d6378;
}

.consent a {
  color: var(--violet-1);
  font-weight: 500;
}

.consent.is-hidden {
  display: none;
}

[hidden] {
  display: none !important;
}

.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;
}

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