/* Additions for meet.supermetrics.com.
 *
 * Everything else comes from the mirrored Supermetrics stylesheet. This file
 * only styles the avatar stage and its states, the header's mobile menu and
 * the footer's social icons, using the same design tokens as the main site. The conversation itself runs in the overlay Naoma.startDemo()
 * opens, which Naoma styles and sizes.
 */

.meet-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-regular);
  padding: var(--spacing-large) var(--spacing-page-margin) var(--spacing-x-large);
  text-align: center;
  background-color: var(--colors-theme-background-color);
  color: var(--colors-theme-text-color);
}

.meet-hero h1 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-sizes-heading-large);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}

.meet-hero .meet-lead {
  max-width: 34em;
  margin: 0;
  font-size: var(--font-sizes-body-large);
  color: var(--colors-theme-alt-text-color);
  text-wrap: balance;
}

/* Avatar stage: a 16:9 poster with the background loop and the Join button. */
.avatar-stage {
  position: relative;
  width: 100%;
  max-width: min(1040px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 68vh;
  margin-top: var(--spacing-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75em;
  background-color: hsl(220 10% 10%);
}

/* Background loop. Covers the stage, cropping rather than letterboxing if the
   video is not 16:9. Positioned, so the loading hint and Join button are
   positioned too to stay on top. Overrides the reset's height: auto. */
.avatar-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* Dims the video while the mouse is over the stage, so the Join button stands
   out when the visitor is about to click it; otherwise the video shows
   undimmed. It comes after the video in the markup, so it paints over it, and
   the positioned hint and button paint over both. Same hue as the stage's dark
   ground. The video is mostly a white dashboard: at 60% it still came out as
   bright as the button, so 80% is what makes the button stand out.
   Only for devices with a real hover: on touch screens :hover sticks after a
   tap, so there the video is never dimmed. */
.avatar-stage-scrim {
  position: absolute;
  inset: 0;
  background-color: hsl(220 10% 10% / 0.8);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

@media (hover: hover) {
  .avatar-stage:hover .avatar-stage-scrim {
    opacity: 1;
  }
}

/* Loading: quiet hint while the SDK and consent state settle, so the box is
   never just a black rectangle. */
.avatar-stage[data-state="loading"]::after {
  content: "Loading the assistant…";
  position: relative;
  color: hsl(220 10% 60%);
  font-size: var(--font-sizes-body-regular);
}

/* With scripting off the stage never leaves "loading", and the noscript box
   renders — hide the hint so it does not sit under that box forever. (With
   scripting on the browser keeps noscript content as a plain text node, so
   this only matches the scripting-off case.) */
.avatar-stage[data-state="loading"]:has(> noscript .meet-noscript)::after {
  content: none;
}

/* Join: the demo is ready and waits for a click in the middle of the box.
   Sits on the dark video ground, not the page ground, so the outline is
   white rather than the purple used on light backgrounds. */
.avatar-join-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-sizes-button-regular);
  font-weight: 500;
  padding: 0.85em 1.75em;
  border-radius: 10em;
  /* Supermetrics red, the logo's colour. The mirrored stylesheet has no red
     token, so the hex is set here. */
  background-color: #f6252f;
  color: var(--colors-white);
  transition: background-color 200ms ease-out;
}

.avatar-join-cta:hover,
.avatar-join-cta:focus-visible {
  background-color: #d81720;
}

.avatar-join-cta:focus-visible {
  outline: 2px solid var(--colors-white);
  outline-offset: 3px;
}

/* The fallback state sits on the page ground, not the dark video ground. */
.avatar-stage[data-state="unavailable"] {
  aspect-ratio: auto;
  height: auto;
  min-height: 240px;
  background-color: transparent;
}

/* Shown when the SDK cannot load or the client is not eligible. */
.avatar-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-regular);
  max-width: 28em;
  padding: var(--spacing-large);
  border: 1px solid var(--colors-theme-border-color);
  border-radius: 0.75em;
  background-color: var(--colors-theme-alt-background-color);
}

.avatar-fallback-title {
  margin: 0;
  font-size: var(--font-sizes-body-medium);
  font-weight: 500;
}

.avatar-fallback-body {
  margin: 0;
  font-size: var(--font-sizes-body-regular);
  color: var(--colors-theme-alt-text-color);
}

.avatar-fallback-cta {
  display: inline-flex;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-sizes-button-regular);
  align-items: center;
  padding: 0.5em 1.25em;
  border-radius: 10em;
  background-color: var(--colors-purple-500);
  color: var(--colors-white);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms ease-out;
}

.avatar-fallback-cta:hover,
.avatar-fallback-cta:focus-visible {
  background-color: var(--colors-purple-600);
}

/* Footer social icons. The footer markup draws them as <span data-icon> with a
   --iconUrl mask, styled on supermetrics.com by a component <style> block that
   the scrape did not carry over. This is that rule. The SVGs are copied into
   icons/social/: Sanity's CDN refuses CORS for this origin, and mask images
   are CORS requests. */
span[data-icon] {
  pointer-events: none;
  display: var(--icon-display, inline-block);
  width: var(--icon-width, 1em);
  height: var(--icon-height, 1em);
  mask-image: var(--iconUrl);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background: var(--icon-color, currentColor);
  transition: 0.2s ease-out;
  transform: var(--icon-transform, initial);
}

.meet-noscript {
  position: relative;
  padding: var(--spacing-medium);
  border: 1px solid var(--colors-theme-border-color);
  border-radius: 0.75em;
  background-color: var(--colors-theme-alt-background-color);
}

/* Header mobile menu, built by site.js. Below the site's largeMobileDown
   breakpoint the bar keeps the logo, "Request demo" and a menu button, and the
   three links move into a panel under the header, as on supermetrics.com.
   Scoped to .has-mobile-menu, which site.js sets, so without JS the bar keeps
   all three links. */
.mobile-menu-button,
.mobile-menu {
  display: none;
}

@media screen and (max-width: 59.9975rem) {
  header.has-mobile-menu #start-trial,
  header.has-mobile-menu #login {
    display: none;
  }

  header.has-mobile-menu #request-a-demo {
    white-space: nowrap;
  }

  /* Same 24px box as supermetrics.com's; the ::before widens the tap target
     to 44px without changing the bar's height. */
  .mobile-menu-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .mobile-menu-button::before {
    content: "";
    position: absolute;
    inset: -0.625rem;
  }

  .mobile-menu-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
  }

  .mobile-menu-button[aria-expanded="false"] .icon-close,
  .mobile-menu-button[aria-expanded="true"] .icon-menu {
    display: none;
  }

  .mobile-menu:not([hidden]) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0.7em;
    max-height: calc(100dvh - var(--header-height, 0px));
    overflow-y: auto;
    padding: var(--spacing-small) var(--spacing-page-margin) var(--spacing-medium);
    border-bottom: 1px solid var(--colors-theme-border-color);
    background-color: var(--colors-theme-background-color);
    box-shadow: 0 1.5em 2em -1.5em hsl(0 0% 0% / 0.15);
  }

  .mobile-menu .nav-button {
    --padding-block: 0.8em;
    width: 100%;
    justify-content: center;
    font-size: var(--font-sizes-button-regular);
  }
}

/* Too narrow for "Request demo" beside the logo and menu button; it is still
   in the menu. supermetrics.com drops it at the same width. */
@media screen and (max-width: 357px) {
  header.has-mobile-menu #request-a-demo {
    display: none;
  }
}

@media (max-width: 960px) {
  .meet-hero { padding-top: var(--spacing-medium); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-stage-scrim,
  .avatar-join-cta,
  .avatar-fallback-cta { transition: none; }
}