/* GENERATED by tools/build-the-cut.js from the-cut.js TOKENS. Do not edit — change tokens in the-cut.src.js and rebuild. */
:root {
  --cut-angle: 41.9deg;
  --cut-tan: 0.897249;
  --cut-fps: 24;
  --cut-f: 41.667ms;
  --cut-ease-cut: cubic-bezier(0.4, 0, 0.1, 1);
  --cut-ease-snap: cubic-bezier(0.8, 0, 0.2, 1);
  --cut-ease-settle: cubic-bezier(0.2, 0, 0, 1);
  --cut-dur-primary: 1000ms;
  --cut-dur-content: 500ms;
  --cut-dur-maple: 583ms;
  --cut-dur-wordmark: 833ms;
  --cut-dur-reel: 1375ms;
  --cut-dur-web: 417ms;
  --cut-dur-hover: 250ms;
  --cut-dur-reduced: 125ms;
  --cut-gap-content-color: #F2EEE6;
  --cut-gap-content-peak: 0.05;
  --cut-gap-web-color: #17140F;
  --cut-gap-web-peak: 0.035;
  --cut-hover-amount: 16%;
  --cut-cream: #F2EEE6; --cut-charcoal: #17140F; --cut-gray: #6B6355; --cut-rust: #8C2F1E;
}
/* Work-card hover — <a class="cut-hover"><img class="cut-hover__media"></a> */
@property --cut-c { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.cut-hover__media {
  --cut-c: 0%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-c) * var(--cut-tan)), calc(100% - var(--cut-c)) 100%, 0 100%);
  transition: --cut-c var(--cut-dur-hover) var(--cut-ease-settle);
}
.cut-hover:hover .cut-hover__media, .cut-hover:focus-visible .cut-hover__media { --cut-c: var(--cut-hover-amount); }
/* Stages used by the-cut-web.js */
.cut-stage { position: relative; overflow: hidden; isolation: isolate; }
.cut-layer { position: absolute; inset: 0; }
.cut-layer--next { will-change: clip-path; }
.cut-gap { position: absolute; inset: 0; pointer-events: none; will-change: clip-path; }
.cut-player, .cut-player svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .cut-hover__media { transition: none; clip-path: none; }
  .cut-layer--next, .cut-gap { will-change: auto; }
}