/* Premium minimal motion system — 2026-08-03 */
:root {
  --motion-duration: 720ms;
  --motion-fast: 280ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-y: 24px;
  --motion-x: 0px;
  --motion-scale: .985;
}

html.motion-ready [data-motion] {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(var(--motion-scale));
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease),
    filter calc(var(--motion-duration) * .8) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.motion-ready [data-motion="left"] { --motion-x: -24px; --motion-y: 0px; }
html.motion-ready [data-motion="right"] { --motion-x: 24px; --motion-y: 0px; }
html.motion-ready [data-motion="scale"] { --motion-y: 12px; --motion-scale: .965; }
html.motion-ready [data-motion="fade"] { --motion-y: 0px; --motion-scale: 1; }

html.motion-ready [data-motion].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.site-header,
.primary-nav,
.button,
.product-card,
.service-card,
.insight-grid article,
.market-grid article,
.expertise-grid article,
.sample-grid article,
.dashboard-panel,
.contact-form,
input,
textarea,
select {
  transition-timing-function: var(--motion-ease);
}

.button:active,
.product-card__cta:active {
  transform: translateY(0) scale(.975);
}

.product-card__content,
.product-card__footer,
.service-card > *,
.insight-grid article > * {
  transition: transform var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__content,
  .service-card:hover > *:not(span),
  .insight-grid article:hover > *:not(span) {
    transform: translateY(-3px);
  }

  .hero-visual img,
  .split-feature__image img,
  .founder-media img,
  .service-hero__image img {
    transition: transform 1.1s var(--motion-ease), filter .6s ease;
  }

  .hero-visual:hover img,
  .split-feature__image:hover img,
  .founder-media:hover img,
  .service-hero__image:hover img {
    transform: scale(1.025);
  }
}

.primary-nav.is-open {
  animation: motionMenuIn 320ms var(--motion-ease) both;
}

.flash {
  animation: motionNoticeIn 480ms var(--motion-ease) both;
}

details[open] > p,
details[open] > form,
details[open] > div:not(summary) {
  animation: motionDetailsIn 360ms var(--motion-ease) both;
}

@keyframes motionMenuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionNoticeIn {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionDetailsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
  :root {
    --motion-duration: 600ms;
    --motion-y: 18px;
  }

  html.motion-ready [data-motion="left"],
  html.motion-ready [data-motion="right"] {
    --motion-x: 0px;
    --motion-y: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  html.motion-ready [data-motion] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}