/* Carrie Loves — motion layer. Content is fully visible unless motion.js opts in (html.m-on). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }

:root { --m-ease: cubic-bezier(.2,.7,.2,1); --m-dur: .6s; }

a, .btn, button {
  transition: color .18s var(--m-ease), background-color .18s var(--m-ease),
              border-color .18s var(--m-ease), opacity .18s var(--m-ease), translate .18s var(--m-ease);
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn:active { translate: 0 1px; }

  [data-m-arrow] { display: inline-block; transition: translate .22s var(--m-ease); }
  a:hover [data-m-arrow="r"], a:focus-visible [data-m-arrow="r"], a[data-m-arrow="r"]:hover { translate: 4px 0; }
  a[data-m-arrow="l"]:hover, a[data-m-arrow="l"]:focus-visible { translate: -4px 0; }

  /* Hide the first frame only while motion.js lays out the entrance (1.5s failsafe in JS). */
  html.m-pending body { opacity: 0; }
  body { transition: opacity .18s ease; }

  html.m-on [data-m]:not(.m-done) {
    transition: opacity var(--m-dur) var(--m-ease) var(--m-delay, 0s),
                translate var(--m-dur) var(--m-ease) var(--m-delay, 0s),
                clip-path .9s var(--m-ease) var(--m-delay, 0s) !important;
  }
  html.m-on [data-m]:not(.m-in) { opacity: 0; translate: 0 16px; }
  html.m-on [data-m="hero"]:not(.m-in) { translate: 0 12px; }
  html.m-on [data-m="img"]:not(.m-in) { translate: none; opacity: 0; clip-path: inset(100% 0 0 0); }
  html.m-on [data-m="img"].m-in { clip-path: inset(0 0 0 0); }
}