/* The same two colours connect the home page, collection and project cases. */
html::before,
html::after {
  content: "";
  position: fixed;
  inset: -2px;
  z-index: 10000;
  pointer-events: none;
  transform: translateY(101%);
  background: #e02d3c;
}
html::after { z-index: 10001; background: #1b1d20; }

html.is-page-covering::before {
  will-change: transform;
  animation: curtain-cover .4s cubic-bezier(.55, 0, .85, .45) both;
}
html.is-page-covering::after {
  will-change: transform;
  animation: curtain-cover .4s .055s cubic-bezier(.55, 0, .85, .45) both;
}
html.is-page-entering::before,
html.is-page-entering::after { transform: translateY(0); will-change: transform; }
/* Uncover automatically even if the optional motion script fails to load. */
html.is-page-entering:not(.is-page-revealing):not(.is-page-preparing)::after {
  animation: curtain-reveal .55s 1.12s cubic-bezier(.76, 0, .24, 1) both;
}
html.is-page-entering:not(.is-page-revealing):not(.is-page-preparing)::before {
  animation: curtain-reveal .55s 1.2s cubic-bezier(.76, 0, .24, 1) both;
}
html.is-page-revealing::after {
  animation: curtain-reveal .65s cubic-bezier(.16, .65, .2, 1) both;
}
html.is-page-revealing::before {
  animation: curtain-reveal .65s .06s cubic-bezier(.16, .65, .2, 1) both;
}
@keyframes curtain-cover {
  from { transform: translateY(101%); }
  to { transform: translateY(0); }
}
@keyframes curtain-reveal {
  from { transform: translateY(0); }
  to { transform: translateY(-101%); }
}

.motion-word-clip {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-block: .1em;
  margin-block: -.1em;
}
.motion-word { display: inline-block; transform-origin: 0 100%; }

@media (prefers-reduced-motion: no-preference) {
  .button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
    transition: background .25s, border-color .25s, transform .25s,
      translate .45s cubic-bezier(.22, 1, .36, 1);
  }
  .primary::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: #1b1d20;
    transform: translateY(102%);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .primary:focus-visible::before { transform: translateY(0); }
  .service-art { perspective: 650px; }
  .service-art img {
    transform: rotateX(var(--art-x, 0deg)) rotateY(var(--art-y, 0deg));
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  }
  .service-item:focus-visible .service-art img { transform: translateY(-10px); }
  .case-screen img { transition: scale .7s cubic-bezier(.22, 1, .36, 1); }
  @media (hover: hover) and (pointer: fine) {
    .primary:hover::before { transform: translateY(0); }
    .service-item:hover .service-art img {
      transform: translateY(-10px) rotateX(var(--art-x, 0deg)) rotateY(var(--art-y, 0deg));
    }
    .case-screen:hover img { scale: 1.025; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after { display: none; }
}