/**
 * Landing mock motion — ala.menu-style smooth swaps & soft resets.
 * Loaded after landing-mock-stable.css.
 */

:root {
  --lm-mock-exit-ms: 340ms;
  --lm-mock-enter-ms: 460ms;
  --lm-mock-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lm-mock-ease-pop: cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* Shared mock swap pulse — disabled; panel/screen is-entering is the single motion layer */
.landing-flow-safari.is-mock-swapping .lm-ala-phone__shell,
.demo-devices-desktop__stage.is-mock-swapping .demo-devices-desktop__panels,
.ai-home-mock-wrap.is-mock-swapping .ai-ala-editor__window {
  animation: none !important;
}

.landing-flow-safari.is-mock-swapping .lm-ala-phone--tilt-right .lm-ala-phone__shell {
  animation: none !important;
}

/* Legacy swap pop (unused) */

/* —— Flow mobile captions — crossfade like screens —— */
.landing-flow-caption {
  position: relative;
  min-height: 4.35rem;
}

.landing-flow-caption__panel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity var(--lm-mock-exit-ms) var(--lm-mock-ease-out),
    transform calc(var(--lm-mock-exit-ms) + 40ms) var(--lm-mock-ease-pop);
  pointer-events: none;
}

.landing-flow-caption__panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}

.landing-flow-caption__panel.is-exiting {
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
  z-index: 0;
}

.landing-flow-caption__panel.is-entering {
  animation: lm-mock-caption-in var(--lm-mock-enter-ms) var(--lm-mock-ease-pop) forwards;
  z-index: 2;
}

@keyframes lm-mock-caption-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* —— Hero menu — subtle category highlight cycle —— */
.hero-mock.is-live .sh-menu__cat {
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s var(--lm-mock-ease-pop);
}

.hero-mock.is-live .sh-menu__cat.is-mock-highlight {
  background: rgba(15, 165, 107, 0.14);
  color: #059669;
  box-shadow: 0 0 0 1px rgba(15, 165, 107, 0.18);
  transform: scale(1.04);
}

/* —— Storefront mock — category / home crossfade —— */
.sh-menu.is-view-fading .sh-menu__scroll {
  opacity: 0.35;
  transform: translateY(5px) scale(0.992);
  transition:
    opacity 0.22s ease,
    transform 0.28s var(--lm-mock-ease-out);
}

.sh-menu__scroll {
  transition:
    opacity 0.38s var(--lm-mock-ease-out),
    transform 0.42s var(--lm-mock-ease-pop);
}

/* —— Order-live — soft cycle reset —— */
.lm-ost-phone.is-down .lm-ost-phone__sheet {
  transform: translateY(var(--lm-ost-phone-sheet-hidden-y, 136%));
  opacity: 0;
}

.lm-ost-toast.is-visible {
  animation: lm-ost-toast-in 0.45s var(--lm-mock-ease-pop) forwards;
}

.lm-ost-toast.is-leaving {
  animation: lm-ost-toast-out 0.28s ease forwards;
}

@keyframes lm-ost-toast-out {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
  }
}

.lm-ost-kanban__card--live {
  transition:
    opacity 0.28s ease,
    transform 0.32s var(--lm-mock-ease-out);
}

.lm-ost-kanban__card--live.is-leaving {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
}

[data-lm-ost-stat-orders].is-bumping,
[data-lm-ost-stat-revenue].is-bumping {
  display: inline-block;
  animation: lm-ost-stat-bump 0.42s var(--lm-mock-ease-pop);
}

@keyframes lm-ost-stat-bump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}

/* —— Setup WhatsApp — message fade out —— */
.lm-wa-mock__msg.is-leaving {
  opacity: 0 !important;
  transform: translateY(-4px) scale(0.98) !important;
  transition-duration: 0.26s !important;
}

.lm-wa-mock__link-preview.is-leaving {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.26s ease, transform 0.28s ease;
}

/* —— Flow / demo screen timing polish —— */
.landing-flow-screen,
.demo-devices-desktop__panel,
.demo-devices-mobile__panel {
  transition-duration: var(--lm-mock-exit-ms), calc(var(--lm-mock-exit-ms) + 40ms);
}

.landing-flow-screen.is-entering,
.demo-devices-desktop__panel.is-entering,
.demo-devices-mobile__panel.is-entering {
  animation: none;
}

/* Mobile — captions reserve height; avoid absolute stack bleeding into next section */
@media (max-width: 900px) {
  .landing-flow-caption {
    display: grid;
    grid-template-areas: 'stack';
    width: 100%;
    max-width: min(100%, 22rem);
    min-height: clamp(5.5rem, 28vw, 7.25rem);
    margin-inline: auto;
    padding: 0 0.75rem;
    isolation: isolate;
  }

  .landing-flow-caption__panel {
    grid-area: stack;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 100%;
  }

  .landing-flow-caption__panel[hidden] {
    display: none !important;
    opacity: 0;
    pointer-events: none;
  }

  .landing-flow-caption__title {
    text-wrap: balance;
  }

  .landing-flow-caption__text {
    text-wrap: pretty;
    max-width: 100%;
  }
}

/* Mobile — captions stay in document flow (no absolute stack bleed) */
@media (max-width: 900px) {
  .landing-flow-caption {
    display: grid;
    grid-template-areas: 'stack';
    width: 100%;
    max-width: min(100%, 22rem);
    min-height: clamp(5.25rem, 22vw, 7rem);
    margin-inline: auto;
    padding: 0 0.75rem;
    overflow: hidden;
  }

  .landing-flow-caption__panel {
    grid-area: stack;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 100%;
    text-wrap: balance;
  }

  .landing-flow-caption__panel[hidden] {
    display: none !important;
  }

  .landing-flow-caption__text {
    text-wrap: pretty;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-flow-safari.is-mock-swapping .lm-ala-phone__shell,
  .demo-devices-desktop__stage.is-mock-swapping .demo-devices-desktop__panels,
  .ai-home-mock-wrap.is-mock-swapping .ai-ala-editor__window,
  .hero-mock.is-live .sh-menu__cat.is-mock-highlight,
  [data-lm-ost-stat-orders].is-bumping,
  [data-lm-ost-stat-revenue].is-bumping,
  .landing-flow-safari.is-floating .landing-flow-safari__stage,
  .section-demo.is-motion-active .demo-devices-desktop__stage.lm-mock-tilt-host .lm-mock-tilt__inner,
  .demo-devices-desktop__orbit.is-live .demo-devices-desktop__stage {
    animation: none !important;
    transform: none !important;
  }

  .landing-flow-caption__panel.is-entering,
  .landing-flow-screen.is-entering,
  .demo-devices-desktop__panel.is-entering,
  .demo-devices-mobile__panel.is-entering {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .sh-menu.is-view-fading .sh-menu__scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}