/*
 * Animations and hover effects. js/site.js adds the classes; elements opt in
 * with data-ix="..." in the HTML.
 *
 * Hidden start states only apply under html.ix, which the inline script in
 * each page's <head> sets, so content stays visible if JavaScript is off or
 * js/site.js fails to load.
 */

:root {
  /* outQuart / outQuad (Penner curves). linear() is exact; the
     cubic-bezier is the fallback for browsers without linear() support. */
  --ix-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ix-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ix-out-quart: linear(0, 0.1565, 0.2939, 0.4138, 0.5177, 0.6072, 0.6836, 0.7483, 0.8025, 0.8474, 0.8842, 0.9139, 0.9375, 0.9559, 0.9699, 0.9802, 0.9877, 0.9928, 0.9961, 0.9981, 0.9992, 0.9998, 1, 1, 1);
    --ix-out-quad: linear(0, 0.1211, 0.2344, 0.3398, 0.4375, 0.5273, 0.6094, 0.6836, 0.75, 0.8086, 0.8594, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1);
  }
}

/* Scroll-in: fade in while sliding up 100px, 1000ms outQuart after the
   element's own data-ix-delay. The element stays in place (just invisible)
   until its delay is over. */
html.ix [data-ix~="slide"],
html.ix [data-ix~="slide-br"] {
  opacity: 0;
}
html.ix [data-ix~="slide"].ix-in,
html.ix [data-ix~="slide-br"].ix-in {
  transform-style: preserve-3d;
  animation: ix-slide-bottom 1000ms var(--ix-out-quart) var(--ix-delay, 0ms) forwards;
}
html.ix [data-ix~="slide-br"].ix-in {
  animation-name: ix-slide-bottom-right;
}
@keyframes ix-slide-bottom {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ix-slide-bottom-right {
  from { opacity: 0; transform: translate3d(100px, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Hero headings: every [data-ix~="heading-content"] on the page rises out of
   its overflow-hidden wrapper once any [data-ix~="heading"] wrapper is in view. */
html.ix [data-ix~="heading-content"] {
  opacity: 0;
  transform: translate3d(0, 100%, 0) skew(0deg, 5deg);
  transform-style: preserve-3d;
}
html.ix.ix-heading-in [data-ix~="heading-content"] {
  animation: ix-heading 1000ms var(--ix-out-quart) both;
}
@keyframes ix-heading {
  from { opacity: 0; transform: translate3d(0, 100%, 0) skew(0deg, 5deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skew(0deg, 0deg); }
}

/* Button hovers: the label slides up and an identical copy slides in from
   below. Hover in eases out over 500ms; hover out is linear over 500ms. */
[data-ix~="btn-primary"] .primary-button-text,
[data-ix~="btn-primary"] .primary-button-hover-text,
[data-ix~="btn-secondary"] .secondary-button-two-text,
[data-ix~="btn-secondary"] .secondary-button-two-hover-text {
  transform: translate3d(0, 0%, 0);
  transform-style: preserve-3d;
  transition: transform 500ms linear;
}
[data-ix~="btn-primary"] .primary-button-hover-text,
[data-ix~="btn-secondary"] .secondary-button-two-hover-text {
  transform: translate3d(0, 100%, 0);
}
[data-ix~="btn-primary"]:hover .primary-button-text,
[data-ix~="btn-secondary"]:hover .secondary-button-two-text {
  transform: translate3d(0, -100%, 0);
}
[data-ix~="btn-primary"]:hover .primary-button-hover-text,
[data-ix~="btn-secondary"]:hover .secondary-button-two-hover-text {
  transform: translate3d(0, 0%, 0);
}
[data-ix~="btn-primary"]:hover .primary-button-text,
[data-ix~="btn-primary"]:hover .primary-button-hover-text {
  transition-timing-function: var(--ix-out-quart);
}
[data-ix~="btn-secondary"]:hover .secondary-button-two-text,
[data-ix~="btn-secondary"]:hover .secondary-button-two-hover-text {
  transition-timing-function: var(--ix-out-quad);
}

/* Client logo strip: 1180px to the left every 20s, linear, then restart. */
[data-ix~="marquee"] {
  transform-style: preserve-3d;
  will-change: transform;
  animation: ix-marquee 20000ms linear infinite;
}
@keyframes ix-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-1180px, 0, 0); }
}