/* ORA's compass (ora-compass.js): the wordmark, Arrive after sign-in, the
   etching behind the client list and the loader's compass. */

.ora-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: #2a1263;
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.ora-wordmark-o { display: inline-block; flex: none; width: .86em; height: .86em; margin-right: .04em; transform: translateY(.09em); }
.ora-wordmark-o svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ora-on-dark .ora-wordmark { color: #fff; }
.ora-dial-rose,.ora-dial-core { transform-box: view-box; transform-origin: 60px 60px; }

/* Sign-in: the logo names ORA; one paragraph says what it does. */
.auth-hero-brand { margin: 0; font-size: 78px; letter-spacing: 0; }
.auth-hero-tag { margin: 12px 0 26px; color: #e4d6ff; font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.auth-hero-copy .auth-hero-sub { max-width: 500px; margin: 0; color: rgba(255, 255, 255, .74); font-size: 19px; line-height: 1.55; }
.auth-hero-copy .auth-hero-sub em { color: #fff; font-style: normal; font-weight: 600; }

/* Landing header. */
.brand-title .ora-wordmark { font-size: 25px; }

/* Arrive: the logo in the middle of the page, then into the header. */
.ora-arrive { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; }
.ora-arrive-inner { display: flex; flex-direction: column; align-items: center; }
.ora-arrive .ora-wordmark { font-size: clamp(64px, 9vw, 112px); }
.ora-arrive .ora-wordmark-ra { display: inline-block; opacity: 0; }
.ora-arrive-tagline { margin: 16px 0 0; color: #6d35c6; font: 700 12px/1 var(--sans); letter-spacing: .2em; opacity: 0; text-transform: uppercase; }
.ora-arrive-finding { margin: 18px 0 0; color: #6c7690; font: 600 13px var(--sans); opacity: 0; transition: opacity .4s ease; }
.ora-arrive-finding.is-on { opacity: 1; }
body.ora-arriving .landing-choose { visibility: hidden; }
body.ora-arriving .hdr .brand-title,
body.ora-docking .hdr .brand-title { visibility: hidden; }
body.ora-arriving .hdr-controls,
body.ora-arriving .brand-tag { opacity: 0; }
.hdr-controls,.brand-tag { transition: opacity .5s ease .25s; }

/* The client list comes up as the logo docks. */
@keyframes ora-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.ora-landing-enter .lp-copy,
body.ora-landing-enter .lp-available,
body.ora-landing-enter .lp-engagement-card,
body.ora-landing-enter .lp-workspace { animation: ora-rise .6s cubic-bezier(.22, .75, .22, 1) both; }
body.ora-landing-enter .lp-copy { animation-delay: .12s; }
body.ora-landing-enter .lp-available { animation-delay: .24s; }
body.ora-landing-enter .lp-engagement-card { animation-delay: .32s; }
body.ora-landing-enter .lp-engagement-card:nth-child(2) { animation-delay: .39s; }
body.ora-landing-enter .lp-engagement-card:nth-child(3) { animation-delay: .46s; }
body.ora-landing-enter .lp-engagement-card:nth-child(n+4),
body.ora-landing-enter .lp-new-client-slot .lp-engagement-card { animation-delay: .53s; }
body.ora-landing-enter .lp-workspace { animation-delay: .4s; }

/* The etching behind the client list, where the orb sat. */
.ora-landing-compass {
  position: fixed;
  z-index: 1;
  top: calc(50% - min(46vh, 490px) + 2vh);
  left: calc(-1 * min(46vh, 490px) - 4vw);
  width: min(92vh, 980px);
  height: min(92vh, 980px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
}
.ora-landing-compass svg { display: block; width: 100%; height: 100%; }
body.ora-choosing .ora-landing-compass { opacity: .62; }
body.ora-choosing.ora-arriving .ora-landing-compass,
body.auth-gated .ora-landing-compass { opacity: 0; }

/* Opening a client: the compass hunts for north until the workspace is ready. */
.ec-opening-compass { display: block; width: 58px; height: 58px; margin-bottom: 16px; }
.ec-opening-compass svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(76, 29, 149, .22)); }
.ec-opening-orb .ora-etching { width: 84%; height: 84%; opacity: .55; }

/* The new-client window's top bar. */
.nc-brand .ora-wordmark { font-size: 18px; }

/* The client header: the logo is the way back to ORA. */
.ec-brand .ora-wordmark { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .ora-landing-compass,.hdr-controls,.brand-tag { transition: none; }
  body.ora-landing-enter .lp-copy,
  body.ora-landing-enter .lp-available,
  body.ora-landing-enter .lp-engagement-card,
  body.ora-landing-enter .lp-workspace { animation: none; }
}