/* ============================================================
   SCENE 6 — Convergence: icons fly back and merge into the logo
   ============================================================ */
.scene-converge{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each icon's left/top is set directly by JS (in px, relative to
   .scene-converge), not via CSS custom properties — this avoids any
   ambiguity about what the offset is relative to. The icon starts
   at its assigned left/top and animates via `transform: translate()`
   toward the exact center of the container. */
.scene-converge .converge-icon{
  position: absolute;
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border-strong);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translate(0, 0) scale(1);
}

.scene-converge .converge-icon svg{
  width: 20px; height: 20px;
  stroke: var(--mea-accent);
  fill: none;
  stroke-width: 1.6;
}

/* Sized generously — at converge-tile scale the petal detail needs
   real room, matching the larger sizing used in the grid/highlight
   scenes above rather than staying proportionally tiny. Stroke scales
   naturally with the SVG's own viewBox (no vector-effect override). */
.scene-converge .converge-icon svg.custom-mark{
  width: 34px; height: 34px;
}

.scene-converge.is-active .converge-icon{
  opacity: 1;
  animation: converge-fly 1.1s cubic-bezier(0.5,0,0.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.03s);
}

/* --dx/--dy: the exact distance from this icon's left/top to dead
   center, set inline by JS per icon (in px). */
@keyframes converge-fly{
  0%{
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100%{
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3);
  }
}

.scene-converge .converge-core{
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--mea-accent);
  opacity: 0;
  transform: scale(0.5);
}

.scene-converge.is-active .converge-core{
  animation: core-pop 0.5s ease 0.9s forwards;
}

@keyframes core-pop{
  to{ opacity:1; transform: scale(1); filter: drop-shadow(0 0 30px rgba(59,130,246,0.6)); }
}

/* ============================================================
   SCENE 7 — Closing: logo + tagline, minimal, fade to black
   ============================================================ */
.scene-closing{
  flex-direction: column;
  gap: 20px;
}

.scene-closing .logo-svg{
  width: 84px; height: auto;
  opacity: 0;
}

.scene-closing .closing-wordmark{
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: 2px;
  opacity: 0;
}

.scene-closing .closing-tagline{
  font-size: 14px;
  color: var(--mea-text-muted);
  opacity: 0;
}

.scene-closing.is-active .logo-svg{
  animation: fade-simple 0.7s ease forwards;
}
.scene-closing.is-active .closing-wordmark{
  animation: fade-simple 0.7s ease 0.25s forwards;
}
.scene-closing.is-active .closing-tagline{
  animation: fade-simple 0.7s ease 0.5s forwards;
}

@keyframes fade-simple{
  to{ opacity: 1; }
}

.scene-closing.is-active .logo-svg path,
.scene-closing.is-active .logo-svg rect{
  stroke: var(--mea-accent);
  fill: none;
  stroke-width: 8;
}