@import url("./base.css");

@font-face {
  font-family: "Areal";
  src: url("./fonts/ABCAreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literatura Past";
  src: url("./fonts/LiteraturaPast-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  font-weight: 500;
  --background: #101010;
  --ink: #fff;
  --serif: "Literatura Past", Georgia, serif;
  --wordmark-size: 41.076px;
}

@keyframes scene-entrance {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .page-entering .intro-stage,
  .page-entering main {
    animation: scene-entrance 1200ms ease both;
  }
  .page-entering .identity-description {
    animation: scene-entrance 1000ms 150ms ease both;
  }
}

.identity {
  width: 226px;
  pointer-events: none;
}
.identity-brand {
  transform: translateY(var(--brand-y, 0px));
}
.identity .wordmark {
  display: inline-block;
  font-size: var(--wordmark-size);
  letter-spacing: -0.01em;
}
.identity-description {
  margin-top: var(--brand-gap, 29px);
  font: 500 12px / 1.1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--muted);
}
.identity-nav {
  align-items: center;
  transform: translateY(var(--footer-offset, 0px));
  gap: 16px;
  font: 500 16px / 1.1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--muted);
}
.waitlist-link {
  padding: 12px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
}
.waitlist-link:hover {
  background: rgb(255 255 255 / 14%);
}
.social-link {
  white-space: nowrap;
  pointer-events: auto;
}

/* The unenhanced document is a readable, ordinary scrolling story. */
.intro-stage {
  position: relative;
  min-height: 100svh;
  padding-block: 24svh 12svh;
}
.intro-art {
  position: absolute;
  left: calc(var(--margin) + var(--column) + var(--gutter));
  top: 46.875svh;
  width: calc(4 * var(--column) + 3 * var(--gutter));
  aspect-ratio: 669 / 430;
  transform: translateY(-50%);
  background: url("./media/poster.jpg") center / cover no-repeat;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #0002 5%,
      #0008 12%,
      #000e 22%,
      #000 30% 70%,
      #000e 78%,
      #0008 88%,
      #0002 95%,
      transparent
    ),
    linear-gradient(
      0deg,
      transparent,
      #0002 5%,
      #0008 12%,
      #000e 22%,
      #000 30% 70%,
      #000e 78%,
      #0008 88%,
      #0002 95%,
      transparent
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.intro-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Cross-fades onto the identical still underneath, whenever the clip lands. */
  transition: opacity 600ms ease;
}
.intro-video.is-ready {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .intro-video {
    transition: none;
  }
}
/* Feather increasingly blurred rectangular bands over the same video frame. The parent
   vignette fades the softened edges into charcoal; the center stays untouched. */
.intro-dissolve,
.intro-dissolve-layer {
  --blur-clear: 30%;
  --blur-solid: 16%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.intro-dissolve {
  --dissolve-blur: clamp(2px, 0.28vw, 4px);
}
.intro-dissolve-layer {
  -webkit-backdrop-filter: blur(var(--dissolve-blur));
  backdrop-filter: blur(var(--dissolve-blur));
  mask-image:
    linear-gradient(
      90deg,
      #000 var(--blur-solid),
      transparent var(--blur-clear),
      transparent calc(100% - var(--blur-clear)),
      #000 calc(100% - var(--blur-solid))
    ),
    linear-gradient(
      0deg,
      #000 var(--blur-solid),
      transparent var(--blur-clear),
      transparent calc(100% - var(--blur-clear)),
      #000 calc(100% - var(--blur-solid))
    );
  mask-composite: add;
}
.intro-dissolve-layer:nth-child(2) {
  --blur-clear: 23%;
  --blur-solid: 8%;
  -webkit-backdrop-filter: blur(calc(var(--dissolve-blur) * 3));
  backdrop-filter: blur(calc(var(--dissolve-blur) * 3));
}
.intro-dissolve-layer:nth-child(3) {
  --blur-clear: 16%;
  --blur-solid: 0%;
  -webkit-backdrop-filter: blur(calc(var(--dissolve-blur) * 6));
  backdrop-filter: blur(calc(var(--dissolve-blur) * 6));
}
.intro-copy {
  margin-left: calc(var(--margin) + 5 * (var(--column) + var(--gutter)));
  width: calc(3 * var(--column) + 2 * var(--gutter));
}
.intro-paragraph {
  min-width: 0;
  margin-bottom: 56px;
  font: 400 clamp(24px, 2.22222vw, 42px) / 1.2 var(--serif);
  letter-spacing: 0;
}
.intro-line {
  display: block;
  white-space: nowrap;
  transform-origin: left center;
}
.intro-line-text {
  display: inline-block;
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .intro-ready .intro {
    height: 500svh;
  }
  .intro-ready .intro-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 0;
    overflow: clip;
  }
  .intro-ready .intro-copy {
    position: absolute;
    top: 46.1%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  .intro-ready .intro-paragraph {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
  }
  .intro-ready .intro-paragraph.is-active {
    opacity: 1;
  }
  .intro-ready .intro-paragraph.is-leaving {
    animation: dematerialize 180ms ease-out both;
  }
  .intro-ready .intro-paragraph.is-entering .intro-line-text,
  [data-line-reveal][data-line-state="revealing"] .intro-line-text {
    animation: materialize 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(100ms + var(--line-delay));
  }
  [data-line-reveal][data-line-state="pending"] .intro-line-text {
    opacity: 0;
  }
  .intro-ready main {
    position: relative;
    margin-top: -100svh;
  }
  .intro-ready .identity-nav {
    opacity: var(--nav-opacity, 0);
    visibility: var(--nav-visibility, hidden);
  }
}
@keyframes dematerialize {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes materialize {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(12px) scale(1.06);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* Figma 2087:639: the four-column story sits on the right of the page. */
.story {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 90px;
}
.story .scene {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding-bottom: 0;
}
.you-title {
  min-height: 47.619048cqw;
  font-size: 19.642857cqw;
  line-height: 1.1;
  letter-spacing: 0;
}
.story-media {
  flex: 0 0 auto;
  width: 100%;
  border-radius: 4px;
  background: #ffffff0d;
}
.story-media {
  overflow: hidden;
}
.story-media img,
.story-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-media {
  cursor: pointer;
}
.story-media:focus-visible {
  outline: 2px solid #ffffff80;
  outline-offset: 3px;
}
/* The dialog sits above the header and the pinned intro, below the skip link. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
}
.lightbox[hidden] {
  display: none;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #000000e0;
  opacity: 0;
  cursor: pointer;
}
.lightbox-media {
  position: fixed;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  background: #ffffff0d;
  box-shadow: 0 40px 120px -20px #000000cc;
  /* The FLIP scales this from the thumbnail, so it must grow from its centre. */
  transform-origin: center center;
  will-change: transform;
  /* Clicking the screenshot dismisses too, so it reads as clickable. */
  cursor: pointer;
}
.product-snapshot {
  aspect-ratio: 1138 / 640;
}
.replica-snapshot {
  aspect-ratio: 672 / 432;
}
.context-snapshot {
  aspect-ratio: 1650 / 546;
}
.body-copy {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--muted);
}
.inset-copy {
  width: calc(75% - 4px);
  min-height: 96px;
  align-self: flex-end;
}
.story .scene--shaping {
  padding-top: 16.666667cqw;
  min-height: 64.285714cqw;
}
.story .scene--familiar {
  min-height: 97.619048cqw;
}
.story .scene--trust {
  min-height: 80.952381cqw;
}
.display:not(.you-title, .closing-title) {
  font-size: clamp(24px, 5.952381cqw, 48px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: wrap;
}
.scene--trust .reflection {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 14.285714cqw;
}
.trust-copy {
  display: grid;
  grid-template-columns: 1fr 3.205128fr;
  gap: 16px;
  min-height: 96px;
}
.context-caption {
  color: #fff;
}
.story .scene--ending {
  width: auto;
  margin: 0;
  padding: 16.666667cqw 0 0;
  overflow: visible;
  scroll-margin-top: 40px;
}
.closing-title {
  min-height: 47.767857cqw;
  font-size: 16.369048cqw;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: normal;
}
.footer-signup {
  width: min(100%, 500px);
  margin-top: 0;
  gap: 24px;
  font: 500 16px / 1.1 var(--sans);
}
.footer-identity {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-wordmark {
  width: auto;
  height: auto;
  font: 400 41.076px / 1 var(--serif);
  letter-spacing: -0.01em;
}
.footer-description {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
}
.form-note,
.form-status {
  font-weight: 500;
}
.email-row {
  gap: 16px;
}
.email-row input,
.email-row button {
  height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
}
.email-row input {
  flex: 1 1 0;
  width: 0;
  background: #ffffff1f;
  transition: background-color 180ms ease;
}
.email-row input:hover {
  background: #ffffff2e;
}
.email-row input:focus {
  outline: none;
  background: #ffffff47;
}
.email-row input::placeholder {
  color: var(--placeholder);
}
.email-row button {
  color: var(--background);
}
.closing-art {
  --fade-angle: 190.095381deg;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 62.5vw;
  pointer-events: none;
  mask-image: linear-gradient(
    var(--fade-angle),
    transparent 54.526%,
    #000 99.041%
  );
}
.closing-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Blur builds upward into the exact diagonal used by the artwork fade. */
.closing-art-blur {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  mask-image: linear-gradient(var(--fade-angle), #000 65%, transparent 98%);
}
.closing-art-blur:nth-of-type(2) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  mask-image: linear-gradient(var(--fade-angle), #000 55%, transparent 86%);
}
.closing-art-blur:nth-of-type(3) {
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  mask-image: linear-gradient(var(--fade-angle), #000 55%, transparent 72%);
}

@media (min-width: 761px) and (max-width: 1100px) {
  .intro-copy {
    margin-left: calc(50% + 8px);
    width: calc(50% - 8px - var(--margin));
  }
  .intro-art {
    left: 3%;
    width: 51%;
  }
  .intro-paragraph {
    font-size: clamp(24px, 3vw, 32px);
  }
  .identity-description {
    max-width: 190px;
  }
}
@media (max-width: 760px) {
  :root {
    --wordmark-size: 34px;
  }
  .identity {
    position: fixed;
    inset: 24px var(--margin) auto;
    margin: 0;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .identity-brand {
    transform: none;
  }
  .identity::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -24px calc(-1 * var(--margin)) -24px;
    background: linear-gradient(var(--background) 70%, transparent);
    opacity: var(--nav-opacity, 0);
  }
  .identity-description {
    margin-top: 12px;
    font-size: 10px;
  }
  .identity-nav {
    margin: 0;
    font-size: 12px;
    gap: 8px;
  }
  .waitlist-link {
    padding: 12px;
    min-height: 44px;
  }
  .social-link {
    display: none;
  }
  .intro-stage {
    padding-top: 60svh;
  }
  .intro-art {
    left: 4%;
    width: 92%;
    top: 35svh;
    max-height: 38svh;
  }
  .intro-copy {
    width: auto;
    margin-inline: var(--margin);
  }
  .intro-paragraph {
    font-size: clamp(23px, 6.4vw, 32px);
  }
  .intro-ready .intro-copy {
    inset-inline: 0;
    top: 70%;
  }
  main {
    padding-top: 148px;
  }
  .story {
    gap: 72px;
    padding-bottom: 64px;
  }
  .story .scene {
    min-height: 0;
    padding: 0;
    gap: 20px;
  }
  .you-title {
    font-size: 19cqw;
    min-height: 0;
    margin-bottom: 12px;
  }
  .inset-copy {
    width: 100%;
    min-height: 0;
  }
  .trust-copy {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .context-caption {
    max-width: 220px;
  }
  .closing-title {
    min-height: 0;
    margin-bottom: 24px;
  }
  .footer-description {
    font-size: 14px;
  }
  .footer-signup {
    margin-top: 0;
  }
  .email-row {
    gap: 8px;
  }
  .email-row input,
  .email-row button {
    min-height: 44px;
    padding-inline: 12px;
    font-size: 14px;
  }
  .closing-art {
    height: 650px;
  }
}
@media (max-width: 760px) and (max-height: 600px) {
  .intro-ready .intro-copy {
    top: 67%;
  }
  .intro-paragraph {
    font-size: 20px;
  }
  .intro-art {
    top: 31svh;
    max-height: 30svh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-video {
    display: none;
  }
  .intro-line {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    white-space: normal;
  }
  .intro-art,
  .intro-paragraph {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .identity-brand {
    transform: none;
  }
}