/* Site Motion belongs to the portfolio page. Demo Motion stays inside its own animation files. */
:root { --site-motion-ease: cubic-bezier(.22, 1, .36, 1); }

[data-site-motion] {
  transition-property: opacity, translate;
  transition-duration: var(--site-motion-duration);
  transition-timing-function: var(--site-motion-ease);
  transition-delay: var(--site-motion-delay, 0ms);
}

[data-site-motion="text"] {
  --site-motion-duration: 560ms;
  transition-timing-function: cubic-bezier(.33, 0, .2, 1), var(--site-motion-ease);
}
[data-site-motion="card-group"] { --site-motion-duration: 620ms; }
[data-site-motion="phone"] { --site-motion-duration: 680ms; }

[data-site-motion="text"].site-motion-pending {
  opacity: 0;
  translate: 0 6px;
}

[data-site-motion="card-group"].site-motion-pending {
  opacity: 0;
  translate: -18px 4px;
}

[data-site-motion="phone"].site-motion-pending {
  opacity: 0;
  translate: 0 48px;
}

/* A backwards fill holds the lower first frame during the short load delay. */
@keyframes hero-phone-rise {
  from { opacity: 0; translate: 0 var(--hero-phone-travel); }
  to { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__phone[data-site-motion="phone"] {
    --hero-phone-travel: 48px;
    animation: hero-phone-rise 720ms var(--site-motion-ease) 100ms both;
  }
  .hero__phone--home[data-site-motion="phone"] { animation-delay: 210ms; }
}

/* Related copy and screens enter in reading order without separating every line. */
.section-intro__copy[data-site-motion="text"] { --site-motion-delay: 90ms; }
.phone-card > img[data-site-motion="phone"] { --site-motion-delay: 130ms; }

/* Card starts overlap: the next card begins while its neighbor is still moving. */
.insight-grid > :nth-child(2)[data-site-motion="card-group"] { --site-motion-delay: 130ms; }
.insight-grid > :nth-child(3)[data-site-motion="card-group"] { --site-motion-delay: 260ms; }

@media (max-width: 950px) {
  /* The third card moves to its own row at tablet width. */
  .insight-grid > :nth-child(3)[data-site-motion="card-group"] { --site-motion-delay: 0ms; }
}

@media (max-width: 600px) {
  .hero__phone[data-site-motion="phone"] { --hero-phone-travel: 26px; }
  [data-site-motion="text"].site-motion-pending { translate: 0 4px; }
  [data-site-motion="phone"].site-motion-pending { translate: 0 26px; }
  [data-site-motion="card-group"].site-motion-pending { translate: 0 10px; }
  .insight-grid > :nth-child(3)[data-site-motion="card-group"] { --site-motion-delay: 260ms; }
}

@media (prefers-reduced-motion: reduce) {
  [data-site-motion] { transition: none; }
  [data-site-motion].site-motion-pending { opacity: 1; translate: none; }
}