/* Aura on the EN home (see docs/product/CONCEPT.md, Aura). In the site's scroll-lit sentence
   style: the words light up as you scroll, and below them people open up a little further
   ahead of "You" as your aura grows. Nobody is highlighted or scored. */
.pu-au { position: relative; }

.pu-au_stick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 64px);
  padding: clamp(64px, 10vh, 120px) 20px;
  font-family: var(--_typography---font-family--primary, "BDO Grotesk", Arial, sans-serif);
}

.pu-au.is-js { height: 300vh; height: 300svh; }

.pu-au.is-js .pu-au_stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  padding-top: clamp(56px, 9vh, 96px);
  padding-bottom: clamp(24px, 5vh, 56px);
  overflow: hidden;
}

/* the same big text as the other scroll-lit sentences */
.pu-au_t {
  max-width: 980px;
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #1a1a1a;
}

.pu-au_t .w { display: inline; }
.pu-au.is-js .pu-au_t .w { opacity: .14; transition: opacity .2s linear; }

.pu-au_ic::before {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin: 0 .2em 0 .02em;
  vertical-align: -.1em;
  background: url(/images/home/social/aura.svg?v=4) center / contain no-repeat;
}
/* the chat icon comes after "talking"; after "grow", people: your circle grows */
.pu-au_ic--chat::before, .pu-au_ic--grow::before { content: none; }
.pu-au_ic--chat::after, .pu-au_ic--grow::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin: 0 .02em 0 .2em;
  vertical-align: -.1em;
  background: url(/images/home/social/chat.svg?v=1) center / contain no-repeat;
}
.pu-au_ic--grow::after { background-image: url(/images/home/social/group.svg?v=1); }


/* people above you: rows open from the bottom up as your aura grows */
.pu-au_map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
}

.pu-au_r { display: flex; gap: clamp(10px, 2vw, 22px); }

.pu-au_f {
  position: relative;
  display: block;
  width: clamp(44px, 5.2vw, 64px);
  height: clamp(44px, 5.2vw, 64px);
  border-radius: 50%;
}

/* not open yet: a light dotted circle, nothing about the person */
.pu-au_f::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(26, 26, 26, .16);
  transition: opacity .5s ease;
}

.pu-au_f img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .6s ease, transform .7s cubic-bezier(.3, 1.6, .5, 1);
}

.pu-au_f.is-open::before { opacity: 0; }
.pu-au_f.is-open img { opacity: 1; transform: none; }

.pu-au_me {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(8px, 2vh, 18px);
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.pu-au_f.is-me { width: clamp(58px, 6.6vw, 80px); height: clamp(58px, 6.6vw, 80px); }
.pu-au_f.is-me::before { display: none; }
.pu-au_f.is-me img { opacity: 1; transform: none; }

/* without JS: everyone is simply shown */
.pu-au:not(.is-js) .pu-au_f img { opacity: 1; transform: none; }
.pu-au:not(.is-js) .pu-au_f::before { display: none; }

@media (max-width: 520px) {
  .pu-au_r .pu-au_f:nth-child(5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pu-au_f img { transition: none; }
}




/* phones: a short stop; the scene plays by itself (js) */
@media (max-width: 767px) { .pu-au.is-js { height: 135vh; height: 135svh; } }