/*
 * OBBO landing motion layer
 *
 * Progressive enhancement only: the landing remains fully readable when
 * scroll-driven animations are unsupported or motion is reduced.
 * Every selector is scoped to .obbo-site so the authenticated app is untouched.
 */

.obbo-site {
  --obbo-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --obbo-motion-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Hero — deliberate first impression */
.obbo-site .obbo-hero-copy > *,
.obbo-site .obbo-product-preview {
  animation-duration: 820ms;
  animation-fill-mode: both;
  animation-timing-function: var(--obbo-motion-ease);
}

.obbo-site .obbo-hero-copy > * {
  animation-name: obbo-hero-rise;
}

.obbo-site .obbo-hero-copy .obbo-kicker {
  animation-delay: 80ms;
}

.obbo-site .obbo-hero-copy h1 {
  animation-delay: 150ms;
}

.obbo-site .obbo-hero-copy .obbo-hero-lead {
  animation-delay: 250ms;
}

.obbo-site .obbo-hero-copy .obbo-actions {
  animation-delay: 340ms;
}

.obbo-site .obbo-hero-copy .obbo-assist-note {
  animation-delay: 420ms;
}

.obbo-site .obbo-product-preview {
  animation-name: obbo-preview-enter, obbo-preview-float;
  animation-duration: 980ms, 8s;
  animation-delay: 230ms, 1.45s;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--obbo-motion-ease), ease-in-out;
}

.obbo-site .obbo-hero::before {
  animation: obbo-grid-drift 18s ease-in-out infinite alternate;
}

/* Product preview — the interface tells a tiny story on arrival */
.obbo-site .obbo-window-dots span,
.obbo-site .obbo-preview-sidebar span,
.obbo-site .obbo-chat > *,
.obbo-site .obbo-opportunity-panel > *,
.obbo-site .obbo-capability-item {
  animation: obbo-detail-in 620ms var(--obbo-motion-ease) both;
}

.obbo-site .obbo-window-dots span:nth-child(1) { animation-delay: 520ms; }
.obbo-site .obbo-window-dots span:nth-child(2) { animation-delay: 580ms; }
.obbo-site .obbo-window-dots span:nth-child(3) { animation-delay: 640ms; }

.obbo-site .obbo-preview-sidebar span:nth-of-type(1) { animation-delay: 560ms; }
.obbo-site .obbo-preview-sidebar span:nth-of-type(2) { animation-delay: 620ms; }
.obbo-site .obbo-preview-sidebar span:nth-of-type(3) { animation-delay: 680ms; }
.obbo-site .obbo-preview-sidebar span:nth-of-type(4) { animation-delay: 740ms; }

.obbo-site .obbo-chat .from-customer { animation-delay: 620ms; }
.obbo-site .obbo-chat .from-obbo { animation-delay: 820ms; }
.obbo-site .obbo-chat .obbo-handoff { animation-delay: 1.02s; }

.obbo-site .obbo-opportunity-panel > *:nth-child(1) { animation-delay: 720ms; }
.obbo-site .obbo-opportunity-panel > *:nth-child(2) { animation-delay: 790ms; }
.obbo-site .obbo-opportunity-panel > *:nth-child(3) { animation-delay: 860ms; }
.obbo-site .obbo-opportunity-panel > *:nth-child(4) { animation-delay: 980ms; }

.obbo-site .obbo-progress span {
  animation: obbo-progress-grow 1.1s var(--obbo-motion-ease) 1s both;
  transform-origin: left center;
}

.obbo-site .obbo-live-status i,
.obbo-site .obbo-board-status i,
.obbo-site .obbo-voice-ready i {
  animation: obbo-status-pulse 2.4s ease-in-out infinite;
}

.obbo-site .obbo-capability-item:nth-child(1) { animation-delay: 480ms; }
.obbo-site .obbo-capability-item:nth-child(2) { animation-delay: 560ms; }
.obbo-site .obbo-capability-item:nth-child(3) { animation-delay: 640ms; }
.obbo-site .obbo-capability-item:nth-child(4) { animation-delay: 720ms; }

/* Premium interaction polish */
.obbo-site .obbo-button svg,
.obbo-site .obbo-text-link svg {
  transition: transform 220ms var(--obbo-motion-ease);
}

.obbo-site .obbo-button:hover svg,
.obbo-site .obbo-text-link:hover svg {
  transform: translateX(4px);
}

.obbo-site :is(
  .obbo-feature-card,
  .obbo-plan-card,
  .obbo-step,
  .obbo-lead-card,
  .obbo-voice-sample
) {
  transition:
    transform 260ms var(--obbo-motion-ease),
    border-color 260ms ease,
    box-shadow 260ms ease,
    background-color 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .obbo-site :is(
    .obbo-feature-card,
    .obbo-plan-card,
    .obbo-step,
    .obbo-lead-card,
    .obbo-voice-sample
  ):hover {
    transform: translateY(-5px);
  }

  .obbo-site .obbo-product-preview:hover {
    box-shadow:
      0 52px 120px -58px rgba(0, 0, 0, 0.78),
      0 1px 0 color-mix(in srgb, var(--site-fg) 9%, transparent) inset;
  }
}

/* Scroll-driven reveals. Unsupported browsers simply render the static layout. */
@supports (animation-timeline: view()) {
  .obbo-site :is(
    .obbo-editorial-grid > *,
    .obbo-contrast-section .obbo-section-heading,
    .obbo-step,
    .obbo-product-intro > *,
    .obbo-operations-board,
    .obbo-voice-layout > *,
    .obbo-feature-card,
    .obbo-segments-grid > *,
    .obbo-segment-row,
    .obbo-pricing-heading > *,
    .obbo-plan-card,
    .obbo-pricing-note,
    .obbo-faq-grid > *,
    .obbo-faq-list details
  ) {
    animation-name: obbo-view-rise;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }

  .obbo-site .obbo-step:nth-child(2),
  .obbo-site .obbo-feature-card:nth-child(3n + 2),
  .obbo-site .obbo-plan-card:nth-child(2) {
    animation-range: entry 14% cover 38%;
  }

  .obbo-site .obbo-step:nth-child(3),
  .obbo-site .obbo-feature-card:nth-child(3n),
  .obbo-site .obbo-plan-card:nth-child(3) {
    animation-range: entry 20% cover 44%;
  }

  .obbo-site .obbo-operations-board,
  .obbo-site .obbo-voice-console {
    animation-name: obbo-view-scale;
  }
}

/* Final CTA sits at the bottom of the page and may not complete a view-driven
   animation, so we force it to render fully opaque and untransformed. */
.obbo-site .obbo-final-cta-inner > * {
  opacity: 1;
  transform: none;
}

@keyframes obbo-hero-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes obbo-preview-enter {
  from {
    opacity: 0;
    transform: translate3d(28px, 18px, 0) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes obbo-preview-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes obbo-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 34px 0, 0 34px; }
}

@keyframes obbo-detail-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes obbo-progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes obbo-status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.035); }
}

@keyframes obbo-view-rise {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes obbo-view-scale {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .obbo-site .obbo-product-preview {
    animation-name: obbo-preview-enter;
    animation-duration: 780ms;
    animation-iteration-count: 1;
  }

  .obbo-site .obbo-hero::before {
    animation: none;
  }

  .obbo-site :is(
    .obbo-feature-card,
    .obbo-plan-card,
    .obbo-step,
    .obbo-lead-card,
    .obbo-voice-sample
  ):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .obbo-site,
  .obbo-site *,
  .obbo-site *::before,
  .obbo-site *::after {
    scroll-behavior: auto !important;
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .obbo-site :is(
    .obbo-hero-copy > *,
    .obbo-product-preview,
    .obbo-chat > *,
    .obbo-opportunity-panel > *,
    .obbo-capability-item
  ) {
    opacity: 1 !important;
    transform: none !important;
  }
}