/* Greetings story, continued from the Telegram phone scene inside the same sticky section.
   The hand from "Say hello to Purple" stays in the centre (no circle) with Alicia on its corner
   and waves. Daniel appears opposite; golden energy runs from both of them into the hand, the
   hand lights up and waves, and they chat like in a messenger: letters are stamped into the
   composer, bubbles land with a soft knock. A wide panel shows how many people are out there,
   each a hello away. Behind it all, symbols drift as noise and swarm into a hand.
   Without JS (or with reduced motion) only the sentences show, as a list. */
/* 270vh phone scene + 300vh story + 100vh to let go. The story is scrubbed straight from the
   scroll (js/pu-hello.js, MAP): its length here sets the pace, every wheel step moves it */
.pu-iv.is-js.pu-iv--hi {
  height: 670vh !important;
  height: 670svh !important;
}
/* phones: a little shorter (270 + 280 + 100) */
@media (max-width: 767px) {
  .pu-iv.is-js.pu-iv--hi {
    height: 650vh !important;
    height: 650svh !important;
  }
}

.pu-hi {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: #1a1a1a;
  text-align: center;
}

.pu-hi_caps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pu-hi_cap + .pu-hi_cap { margin-top: 32px; }

/* the same big, sure, scroll-lit sentence as "Tasks, games and Superboxes…" above */
.pu-hi_t {
  margin: 0;
  font-family: var(--_typography---font-family--primary, "BDO Grotesk", Arial, sans-serif);
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #1a1a1a;
}

.pu-hi_swarm,
.pu-hi_stage,
.pu-hi_side,
.pu-hi_hand { display: none; }

/* ---------- live scroll story ---------- */
.pu-hi.is-live {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.pu-hi.is-live .pu-hi_swarm {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.pu-hi.is-live .pu-hi_caps {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 7vh;
  top: 7svh;
  width: min(92vw, 980px);
  transform: translateX(-50%);
}

.pu-hi.is-live .pu-hi_cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.pu-hi.is-live .pu-hi_cap .w {
  opacity: .14;
  /* no transition: the words are scrubbed (and eased) by the scroll, both ways */
}

.pu-hi.is-live .pu-hi_stage {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--_typography---font-family--primary, "BDO Grotesk", Arial, sans-serif);
}

.pu-hi.is-live .pu-hi_stage > * {
  position: absolute;
  opacity: 0;
  will-change: opacity, transform;
}

/* the hand that travels on from the Telegram scene, now without its circle */
.pu-hi.is-live .pu-hi_hand {
  z-index: 3;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  /* drawn big and scaled down, so the vector hand stays sharp at any size */
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.pu-hi_hand img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 70% 85%;
  filter: drop-shadow(0 32px 56px rgba(92, 56, 170, .22));
  /* its own layer: the sway and the wave turn it without painting the soft shadow again */
  will-change: transform;
}


@keyframes pu-hi-wave {
  0%, 100% { transform: rotate(0); }
  15%, 45% { transform: rotate(16deg); }
  30%, 60% { transform: rotate(-9deg); }
  75% { transform: rotate(5deg); }
}

/* golden glow behind the hand and a bright sweep across it when the energy arrives */
.pu-hi_hglow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 190%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 70, .7) 0%, rgba(255, 210, 40, .26) 38%, rgba(255, 210, 40, 0) 66%);
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
}

.pu-hi_hsweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 250, 220, .9) 48%, rgba(255, 222, 80, .85) 54%, rgba(255, 255, 255, 0) 70%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: url(/images/home/purple-wave-hand.svg?v=1) center / contain no-repeat;
  mask: url(/images/home/purple-wave-hand.svg?v=1) center / contain no-repeat;
  opacity: 0;
}

.pu-hi_face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #e9eef5;
}

/* Alicia and Daniel, with a golden aura while the energy flows */
.pu-hi_al,
.pu-hi_dn {
  z-index: 4;
  width: 6.4em;
  height: 6.4em;
  margin: -3.2em 0 0 -3.2em;
  border-radius: 50%;
  box-shadow: 0 0 0 .3em #fff, 0 1em 2.4em rgba(40, 20, 80, .16);
}

.pu-hi_aura {
  position: absolute;
  inset: -.32em;
  border-radius: 50%;
  box-shadow: 0 0 0 .1em rgba(255, 210, 40, .9), 0 0 .5em rgba(255, 214, 50, .35);
  opacity: 0;
  animation: pu-hi-aura 2.4s ease-in-out infinite;
}

@keyframes pu-hi-aura {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.pu-hi_dn .pu-hi_face { filter: blur(.3em); }

.pu-hi_lock {
  position: absolute;
  right: -.1em;
  bottom: -.1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0 0 0 .2em #fff;
  background: #1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 52% no-repeat;
}

.pu-hi_nm {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: .8em;
  transform: translateX(-50%);
  font-size: 1.15em;
  font-weight: 600;
  white-space: nowrap;
}

.pu-hi_dn .pu-hi_nm { opacity: 0; }

/* one clear golden line: from Daniel into the hand, around every finger and the palm, then on to Alicia */
.pu-hi.is-live .pu-hi_trace {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.pu-hi_trace { display: none; }

.pu-hi_tr,
.pu-hi_tr-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pu-hi_tr {
  stroke: #ffcf24;
  stroke-width: 1.7;
}

.pu-hi_tr-glow {
  stroke: rgba(255, 214, 60, .28);
  stroke-width: 6;
}

/* the chat, like a messenger: a feed that grows from the bottom and a composer */
.pu-hi_chat {
  z-index: 3;
  left: 4%;
  right: 4%;
  top: 24%;
  padding: 1em 1em .9em;
  border-radius: 1.8em;
  /* light as air: a thin glass sheet, the room shows through */
  background: rgba(255, 255, 255, calc(var(--card, .74) * .62));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 .8em 2.4em rgba(40, 20, 80, .05);
}

.pu-hi_feed {
  height: 15.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 1.6em);
  mask-image: linear-gradient(transparent, #000 1.6em);
}

.pu-hi_line {
  flex: none;
  box-sizing: content-box;
  display: flex;
  align-items: flex-end;
  gap: .5em;
  height: 0;
  overflow: visible;
}

.pu-hi_line.is-out { flex-direction: row-reverse; }

.pu-hi_line .pu-hi_face {
  flex: none;
  width: 2em;
  height: 2em;
}

.pu-hi_msg {
  max-width: 78%;
  padding: .48em .85em;
  border-radius: 1.2em 1.2em 1.2em .4em;
  background: #fdfcfe;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .05);
  color: #2a2630;
  font-size: 1.05em;
  line-height: 1.28;
  text-align: left;
  transform-origin: 0 100%;
}

.is-out .pu-hi_msg {
  border-radius: 1.2em 1.2em .4em 1.2em;
  /* Alicia's words: a light lilac wash, not a heavy fill */
  background: #f1eafd;
  box-shadow: inset 0 0 0 1px rgba(141, 75, 239, .1);
  color: #5b2bb5;
  transform-origin: 100% 100%;
}

.pu-hi_wd { white-space: nowrap; }

/* a glyph emoji plays over the words: they wait underneath, then show through */
.pu-hi_msg .pu-hi_wd { transition: opacity .45s ease; }
.pu-hi_msg.is-gm .pu-hi_wd { opacity: 0; transition: none; }

.pu-hi_ch {
  display: inline-block;
  white-space: pre;
}

/* ? and ! have a life of their own */
.pu-hi_pk {
  display: inline-block;
  transform-origin: 50% 90%;
}

/* starts when the message lands, then now and then, each one on its own rhythm */
.pu-hi_pk.is-on { animation: pu-hi-pk var(--pd, 7s) ease-in-out infinite; }

@keyframes pu-hi-pk {
  0%, 18%, 100% { transform: none; }
  4% { transform: translateY(-.35em) scale(1.35) rotate(-12deg); }
  10% { transform: translateY(0) scale(.92) rotate(6deg); }
  14% { transform: scale(1.06); }
}

.pu-hi_typing {
  flex: none;
  align-self: flex-start;
  display: flex;
  gap: .3em;
  margin-left: 2.5em;
  padding: .7em .9em;
  border-radius: 1.2em;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .05);
  height: 0;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.pu-hi_typing i {
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: #a69cb8;
  animation: pu-hi-dot 1s ease-in-out infinite;
}

.pu-hi_typing i:nth-child(2) { animation-delay: .15s; }
.pu-hi_typing i:nth-child(3) { animation-delay: .3s; }

@keyframes pu-hi-dot {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-.25em); opacity: 1; }
}

.pu-hi_cmp {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-top: .7em;
  padding: .28em .28em .28em 1em;
  /* a thin line, nothing heavy: just where you write */
  border-radius: 1.4em;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .07);
  transition: box-shadow .3s ease;
}

.pu-hi_cmp.is-typing { box-shadow: inset 0 0 0 1px rgba(141, 75, 239, .28), 0 0 0 .25em rgba(141, 75, 239, .06); }

.pu-hi_cmp-t {
  position: relative;
  flex: 1;
  height: 1.4em;
  font-size: 1.05em;
  line-height: 1.4em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.pu-hi_cmp-ph,
.pu-hi_cmp-m {
  position: absolute;
  left: 0;
  top: 0;
}

.pu-hi_cmp-ph { color: #a29bae; }
.pu-hi_cmp-m { opacity: 0; }

/* send: a small arrow that comes alive. Lilac while empty, filled once there are words;
   on send it squashes, shoots up and away with a ripple, and a new one springs back in. */
.pu-hi_send {
  position: relative;
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: rgba(141, 75, 239, .12);
  color: #8d4bef;
  pointer-events: auto;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.pu-hi_cmp.is-typing .pu-hi_send { background: #8d4bef; color: #fff; }

.pu-hi_send svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  margin: -.5em 0 0 -.5em;
  overflow: visible;
}

.pu-hi_send-r {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 .12em #8d4bef;
  opacity: 0;
  pointer-events: none;
}

.pu-hi_send:hover { transform: scale(1.08); }
.pu-hi_send:active { transform: scale(.88); }
.pu-hi_send.is-pop svg { animation: pu-hi-fly .75s cubic-bezier(.3, 0, .2, 1); }
.pu-hi_send.is-pop .pu-hi_send-r { animation: pu-hi-ripple .6s ease-out; }

@keyframes pu-hi-fly {
  0% { transform: none; opacity: 1; }
  15% { transform: translateY(.15em) scale(1.15, .8); }
  45% { transform: translateY(-1.6em) scale(.8, 1.2); opacity: 0; }
  46% { transform: translateY(.9em) scale(.4); opacity: 0; }
  80% { transform: translateY(-.1em) scale(1.12); opacity: 1; }
  100% { transform: none; }
}

@keyframes pu-hi-ripple {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* the people panel: many people, each a hello away */
.pu-hi.is-live .pu-hi_side {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 340px;
  box-sizing: border-box;
  padding: 10px 18px 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, calc(var(--card, .74) * .62));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 12px 36px rgba(40, 20, 80, .05);
  font-family: var(--_typography---font-family--primary, "BDO Grotesk", Arial, sans-serif);
  text-align: left;
  opacity: 0;
  will-change: opacity, transform;
}

.pu-hi_side:not(.is-row) .pu-hi_side-top {
  margin: 4px 0 10px;
  font-size: 22px;
}

.pu-hi_side-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.pu-hi_side-top img { width: 24px; height: auto; }

.pu-hi_list {
  height: 330px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.pu-hi_roll { animation: pu-hi-roll 26s cubic-bezier(.45, 0, .55, 1) infinite; }

@keyframes pu-hi-roll {
  0% { transform: translateY(0); }
  12% { transform: translateY(-9%); }
  20% { transform: translateY(-9%); }
  38% { transform: translateY(-21%); }
  46% { transform: translateY(-21%); }
  60% { transform: translateY(-31%); }
  68% { transform: translateY(-31%); }
  92% { transform: translateY(-50%); }
  100% { transform: translateY(-50%); }
}

.pu-hi_pp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

.pu-hi_pp + .pu-hi_pp { border-top: 1px solid rgba(26, 26, 26, .06); }

.pu-hi_pp-ava {
  flex: none;
  width: 44px;
  height: 44px;
}

.pu-hi_ini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  color: rgba(26, 26, 26, .55);
}

.pu-hi_pp-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pu-hi_pp-tx b {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.pu-hi_pp-tx small {
  font-size: 13px;
  color: rgba(26, 26, 26, .55);
}

/* a tiny chat button for each person: a small lilac drop with Purple's own bubble in it
   (soft, with a curled tail). When someone has written to you the bubble's line turns gold. */
.pu-hi_pp-ic {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(26, 26, 26, .045);
  color: #8d4bef;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .25s ease;
}

.pu-hi_pp-ic:hover { transform: translateY(-2px) scale(1.12); background-color: rgba(26, 26, 26, .08); }
.pu-hi_pp-ic:active { transform: scale(.86); transition-duration: .1s; }
.pu-hi_pp-ic.is-pop { animation: pu-hi-tap .6s cubic-bezier(.3, 1.6, .5, 1); }

.pu-hi_pp.is-new .pu-hi_pp-ic {
  /* the same button as a read chat, only the bubble's line turns gold and breathes */
  color: #f0a500;
}

.pu-hi_pp.is-new .pu-hi_pp-ic svg { animation: pu-hi-new 2.6s ease-in-out infinite; }


.pu-hi_pp-ic svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  overflow: visible;
}

.pu-hi_pp-ic circle { display: none; }

.pu-hi_pp:nth-child(3n) .pu-hi_pp-ic { animation-delay: -1.1s; }
.pu-hi_pp:nth-child(3n+1) .pu-hi_pp-ic { animation-delay: -2.2s; }

/* a new message: the gold bubble swells a little, then settles */
@keyframes pu-hi-new {
  0%, 55%, 100% { transform: none; }
  20% { transform: scale(1.16) rotate(-6deg); }
  35% { transform: scale(.96) rotate(2deg); }
}

@keyframes pu-hi-tap {
  0% { transform: scale(.86); }
  50% { transform: scale(1.2); }
  100% { transform: none; }
}

@media (max-width: 767px) {
  .pu-hi_t { font-size: clamp(22px, 6.4vw, 30px); }
  /* the whole conversation fits, nothing is cut in half; the card is nearly solid, so the
     drifting symbols stay behind it (docs/MOBILE-SCROLL-AUDIT.md) */
  .pu-hi_feed { height: 17em; }
  .pu-hi_chat { background: rgba(255, 255, 255, .94); }
}

/* narrow screens: the panel sits under the chat as one sliding row of faces */
.pu-hi.is-live .pu-hi_side.is-row {
  width: auto;
  padding: 8px 0;
  border-radius: 18px;
}

.pu-hi_side.is-row .pu-hi_side-top { display: none; }

.pu-hi_side.is-row .pu-hi_list {
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.pu-hi_side.is-row .pu-hi_roll {
  display: flex;
  width: max-content;
  animation: pu-hi-roll-x 30s linear infinite;
}

@keyframes pu-hi-roll-x {
  to { transform: translateX(-50%); }
}

.pu-hi_side.is-row .pu-hi_pp {
  flex-direction: column;
  gap: 4px;
  width: 62px;
  padding: 0;
}

.pu-hi_side.is-row .pu-hi_pp + .pu-hi_pp { border-top: 0; }
.pu-hi_side.is-row .pu-hi_pp-ava { width: 38px; height: 38px; }
.pu-hi_side.is-row .pu-hi_ini { font-size: 15px; }
.pu-hi_side.is-row .pu-hi_pp-tx { align-items: center; }
.pu-hi_side.is-row .pu-hi_pp-tx b { font-size: 12px; }
.pu-hi_side.is-row .pu-hi_pp-tx small { display: none; }

.pu-hi_side.is-row .pu-hi_pp-ic {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 24px 0 0 28px;
  background-color: #f1f0ee;
}

.pu-hi_side.is-row .pu-hi_pp-ic svg { width: 10px; height: 10px; margin: -5px 0 0 -5px; }


.pu-hi_side.is-row .pu-hi_pp { position: relative; }

/* one thing at a time: Alicia, Daniel, the hand and their chat fade out before the people panel */
.pu-hi.is-live .pu-hi_stage,
.pu-hi.is-live .pu-hi_hand,
.pu-hi.is-live .pu-hi_trace { filter: opacity(var(--gone, 1)); }

.pu-hi_side-top small {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, .45);
}

.pu-hi_side-top small { white-space: nowrap; }

@media (max-width: 480px) {
  .pu-hi_side:not(.is-row) .pu-hi_side-top { font-size: 18px; }
}