/* The roadmap keeps Coda's existing character and the welcome's Aurora palette. */
.roadmap-copy { min-width: 0; }
.roadmap-coda {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  margin: 0 auto 12px;
  isolation: isolate;
}
.roadmap-coda img { display: block; width: 112px; height: 124px; object-fit: contain; }
.roadmap-coda::before, .roadmap-coda::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px;
  border: 1px solid #8ebde580;
  border-radius: 50%;
}
.roadmap-coda::before { background: radial-gradient(circle, #8b9ee526, transparent 70%); }
.roadmap-coda::after { inset: 38px 4px; transform: rotate(-30deg); border-color: #9adbd999; }
@media (max-width: 899px) {
  [data-aurora-panel="1"]:not([hidden]) { display: flex; flex-direction: column; }
  .roadmap-copy { margin-bottom: 24px; }
}
@media (min-width: 900px) {
  body.is-marketing [data-aurora-panel="1"] > .roadmap-copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  body.is-marketing [data-aurora-panel="1"] > .roadmap-chat { grid-column: 2; grid-row: 1; min-width: 0; }
  body.is-marketing [data-aurora-panel="1"] > .aurora-roadmap { grid-column: 2; grid-row: 2; min-width: 0; }
  .roadmap-coda { margin-left: 0; }
}

/* Spin the original companion into Astro once when page two opens. */
.coda-spin-shell { position: relative; width: 180px; height: 180px; transform-origin: 50% 52%; }
.roadmap-coda .coda-spin-shell img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.roadmap-coda .coda-astro { width: 180px; height: 180px; opacity: 0; }
.roadmap-coda.is-astro .coda-before { opacity: 0; }
.roadmap-coda.is-astro .coda-astro { opacity: 1; }
.roadmap-coda.is-transforming .coda-spin-shell { animation: coda-astro-turn 1100ms cubic-bezier(.22,.61,.36,1) both; }
.roadmap-coda.is-transforming .coda-before { animation: coda-seed-out 1100ms linear both; }
.roadmap-coda.is-transforming .coda-astro { animation: coda-astro-in 1100ms linear both; }
@keyframes coda-astro-turn {
  0% { transform: perspective(650px) rotateY(0) rotateZ(0) scale(1); }
  45% { transform: perspective(650px) rotateY(165deg) rotateZ(-10deg) scale(.78); }
  78% { transform: perspective(650px) rotateY(340deg) rotateZ(3deg) scale(1.04); }
  100% { transform: perspective(650px) rotateY(360deg) rotateZ(0) scale(1); }
}
@keyframes coda-seed-out { 0%, 42% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes coda-astro-in { 0%, 42% { opacity: 0; } 52%, 100% { opacity: 1; } }
html[data-aurora-paused] .roadmap-coda.is-transforming .coda-spin-shell,
html[data-aurora-paused] .roadmap-coda.is-transforming img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .roadmap-coda.is-transforming .coda-spin-shell,
  .roadmap-coda.is-transforming img { animation: none; }
}