/* ROUND11: additive motion only. Nothing is hidden until motion634.js opts in. */
:root { --m-ease: cubic-bezier(.2,.7,.2,1); }

html.m-on [data-m] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .55s var(--m-ease), transform .55s var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
  transition-property: none;
  will-change: opacity, transform;
}
html.m-on [data-m="label"] { transform: translate3d(0, 10px, 0); }
html.m-on [data-m="title"] { transform: translate3d(0, 24px, 0); transition-duration: .55s; }
html.m-on [data-m="card"] { transform: translate3d(0, 18px, 0) scale(.98); }
html.m-on [data-m="photo"] { transform: translate3d(0, 28px, 0) scale(.98); transition-duration: .6s; }
html.m-on [data-m="word"] { display: inline-block; transform: translate3d(0, 24px, 0); }
html.m-on [data-m].m-visible { opacity: 1; transform: none; transition-property: opacity, transform; will-change: auto; }

/* Per-page heroes play once on load and deliberately use the same final state. */
html.m-on [data-m-hero] [data-m-hero-copy],
html.m-on [data-m-hero] [data-m-hero-photo] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .55s var(--m-ease), transform .55s var(--m-ease);
  transition-delay: var(--m-hero-delay, 0ms);
  transition-property: none;
  will-change: opacity, transform;
}
html.m-on [data-m-hero] [data-m-hero-photo] {
  transform: translate3d(0, 40px, 0);
  transition-duration: .5s;
  transition-delay: 0s;
}
html.m-on [data-m-hero].m-hero-ready [data-m-hero-copy],
html.m-on [data-m-hero].m-hero-ready [data-m-hero-photo] {
  opacity: 1;
  transform: none;
  transition-property: opacity, transform;
  will-change: auto;
}
html.m-on [data-m-hero] [data-m-hero-decor] { opacity: 0; transition: opacity .5s var(--m-ease); }
html.m-on [data-m-hero].m-hero-ready [data-m-hero-decor] { opacity: 1; }
html.m-on .d-hero2[data-m-hero] .d-hero2-photo::before {
  transform: translate3d(0, 22px, 0);
  transition: transform .9s var(--m-ease);
}
html.m-on .d-hero2[data-m-hero].m-hero-ready .d-hero2-photo::before { transform: translate3d(0, var(--m-parallax-y, 0px), 0); }

@media (min-width: 761px) {
  html.m-on .d-hero2[data-m-hero].m-hero-ready .d-hero2-photo::before { transition: transform .14s linear; }
}

@media (hover: hover) {
  main a[data-m-card],
  main .other-row,
  main .page-link,
  main .d-other-row,
  main .a-list > a,
  main .c-other-list > a,
  main .f-other-list > a,
  main .e-tile,
  main .b-card--work {
    transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease);
  }
  main a[data-m-card]:hover,
  main .other-row:hover,
  main .page-link:hover,
  main .d-other-row:hover,
  main .a-list > a:hover,
  main .c-other-list > a:hover,
  main .f-other-list > a:hover,
  main .e-tile:hover,
  main .b-card--work:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 10px 22px rgba(24, 29, 26, .10); }
  main .a-button, main .b-button, main .c-button, main .d-button, main .e-button,
  main .f-button, main .contact-button, main .shop-button, main .button {
    transition: transform .3s var(--m-ease);
  }
  main .a-button:hover, main .b-button:hover, main .c-button:hover, main .d-button:hover,
  main .e-button:hover, main .f-button:hover, main .contact-button:hover, main .shop-button:hover,
  main .button:hover { transform: translate3d(0, -2px, 0); }
  main a[data-m-card] :is(.circle-arrow, .c-arrow, .mark, i, [aria-hidden="true"]),
  main .a-list > a span:last-child, main .d-other-row .d-arrow {
    transition: transform .3s var(--m-ease);
  }
  main a[data-m-card]:hover :is(.circle-arrow, .c-arrow, .mark, i, [aria-hidden="true"]),
  main .a-list > a:hover span:last-child, main .d-other-row:hover .d-arrow { transform: translate3d(3px, -3px, 0); }
  main a:has(figure):hover figure { transform: translate3d(0, -4px, 0); }
  main a:has(figure) figure { transition: transform .3s var(--m-ease); }
}

@media (prefers-reduced-motion: reduce) {
  html.m-on [data-m], html.m-on [data-m-hero] [data-m-hero-copy],
  html.m-on [data-m-hero] [data-m-hero-photo], html.m-on [data-m-hero] [data-m-hero-decor] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
@media print {
  html.m-on [data-m], html.m-on [data-m-hero] [data-m-hero-copy],
  html.m-on [data-m-hero] [data-m-hero-photo], html.m-on [data-m-hero] [data-m-hero-decor] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
/* Existing legacy reveals are also safe when browsers disable scripting entirely. */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}