/* Title slide: the HELPS letters swirl clockwise from the word into a vertical acrostic of the team. */

[data-slide="title"] {
  --flip-ms: 1600ms;
  --flip-stagger: 30ms;
  --swirl-deg: 90deg;     /* how far the word swings clockwise (450deg = an extra full loop) */
  --swirl-bulge: .35;     /* how far the circle widens mid-flight */
  --ease-flip: cubic-bezier(.65, 0, .35, 1);
}

[data-slide="title"] .title-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--tint) 10%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--tint) 22%, transparent) 1.6px, transparent 2px) 0 0 / 40px 40px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 85%);
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}

[data-slide="title"].is-active .title-backdrop { opacity: 1; }

[data-slide="title"] .title-kicker,
[data-slide="title"] .title-tagline {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
}

[data-slide="title"] .title-kicker {
  top: 112px;
  transform: translateY(-12px);
  transition: opacity .9s var(--ease-out) .5s, transform .9s var(--ease-out) .5s;
}

[data-slide="title"] .title-tagline {
  top: 760px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--secondary);
  transform: translateY(12px);
  transition: opacity .9s var(--ease-out) .7s, transform .9s var(--ease-out) .7s;
}

[data-slide="title"].is-in .title-kicker,
[data-slide="title"].is-in .title-tagline {
  opacity: 1;
  transform: none;
}

[data-slide="title"].is-column .title-tagline {
  opacity: 0;
  transform: translateY(12px);
  transition-duration: .4s;
  transition-delay: 0s;
}

/* The word. Its layout never changes; the letters travel with transforms only. */
[data-slide="title"] .helps {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 340px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--label);
}

[data-slide="title"] .letter {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  translate: 0 18%;
  filter: blur(14px);
  transition:
    opacity 1s var(--ease-out),
    translate 1.2s var(--ease-out),
    filter 1s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms + 150ms);
}

[data-slide="title"].is-in .letter {
  opacity: 1;
  translate: none;
  filter: none;
}

/* The column: same letter-spacing in em as the word, so the scale maps glyphs exactly. */
[data-slide="title"] .names {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 138px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
}

[data-slide="title"] .slot { display: inline-block; visibility: hidden; }

/* Each name unfurls out of its initial as that letter lands. */
[data-slide="title"] .rest > span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-0.4em);
  filter: blur(6px);
  transition:
    opacity .5s var(--ease-out),
    transform .8s var(--ease-out),
    filter .5s var(--ease-out);
}

[data-slide="title"].is-column .rest > span {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(var(--flip-ms) * .85 + var(--i) * var(--flip-stagger) + var(--c) * 24ms);
}

[data-slide="title"].no-anim *,
[data-slide="title"].no-anim *::before { transition: none !important; }