/* "Your EasyAds is being built" (founder, 15/10/2026: "not a small box on an
   ugly blue – lines drawing in the background, clouds, a house, things
   happening while the account is made"). One scene for the start-up screen,
   the Facebook return page and the sign-up panel: a light sky, blueprint
   lines that draw themselves, drifting clouds, the house building stage by
   stage and small cards ticking off what is being set up. Plain CSS, so the
   server page and index.html use it too (public/scene/build-scene.css). */
.bs {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: #141428;
  background:
    radial-gradient(
      1200px 600px at 85% 0%,
      rgba(42, 153, 255, 0.16),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at 0% 100%,
      rgba(167, 88, 248, 0.16),
      transparent 60%
    ),
    linear-gradient(180deg, #f8f5ff 0%, #f1f7ff 55%, #ffffff 100%);
}
.bs.is-inline {
  position: absolute;
}
.bs-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bs-grid path {
  stroke: rgba(91, 47, 201, 0.07);
  stroke-width: 1;
  fill: none;
}
.bs-draw {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: bs-draw 7s ease-in-out infinite;
}
.bs-draw.is-purple {
  stroke: rgba(167, 88, 248, 0.45);
  stroke-width: 2;
}
.bs-draw.is-blue {
  stroke: rgba(42, 153, 255, 0.45);
  stroke-width: 2;
}
.bs-draw.is-faint {
  stroke: rgba(20, 20, 40, 0.16);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  stroke-dashoffset: 0;
  animation: bs-march 2.4s linear infinite;
}
.bs-draw.d2 {
  animation-delay: 0.6s;
}
.bs-draw.d3 {
  animation-delay: 1.2s;
}
.bs-draw.d4 {
  animation-delay: 1.8s;
}
.bs-draw.d5 {
  animation-delay: 2.4s;
}
.bs-draw.d6 {
  animation-delay: 3s;
}
@keyframes bs-draw {
  0% {
    stroke-dashoffset: 1400;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes bs-march {
  to {
    stroke-dashoffset: -28;
  }
}
/* Clouds: three soft shapes drifting right to left. */
.bs-cloud {
  position: absolute;
  width: 180px;
  height: 56px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
  filter: drop-shadow(0 10px 18px rgba(42, 60, 140, 0.08));
  animation: bs-drift 38s linear infinite;
}
.bs-cloud::before,
.bs-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.bs-cloud::before {
  width: 80px;
  height: 80px;
  left: 26px;
  top: -38px;
}
.bs-cloud::after {
  width: 60px;
  height: 60px;
  left: 88px;
  top: -26px;
}
.bs-cloud.c1 {
  top: 12%;
  left: 100%;
}
.bs-cloud.c2 {
  top: 26%;
  left: 100%;
  transform: scale(0.7);
  animation-duration: 52s;
  animation-delay: -20s;
  opacity: 0.75;
}
.bs-cloud.c3 {
  top: 7%;
  left: 100%;
  transform: scale(0.5);
  animation-duration: 64s;
  animation-delay: -41s;
  opacity: 0.6;
}
@keyframes bs-drift {
  from {
    translate: 0 0;
  }
  to {
    translate: calc(-100vw - 260px) 0;
  }
}
/* The middle: the house, its caption and the cards. */
.bs-middle {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(92vw, 560px);
  text-align: center;
}
.bs-brand {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(45deg, #a758f8, #2a99ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bs-house {
  position: relative;
  width: min(72vw, 340px);
  aspect-ratio: 1;
  animation: bs-float 4.8s ease-in-out infinite;
}
.bs-house img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 26px 30px rgba(32, 18, 96, 0.2));
  animation: bs-stage 6s infinite;
}
.bs-house img:nth-child(2) {
  animation-delay: 1s;
}
.bs-house img:nth-child(3) {
  animation-delay: 2s;
}
.bs-house img:nth-child(4) {
  animation-delay: 3s;
}
.bs-house img:nth-child(5) {
  animation-delay: 4s;
}
.bs-house img:nth-child(6) {
  animation-delay: 5s;
}
@keyframes bs-stage {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  5% {
    opacity: 1;
    transform: none;
  }
  17% {
    opacity: 1;
  }
  21% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bs-float {
  50% {
    transform: translateY(-8px);
  }
}
.bs-shadow {
  width: min(52vw, 240px);
  height: 18px;
  margin-top: -26px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(32, 18, 96, 0.18),
    transparent
  );
  animation: bs-shadow 4.8s ease-in-out infinite;
}
@keyframes bs-shadow {
  50% {
    transform: scaleX(0.9);
    opacity: 0.7;
  }
}
.bs-title {
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bs-status {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #55556b;
}
.bs-dots::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: bs-dots 1.4s steps(4) infinite;
}
@keyframes bs-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
.bs-cards {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.bs-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(42, 60, 140, 0.14);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  animation: bs-card 8s ease-in-out infinite;
}
.bs-card i {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef0f6;
  font-style: normal;
}
.bs-card i::after {
  content: "";
  width: 10px;
  height: 6px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  animation: bs-tick 8s ease-in-out infinite;
  animation-delay: inherit;
}
.bs-card i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, #a758f8, #2a99ff);
  transform: scale(0);
  animation: bs-tick-bg 8s ease-in-out infinite;
  animation-delay: inherit;
}
.bs-card i::after {
  position: relative;
  z-index: 1;
}
.bs-card.k1 {
  top: 14%;
  left: -6%;
  animation-delay: 0.4s;
}
.bs-card.k2 {
  top: 30%;
  right: -8%;
  animation-delay: 1.6s;
}
.bs-card.k3 {
  top: 52%;
  left: -10%;
  animation-delay: 2.8s;
}
.bs-card.k4 {
  top: 64%;
  right: -4%;
  animation-delay: 4s;
}
@keyframes bs-card {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  6% {
    opacity: 1;
    transform: none;
  }
  80% {
    opacity: 1;
    transform: none;
  }
  90%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes bs-tick {
  0%,
  18% {
    opacity: 0;
  }
  24%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bs-tick-bg {
  0%,
  16% {
    transform: scale(0);
  }
  22%,
  85% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
.bs-action {
  display: none;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(45deg, #a758f8, #2a99ff);
}
.bs.is-done .bs-action {
  display: inline-block;
}
.bs.is-done .bs-cards,
.bs.is-done .bs-dots::after {
  display: none;
}
@media (max-width: 600px) {
  .bs-card {
    font-size: 12px;
    padding: 8px 10px 8px 8px;
  }
  .bs-card.k1 {
    left: 0;
    top: 4%;
  }
  .bs-card.k2 {
    right: 0;
    top: 18%;
  }
  .bs-card.k3 {
    left: 0;
    top: 46%;
  }
  .bs-card.k4 {
    right: 0;
    top: 58%;
  }
  .bs-title {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bs *,
  .bs *::before,
  .bs *::after {
    animation: none !important;
  }
  .bs-draw {
    stroke-dashoffset: 0;
  }
  .bs-house img:last-child,
  .bs-card {
    opacity: 1;
  }
  .bs-card i::before {
    transform: scale(1);
  }
  .bs-card i::after {
    opacity: 1;
  }
}
.bs-art {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
}
/* After the first tour (founder, 15/10/2026: "then, with a really good
   animation, your account comes up"): the scene ticks off its cards fast,
   then zooms through the house into the account. */
.bs-reveal {
  z-index: 2000;
  animation: bs-reveal-in 380ms ease-out both;
}
.bs-reveal .bs-card {
  animation-duration: 3.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.bs-reveal .bs-card.k1 {
  animation-delay: 0.15s;
}
.bs-reveal .bs-card.k2 {
  animation-delay: 0.55s;
}
.bs-reveal .bs-card.k3 {
  animation-delay: 0.95s;
}
.bs-reveal .bs-card.k4 {
  animation-delay: 1.35s;
}
.bs-reveal .bs-house img {
  animation-duration: 2.4s;
  animation-iteration-count: 1;
}
.bs-reveal .bs-house img:last-child {
  animation: bs-final 2.4s ease-out forwards;
}
@keyframes bs-final {
  0%,
  70% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  80%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.bs-reveal.is-leaving {
  animation: bs-reveal-out 760ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
.bs-reveal.is-leaving .bs-middle {
  animation: bs-zoom 760ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
@keyframes bs-reveal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bs-reveal-out {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes bs-zoom {
  to {
    transform: scale(2.6);
    opacity: 0;
    filter: blur(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bs-reveal.is-leaving,
  .bs-reveal.is-leaving .bs-middle {
    animation: none !important;
    opacity: 0;
  }
}
.bs-reveal {
  pointer-events: none;
}