/* Scoped to the original static hero; the Astro proposal is independent. */
.engine {
  --engine-accent: #b59aff;
  position: relative;
  width: 100%;
  max-width: 650px;
  margin-inline: auto;
  /* Scena siedzi wyżej, odkąd nad nią nie ma podpisu: ujemny margines
     wciąga ją w miejsce, które napis zajmował optycznie. */
  margin-top: -42px;
  isolation: isolate;
}
.engine__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 50% 48%, #42296d15 0, transparent 66%);
}
.engine__stage canvas, .engine__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.engine__poster { object-fit: contain; }
.engine__stage canvas {
  opacity: 0;
  transform: translateY(22px) scale(0.96);
  transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1), transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
.js .engine__poster { opacity: 0; }
.engine[data-engine-state="ready"] canvas { opacity: 1; transform: none; }
.engine[data-engine-state="fallback"] .engine__poster { opacity: 1; transition: opacity 500ms ease; }
/* Show the flat illustration only when 3D is unavailable, never flash two
   different compositions during a normal refresh. The delayed fallback also
   covers a blocked/missing script; without JS the poster is visible at once. */
.js .engine[data-engine-state="loading"] .engine__poster { animation: engine-fallback 0s 8s forwards; }
.intro-on:not(.intro-out) .engine canvas { opacity: 0; transform: translateY(22px) scale(0.96); }
@keyframes engine-fallback { to { opacity: 1; } }
@media (min-width: 1081px) {
  .hero__grid:has(.engine) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
}
@media (max-width: 1080px) { .engine { max-width: 570px; margin-top: -26px; } }
@media (max-width: 620px) {
  .engine { max-width: 440px; margin-top: -14px; }
}
@media (prefers-reduced-motion: reduce) { .engine *, .engine *::before, .engine *::after { transition: none !important; } }