/* Home page 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 .home-hero .op-hero-text > *,
html.js-motion .home-hero .home-hero-media {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-marketing) var(--ease-out),
    transform var(--duration-marketing) var(--ease-out);
}

html.js-motion .home-hero.is-ready .op-hero-text > *,
html.js-motion .home-hero.is-ready .home-hero-media {
  opacity: 1;
  transform: translateY(0);
}

html.js-motion .home-hero.is-ready .op-hero-title { transition-delay: 60ms; }
html.js-motion .home-hero.is-ready .op-hero-subtitle { transition-delay: 120ms; }
html.js-motion .home-hero.is-ready .op-actions { transition-delay: 180ms; }
html.js-motion .home-hero.is-ready .crm-hero-facts,
html.js-motion .home-hero.is-ready .home-hero-media { transition-delay: 240ms; }
/* Once-per-section scroll reveal */
html.js-motion .motion-reveal {
  opacity: 0;
  transform: translateY(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: translateY(0);
}

/* 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);
}

/* Flagship product mockup: subtle lift on hover */
.home-hero-laptop {
  transition:
    transform var(--duration-modal) var(--ease-out),
    filter var(--duration-modal) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-hero-laptop:hover {
    transform: translateY(-6px) scale(1.015);
    filter: drop-shadow(0 28px 44px rgba(44, 44, 98, 0.2));
  }
}

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

  html.js-motion .home-hero .op-hero-text > *,
  html.js-motion .home-hero .home-hero-media,
  html.js-motion .motion-reveal,
  html.js-motion .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
    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;
  }

  .home-hero-laptop {
    transition: filter var(--duration-ui) ease;
  }

  .home-hero-laptop:hover {
    transform: none;
  }
}