/* Why it matters (EN home, after the aura block): "Less feed. More people." In the site's
   scroll-lit sentence style. Below, people
   on a gentle rise; a hello comes down from someone a little further ahead to you, and you
   pass it on to someone new. Nobody is highlighted or scored. */
.pu-lf { position: relative; }

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

.pu-lf.is-js { height: 320vh; height: 320svh; }
.pu-lf.is-js .pu-lf_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-lf_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-lf_t .w { display: inline; }
.pu-lf.is-js .pu-lf_t .w { opacity: .14; transition: opacity .2s linear; }

/* icons after their words, like "talking" in the aura sentence */
.pu-lf_ic::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin: 0 .02em 0 .2em;
  vertical-align: -.1em;
  background: center / contain no-repeat;
}
.pu-lf_ic--people::after { background-image: url(/images/home/social/group.svg?v=1); }
.pu-lf_ic--hi::after { background-image: url(/images/home/social/hello.svg?v=1); }
.pu-lf_ic--on::after { background-image: url(/images/home/social/send.svg?v=1); }

/* the stage */
.pu-lf_stage {
  --a: clamp(48px, 5vw, 64px);
  position: relative;
  flex: 1 1 auto;
  width: min(720px, 100%);
  min-height: 220px;
  max-height: 440px;
}

/* people on a gentle rise: the further right, the further ahead */
.pu-lf_p {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--a);
  height: var(--a);
  margin: calc(var(--a) / -2) 0 0 calc(var(--a) / -2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s ease, transform .6s cubic-bezier(.3, 1.6, .5, 1);
}
.pu-lf_p img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 24px -12px rgba(40, 20, 80, .35);
}
.pu-lf_p b {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.pu-lf_p.is-in { opacity: 1; transform: none; }
/* the good charge: a quiet warm aura behind a face, visible but soft. Jun already has it; it comes to Yuna,
   Alicia with the hello, and she passes it on to Maya (owner, 2026-10-03: in this block only) */
.pu-lf_p { isolation: isolate; }
.pu-lf_p::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 60, .46) 0%, rgba(255, 190, 60, .19) 44%, rgba(255, 190, 60, 0) 70%);
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.pu-lf_p.is-lit::before { opacity: 1; animation: pu-lf-aura 5s ease-in-out infinite; }
.pu-lf_p[data-k="2"]::before { animation-delay: -1.7s; }
.pu-lf_p[data-k="1"]::before { animation-delay: -3.4s; }
@keyframes pu-lf-aura { 0%, 100% { transform: scale(.95); } 50% { transform: scale(1.06); } }
/* a hello lands: a small happy bounce, not a glow */
.pu-lf_p.is-got { animation: pu-lf-got .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pu-lf-got { 30% { transform: scale(1.12); } 100% { transform: none; } }

/* the hello itself, travelling between people */
.pu-lf_hand {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--a) * .62);
  height: auto;
  margin: calc(var(--a) * -.31) 0 0 calc(var(--a) * -.31);
  opacity: 0;
  /* it carries the warm charge from one person to the next */
  filter: drop-shadow(0 0 10px rgba(255, 190, 60, .7)) drop-shadow(0 10px 18px rgba(92, 56, 170, .3));
  pointer-events: none;
  will-change: transform, opacity;
}

/* little chat bubbles: what a hello turns into */
.pu-lf_hi {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(26, 26, 26, .05), 0 12px 26px -16px rgba(40, 20, 80, .35);
  font: 500 15px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  color: #1a1a1a;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transform-origin: 0 100%;
  transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.pu-lf_hi img { width: 18px; height: 18px; display: block; }
.pu-lf_hi[data-k="1"] { left: calc(36% + var(--a) * .62); top: calc(58% - var(--a) * .34); }
.pu-lf_hi[data-k="0"] { left: calc(14% + var(--a) * .62); top: calc(78% - var(--a) * .34); }
.pu-lf_hi.is-in { opacity: 1; transform: none; }

.pu-lf_note {
  margin: 0;
  font: 500 clamp(15px, 1.3vw, 18px)/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #77736b;
  text-align: center;
  transition: opacity .6s ease;
}
.pu-lf.is-js .pu-lf_note { opacity: 0; }
.pu-lf.is-js .pu-lf_note.is-in { opacity: 1; }

/* without JS or with reduced motion: the end of the story, still */
.pu-lf:not(.is-js) .pu-lf_feed { display: none; }
.pu-lf:not(.is-js) .pu-lf_p, .pu-lf:not(.is-js) .pu-lf_hi { opacity: 1; transform: none; }
.pu-lf:not(.is-js) .pu-lf_p::before { opacity: 1; }

@media (max-width: 600px) {
  .pu-lf_stage { --a: 50px; }
  .pu-lf_hi { font-size: 13px; padding: 7px 10px; }
  .pu-lf_p b { font-size: 12px; margin-top: 4px; }
}

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

@media (prefers-reduced-motion: reduce) { .pu-lf_p.is-lit::before { animation: none; } }