/* ============================================================
   SCENE 3 — Wordmark: letters in, then tagline badge
   ============================================================ */
.scene-wordmark{
  flex-direction: column;
  gap: 24px;
}

.scene-wordmark .wordmark{
  display:flex;
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 108px);
  letter-spacing: 2px;
  line-height: 1;
  color: var(--mea-text-primary);
}

.scene-wordmark .wordmark span{
  display:inline-block;
  opacity:0;
  transform: translateY(0.4em);
}

.scene-wordmark.is-active .wordmark span{
  animation: letter-in 0.5s cubic-bezier(0.2,0.8,0.2,1) forwards;
}

/* stagger via nth-child, generous headroom for a long wordmark */
.scene-wordmark.is-active .wordmark span:nth-child(1){ animation-delay: 0.00s; }
.scene-wordmark.is-active .wordmark span:nth-child(2){ animation-delay: 0.04s; }
.scene-wordmark.is-active .wordmark span:nth-child(3){ animation-delay: 0.08s; }
.scene-wordmark.is-active .wordmark span:nth-child(4){ animation-delay: 0.12s; }
.scene-wordmark.is-active .wordmark span:nth-child(5){ animation-delay: 0.16s; }
.scene-wordmark.is-active .wordmark span:nth-child(6){ animation-delay: 0.20s; }
.scene-wordmark.is-active .wordmark span:nth-child(7){ animation-delay: 0.24s; }
.scene-wordmark.is-active .wordmark span:nth-child(8){ animation-delay: 0.28s; }
.scene-wordmark.is-active .wordmark span:nth-child(9){ animation-delay: 0.32s; }
.scene-wordmark.is-active .wordmark span:nth-child(10){ animation-delay: 0.36s; }
.scene-wordmark.is-active .wordmark span:nth-child(11){ animation-delay: 0.40s; }
.scene-wordmark.is-active .wordmark span:nth-child(12){ animation-delay: 0.44s; }
.scene-wordmark.is-active .wordmark span:nth-child(13){ animation-delay: 0.48s; }

@keyframes letter-in{
  to{ opacity:1; transform: translateY(0); }
}

.scene-wordmark .tagline-badge{
  display:flex; align-items:center; gap:10px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--mea-text-secondary);
  opacity: 0;
  transform: translateY(8px);
}

.scene-wordmark.is-active .tagline-badge{
  animation: badge-in 0.6s ease 0.75s forwards;
}

@keyframes badge-in{
  to{ opacity:1; transform: translateY(0); }
}

.scene-wordmark .tagline-badge .badge-dot{
  width: 7px; height: 7px; border-radius:50%;
  background: var(--mea-success);
  flex-shrink: 0;
}