/* Shared motion — tokens from vars.css, recipes from emilkowalski/skills */

html {
  scroll-behavior: smooth;
}

/* Hero first-paint stagger (js-motion only, so no-JS stays visible) */
html.js-motion .hero-section .title-text .div,
html.js-motion .hero-section .crm-just-do-fit,
html.js-motion .hero-section .crm-just-do-fit-mobile,
html.js-motion .hero-section .buttons,
html.js-motion .hero-section .download-app-cta,
html.js-motion .hero-section .hero-section-images,
html.js-motion .hero-section .hero-section-laptop-mobile {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-marketing) var(--ease-out),
    transform var(--duration-marketing) var(--ease-out);
}

html.js-motion .hero-section.is-ready .title-text .div,
html.js-motion .hero-section.is-ready .crm-just-do-fit,
html.js-motion .hero-section.is-ready .crm-just-do-fit-mobile,
html.js-motion .hero-section.is-ready .buttons,
html.js-motion .hero-section.is-ready .download-app-cta,
html.js-motion .hero-section.is-ready .hero-section-images,
html.js-motion .hero-section.is-ready .hero-section-laptop-mobile {
  opacity: 1;
  transform: translateY(0);
}

html.js-motion .hero-section.is-ready .title-text .div {
  transition-delay: 0ms;
}

html.js-motion .hero-section.is-ready .crm-just-do-fit,
html.js-motion .hero-section.is-ready .crm-just-do-fit-mobile {
  transition-delay: 60ms;
}

html.js-motion .hero-section.is-ready .buttons {
  transition-delay: 120ms;
}

html.js-motion .hero-section.is-ready .download-app-cta {
  transition-delay: 180ms;
}

html.js-motion .hero-section.is-ready .hero-section-images,
html.js-motion .hero-section.is-ready .hero-section-laptop-mobile {
  transition-delay: 240ms;
}

/* Once-per-section scroll reveal */
html.js-motion .motion-reveal {
  opacity: 0;
  transform: translate(var(--reveal-x, 0), 12px);
  transition:
    opacity var(--duration-marketing) var(--ease-out),
    transform var(--duration-marketing) var(--ease-out);
}

html.js-motion .motion-reveal.is-visible {
  opacity: 1;
  transform: translate(var(--reveal-x, 0), 0);
}

/* Sections centered via left: 50% + translateX(-50%) keep their offset */
html.js-motion .main-description.motion-reveal,
html.js-motion .frame-app.motion-reveal,
html.js-motion .frame-benefits.motion-reveal,
html.js-motion .frame-crm.motion-reveal,
html.js-motion .frame-become-client.motion-reveal {
  --reveal-x: -50%;
}

/* Form success bridge */
.form-contacts,
.form-become-client {
  transition:
    opacity var(--duration-modal) var(--ease-out),
    transform var(--duration-modal) var(--ease-out);
}

.form-exiting {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.success-message,
.server-error-message {
  opacity: 0;
  transform: translateY(8px);
  animation: none;
  transition:
    opacity var(--duration-modal) var(--ease-out),
    transform var(--duration-modal) var(--ease-out);
}

.success-message.is-visible,
.server-error-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.button-sent-message.loading {
  transition: opacity var(--duration-ui) ease;
}

/* Pressables: named properties, press scale, hover gated */
.button-page-form,
.button-sent-message,
.button-become-client,
.button-header-form,
.show-prices-details,
.prices-modal-button,
.download-app-hero-ios,
.download-app-hero-android,
.component-35 {
  transition:
    transform var(--duration-press) var(--ease-out),
    box-shadow var(--duration-ui) ease,
    background-color var(--duration-ui) ease,
    opacity var(--duration-ui) ease;
}

.button-page-form:active,
.button-sent-message:active,
.button-become-client:active,
.button-header-form:active,
.show-prices-details:active,
.prices-modal-button:active,
.download-app-hero-ios:active,
.download-app-hero-android:active,
.component-35:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .button-page-form:hover,
  .button-sent-message:hover,
  .button-become-client:hover,
  .button-header-form:hover,
  .show-prices-details:hover,
  .prices-modal-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(114, 114, 236, 0.3);
  }

  .button-page-form:hover:active,
  .button-sent-message:hover:active,
  .button-become-client:hover:active,
  .button-header-form:hover:active,
  .show-prices-details:hover:active,
  .prices-modal-button:hover:active,
  .download-app-hero-ios:hover:active,
  .download-app-hero-android:hover:active,
  .component-35:hover:active {
    transform: scale(0.97);
  }
}

/* Flagship product mockups: one per section, subtle lift on hover.
   Only images without a layout transform of their own are listed here. */
.hero-section-laptop,
.app-section-owner-get-laptop,
.app-section-client-get-1,
.app-section-client-get-2,
.crm-laptop-ru {
  transition:
    transform var(--duration-modal) var(--ease-out),
    filter var(--duration-modal) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero-section-laptop:hover,
  .app-section-owner-get-laptop:hover,
  .app-section-client-get-1:hover,
  .app-section-client-get-2:hover,
  .crm-laptop-ru:hover {
    transform: translateY(-6px) scale(1.015);
    filter: drop-shadow(0 18px 30px rgba(44, 44, 98, 0.18));
  }
}

.div63 {
  transition: color var(--duration-ui) ease;
}

.button-header2,
.button-header-go-to-crm {
  transition: background-color var(--duration-ui) ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js-motion .hero-section .title-text .div,
  html.js-motion .hero-section .crm-just-do-fit,
  html.js-motion .hero-section .crm-just-do-fit-mobile,
  html.js-motion .hero-section .buttons,
  html.js-motion .hero-section .download-app-cta,
  html.js-motion .hero-section .hero-section-images,
  html.js-motion .hero-section .hero-section-laptop-mobile,
  html.js-motion .hero-section.is-ready .title-text .div,
  html.js-motion .hero-section.is-ready .crm-just-do-fit,
  html.js-motion .hero-section.is-ready .crm-just-do-fit-mobile,
  html.js-motion .hero-section.is-ready .buttons,
  html.js-motion .hero-section.is-ready .download-app-cta,
  html.js-motion .hero-section.is-ready .hero-section-images,
  html.js-motion .hero-section.is-ready .hero-section-laptop-mobile {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js-motion .motion-reveal,
  html.js-motion .motion-reveal.is-visible {
    opacity: 1;
    transform: translate(var(--reveal-x, 0), 0);
    transition: none;
  }

  .form-contacts,
  .form-become-client,
  .form-exiting,
  .success-message,
  .server-error-message,
  .success-message.is-visible,
  .server-error-message.is-visible {
    transform: none;
    transition: opacity var(--duration-ui) ease;
  }

  .button-page-form,
  .button-sent-message,
  .button-become-client,
  .button-header-form,
  .show-prices-details,
  .prices-modal-button,
  .download-app-hero-ios,
  .download-app-hero-android,
  .component-35 {
    transition: background-color var(--duration-ui) ease, opacity var(--duration-ui) ease, box-shadow var(--duration-ui) ease;
  }

  .button-page-form:active,
  .button-sent-message:active,
  .button-become-client:active,
  .button-header-form:active,
  .show-prices-details:active,
  .prices-modal-button:active,
  .download-app-hero-ios:active,
  .download-app-hero-android:active,
  .component-35:active {
    transform: none;
  }

  .button-sent-message.loading::after {
    animation: none;
  }

  .modal-overlay,
  .prices-modal-overlay,
  .mobile-menu-overlay {
    transition: opacity var(--duration-ui) ease, visibility 0s linear var(--duration-ui);
  }

  .modal-container,
  .prices-modal-container {
    transform: translate(-50%, -50%);
    transition: opacity var(--duration-ui) ease;
  }

  .modal-container.active,
  .prices-modal-container.active {
    transform: translate(-50%, -50%);
  }

  @media screen and (max-width: 1165px) {
    .menu-header2 {
      transition: none;
    }
  }

  .burger-line {
    transition: opacity var(--duration-ui) ease;
  }

  .modal-close:hover,
  .prices-modal-close:hover {
    transform: none;
  }

  .hero-section-laptop,
  .app-section-owner-get-laptop,
  .app-section-client-get-1,
  .app-section-client-get-2,
  .crm-laptop-ru {
    transition: filter var(--duration-ui) ease;
  }

  .hero-section-laptop:hover,
  .app-section-owner-get-laptop:hover,
  .app-section-client-get-1:hover,
  .app-section-client-get-2:hover,
  .crm-laptop-ru:hover {
    transform: none;
  }
}