/* Native glass for small controls. One backdrop per signup row; its input and
   submit button share that surface instead of nesting expensive filters.
   Gradients and inset shadows suggest a curved lens without a canvas renderer. */
body.landing {
  --glass-fill: #292927;
  --glass-fill-hover: #353532;
  --glass-fill-focus: #30302e;
  --glass-light: rgb(255 255 255 / 18%);
  --glass-rim: rgb(255 255 255 / 24%);
}

.landing
  :is(
    .email-row,
    .email-row button,
    .identity-nav .waitlist-link,
    .nav-scroll-arrow,
    .consent-actions button
  ) {
  --glass-shadow:
    inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgb(255 255 255 / 8%),
    inset 1px 0 0 rgb(255 255 255 / 10%), inset -1px 0 0 rgb(255 255 255 / 10%),
    0 3px 8px rgb(0 0 0 / 16%);
  --glass-sheen:
    radial-gradient(ellipse at 12% 0%, var(--glass-light), transparent 65%),
    linear-gradient(
      165deg,
      rgb(255 255 255 / 7%),
      transparent 45%,
      rgb(229 207 170 / 5%)
    );
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-shadow);
  /* Keep the optical surface static. Only the small interaction transforms
     and fill change; blur, gradient positions and shadows never animate. */
  --interaction-transition:
    transform 320ms var(--spring), background-color 180ms ease, color 180ms ease;
}

.landing :is(.identity-nav .waitlist-link, .nav-scroll-arrow) {
  color: #eeeae3;
  border: 0;
}

/* Pearl glass keeps the primary action distinct from the darker input. No
   backdrop-filter here: the parent has already sampled the background. */
.landing :is(.email-row button, .consent-banner [data-choice="accept"]) {
  --glass-fill: rgb(255 255 255 / 88%);
  --glass-fill-hover: rgb(255 255 255 / 96%);
  --glass-light: rgb(255 255 255 / 70%);
  --glass-rim: rgb(255 255 255 / 95%);
  --glass-sheen: linear-gradient(
    155deg,
    var(--glass-light),
    transparent 60%,
    rgb(229 207 170 / 16%)
  );
  color: #161614;
}

.landing .consent-banner [data-choice="accept"] {
  --glass-fill: #fff;
  --glass-fill-hover: #fff;
  color: #111;
}
.landing .consent-banner [data-choice="customize"] {
  --glass-fill: transparent;
  --glass-fill-hover: rgb(255 255 255 / 8%);
  color: #eeeae3;
  border: 0;
}

.landing .email-row input::placeholder {
  color: #a6a39d;
}
.landing .waitlist-form .form-status {
  color: #e8e4dc;
}
.landing .waitlist-form[data-state="error"] .email-row {
  --glass-fill: #442c26;
  --glass-fill-hover: #4c3029;
  --glass-fill-focus: #4c3029;
  --glass-rim: rgb(230 162 139 / 70%);
  background-color: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}
.landing .waitlist-form[data-state="error"] .form-status {
  color: #ffd0bf;
}
.landing .waitlist-form[data-state="success"] .form-status {
  color: #e0e9c6;
}
.landing .email-row:focus-within,
.landing .waitlist-form[data-state="error"] .email-row:focus-within {
  background-color: var(--glass-fill-focus);
}
:root:not([data-focus-modality="pointer"]) .landing .email-row:focus-within {
  outline: 2px solid #e5cfaa;
  outline-offset: 3px;
}
.landing
  :is(
    .waitlist-link,
    .nav-scroll-arrow,
    .consent-actions button,
    .email-row button
  ):focus-visible {
  outline: 2px solid #e5cfaa;
  outline-offset: 3px;
  box-shadow: var(--glass-shadow);
}

@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  body.landing {
    --glass-fill: rgb(20 20 18 / 80%);
    --glass-fill-hover: rgb(36 36 32 / 84%);
    --glass-fill-focus: rgb(28 28 25 / 88%);
  }
  .landing :is(.email-row, .identity-nav .waitlist-link, .nav-scroll-arrow) {
    -webkit-backdrop-filter: blur(8px) saturate(1.25);
    backdrop-filter: blur(8px) saturate(1.25);
  }
  /* Consent buttons sit on an opaque panel and need no backdrop pass. */
}

@media (hover: hover) and (pointer: fine) {
  .landing .email-row:hover,
  .landing .email-row button:not(:disabled):hover,
  .landing .identity-nav-shell .nav-scroll-arrow:hover,
  .landing
    :is(.consent-banner, .consent-dialog)
    .consent-actions
    button:not(:disabled):hover {
    background-color: var(--glass-fill-hover);
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-shadow);
    text-shadow: none;
  }
  .landing .email-row:focus-within:hover {
    background-color: var(--glass-fill-focus);
  }
}

/* Respect native accessibility preferences, including browsers without blur. */
@media (prefers-reduced-motion: reduce) {
  .landing
    :is(
      .email-row,
      .email-row button,
      .waitlist-link,
      .nav-scroll-arrow,
      .consent-actions button
    ) {
    transition: none;
    transform: none;
  }
  .landing .email-row button:is(:hover, :active),
  .landing .identity-nav .waitlist-link:is(:hover, :active),
  .landing .identity-nav-shell .nav-scroll-arrow:is(:hover, :active),
  .landing .consent-actions button:is(:hover, :active) {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.landing {
    --glass-fill: #252523;
    --glass-fill-hover: #353532;
    --glass-fill-focus: #252523;
    --glass-rim: #b3b0a8;
  }
  .landing
    :is(
      .email-row,
      .email-row button,
      .identity-nav .waitlist-link,
      .nav-scroll-arrow,
      .consent-actions button
    ) {
    --glass-sheen: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .landing :is(.email-row button, .consent-banner [data-choice="accept"]) {
    --glass-fill: #fff;
    --glass-fill-hover: #fff;
  }
}
@media (forced-colors: active) {
  .landing
    :is(
      .email-row,
      .email-row button,
      .identity-nav .waitlist-link,
      .nav-scroll-arrow,
      .consent-actions button
    ) {
    --glass-sheen: none;
    --glass-shadow: none;
    --glass-fill: Canvas;
    --glass-fill-hover: Canvas;
    --glass-fill-focus: Canvas;
    background: Canvas;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    outline: 1px solid ButtonText;
    outline-offset: -1px;
  }
  :root:not([data-focus-modality="pointer"]) .landing .email-row:focus-within,
  .landing
    :is(
      .waitlist-link,
      .nav-scroll-arrow,
      .consent-actions button,
      .email-row button
    ):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}