/* Minimal “framer-like” motion for non-React build. */

.no-react-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: transform, opacity;
}

.no-react-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .no-react-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero preview should feel clickable (opens full video) */
.hero-showcase__viewport[data-full-video-trigger] {
  cursor: pointer;
}
.hero-showcase__viewport[data-full-video-trigger]:focus-visible {
  outline: 3px solid rgba(45, 128, 194, 0.35);
  outline-offset: 4px;
}

/* Video modal sizing */
.modal.modal--video {
  width: min(980px, calc(100% - 32px));
  padding: 18px 18px;
}
.modal.modal--video .video-modal__body {
  position: relative;
}
.modal.modal--video .modal__close {
  z-index: 20;
  pointer-events: auto;
}
.video-modal__player {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 120px);
  border-radius: 16px;
  background: #000;
}

/* Compare fullscreen modal */
.modal.modal--compare {
  width: min(1240px, calc(100% - 32px));
  padding: 18px 18px;
}
.modal.modal--compare .compare-modal__body {
  position: relative;
}
.modal.modal--compare .compare {
  width: 100%;
  max-width: none;
  min-height: min(70vh, 720px);
  aspect-ratio: 16 / 10;
}

/* Compare labels: PRO on the left, MVP on the right (always visible). */
.compare__label--pro {
  left: 20px;
  right: auto;
  background: var(--primary-color);
}
.compare__label--mvp {
  right: 20px;
  left: auto;
  background: rgba(30, 41, 59, 0.85);
}

/* Compare should feel interactive (drag + dblclick opens fullscreen modal). */
.compare[data-compare-open] {
  cursor: ew-resize;
}
.compare[data-compare-open]:focus-visible {
  outline: 3px solid rgba(45, 128, 194, 0.35);
  outline-offset: 4px;
}