/* A short, overlapping reveal starts as soon as the scene becomes visible.
   Individual translate preserves each window's layout transform and scale. */
/* Contain the entire entrance, including shadows, at the scene's vertical
   edges. Keep the intentional lateral overlap of the floating windows. */
[data-local-viewport] [data-local-section="hero"] [data-selfgrow-hero-scene] {
  overflow-x: visible;
  overflow-y: clip;
}

[data-local-section="hero"] [data-selfgrow-hero-slot] {
  --sg-hero-rise: 24px;
  animation-name: sg-hero-card-arrive;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

/* The head bootstrap pauses the entrance before first paint. The controller
   starts only the visible responsive scene, so mobile never misses its reveal.
   Without JavaScript, the original page-load entrance remains the fallback. */
html[data-selfgrow-hero-motion="ready"] [data-selfgrow-hero-scene]:not([data-selfgrow-hero-motion="entered"]) [data-selfgrow-hero-slot] {
  animation-play-state: paused;
}

[data-local-section="hero"] [data-selfgrow-hero-slot="primary"] { animation-delay: 0ms; }
[data-local-section="hero"] [data-selfgrow-hero-slot="conversation"] { animation-delay: 80ms; }
[data-local-section="hero"] [data-selfgrow-hero-slot="community"] { animation-delay: 160ms; }

@keyframes sg-hero-card-arrive {
  from { opacity: 0; translate: 0 var(--sg-hero-rise); }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-selfgrow-hero-motion-preview="true"]) [data-local-section="hero"] [data-selfgrow-hero-slot] {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
}