/**
 * The name of the product, letter by letter, before the page.
 *
 * Every letter is its own element and arrives out of focus, from slightly
 * below, one after the next — the reveal the design asks for. The first
 * attempt drew the whole word with the pseudo-elements of <html> and swept a
 * mask across it, because those are the only boxes React cannot trip over;
 * it was safe and it was wrong, because a mask cannot animate letters
 * separately. site-intro.js explains how the real elements are kept out of
 * React's way.
 *
 * Blue throughout. The site's palette has a --violet at hue 305, which is
 * magenta in practice, and it has no business in a title card for a product
 * whose colour is blue.
 */

#sm-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(58% 48% at 50% 46%, rgba(79, 214, 238, 0.15), transparent 70%),
    radial-gradient(45% 40% at 72% 78%, rgba(122, 162, 255, 0.12), transparent 70%),
    #0a0d14;
  transition: opacity 300ms ease-in;
  will-change: opacity;
}

/*
 * Leaving: the WORD zooms away and the backdrop simply fades.
 *
 * Scaling the whole layer was the first attempt and it was ugly — what
 * shrinks then is a rectangle with the page showing around it. Only the text
 * moves now; the sheet it sits on gets out of the way by going transparent.
 */
#sm-intro[data-leaving="1"] {
  opacity: 0;
}

#sm-intro[data-leaving="1"] .sm-intro__word {
  transform: scale(0.3);
  opacity: 0;
  filter: blur(8px);
}

.sm-intro__word {
  display: flex;
  /* The name is Latin and reads left to right even on this RTL page. */
  direction: ltr;
  font-family: Vazirmatn, "Arial Black", "Segoe UI", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 8.5vw, 5rem);
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 0 26px rgba(79, 214, 238, 0.4));
  transition: transform 420ms cubic-bezier(0.7, 0, 0.2, 1), opacity 380ms ease-in,
    filter 380ms ease-in;
}

/*
 * One letter.
 *
 * The gradient is painted per letter rather than across the word, so a letter
 * that is still arriving is already the right colour — a single background
 * clipped to the whole word would have made each letter fade in with whatever
 * slice of the gradient happened to be under it.
 */
.sm-intro__l {
  display: inline-block;
  background: linear-gradient(120deg, #7ee8ff 0%, #4fd6ee 38%, #7aa2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: 0;
  transform: translateY(0.18em) scale(1.06);
  filter: blur(12px);
  animation: sm-intro-letter 520ms cubic-bezier(0.22, 0.9, 0.24, 1) forwards;
}

/* A space has nothing to bring into focus; it only holds its width. */
.sm-intro__l--space {
  width: 0.34em;
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}

@keyframes sm-intro-letter {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* Reduced motion: the script never starts it. This is the belt to that
   braces, for a browser that has the stylesheet before the script runs. */
@media (prefers-reduced-motion: reduce) {
  #sm-intro {
    display: none;
  }
}