/* ═══════════════════════════════════════════════════════════════════════

 * Sellify · Global reveal (vertical-page spec — single source of truth)

 * Initial: opacity 0 · translateY(60px) · scale(0.96)

 * Revealed: opacity 1 · translateY(0) · scale(1)

 * Duration: 1.2s · easing: cubic-bezier(0.16, 1, 0.3, 1)

 * Safety: fxRevealSafety auto-completes after 3s if JS never adds .in

 * ═══════════════════════════════════════════════════════════════════════ */



:root {

  --fx-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

}



.reveal {

  opacity: 0;

  transform: translateY(60px) scale(0.96);

  transition:

    opacity 1.2s var(--fx-ease-premium),

    transform 1.2s var(--fx-ease-premium);

  animation: fxRevealSafety 1.2s var(--fx-ease-premium) 3s forwards;

}



.reveal.in {

  opacity: 1;

  transform: translateY(0) scale(1);

  animation: none;

}



@keyframes fxRevealSafety {

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



/* Stagger choreography — siblings in the same row/grid */

.reveal:nth-child(1) { transition-delay: 0s; }

.reveal:nth-child(2) { transition-delay: 0.1s; }

.reveal:nth-child(3) { transition-delay: 0.2s; }

.reveal:nth-child(4) { transition-delay: 0.3s; }

.reveal:nth-child(5) { transition-delay: 0.4s; }

.reveal:nth-child(n+6) { transition-delay: 0.5s; }



/* Live Conversation / chat — no blur on demo shells or message bodies */

.demo-shell.reveal,

.demo-shell.reveal.in,

.live-conversation.reveal,

.live-conversation.reveal.in,

.chat-container.reveal,

.chat-container.reveal.in,

.reveal .demo-shell,

.reveal .demo-body,

.reveal .live-conversation,

.reveal .chat-container {

  filter: none !important;

  animation: none !important;

}



.demo-shell,

.demo-shell *,

.demo-body,

.demo-body *,

.live-conversation,

.live-conversation *,

.chat-container,

.chat-container * {

  filter: none !important;

}



.demo-shell.reveal {

  opacity: 0;

  transform: translateY(60px);

  transition:

    opacity 1.2s var(--fx-ease-premium),

    transform 1.2s var(--fx-ease-premium);

}



.demo-shell.reveal.in {

  opacity: 1;

  transform: translateY(0);

}



/* Hero — production-safe reveal: first-paint visibility, no vertical motion */
.hero .reveal,
.hero .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
  transition-delay: 0s;
}

.hero .reveal:nth-child(n) {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {

  .reveal,

  .demo-shell.reveal {

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;

    animation: none !important;

    transition: none !important;

  }

}