/* One sheet of paper connects the portfolio pages. */
:root {
  --paper-duration: 450ms;
  --paper-ease: cubic-bezier(.76, 0, .24, 1);
  --paper-reveal-ease: cubic-bezier(.22, 1, .36, 1);
}

.paper-wipe,
html.paper-boot::before {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  background: #fff;
}

html.paper-boot::before {
  content: "";
  inset: 0;
  animation: paper-boot-release 0s 2s forwards;
}

@keyframes paper-boot-release {
  to { visibility: hidden; }
}

.paper-wipe {
  inset: -12px 0;
  /* A quiet, uneven paper edge, drawn entirely in CSS. */
  clip-path: polygon(0 5px, 8% 2px, 19% 6px, 31% 3px, 44% 5px,
    57% 1px, 69% 4px, 82% 2px, 93% 5px, 100% 3px,
    100% calc(100% - 4px), 88% calc(100% - 2px), 73% calc(100% - 6px),
    59% calc(100% - 3px), 45% calc(100% - 5px), 30% calc(100% - 2px),
    16% calc(100% - 5px), 0 calc(100% - 3px));
  transform: translate3d(0, 102%, 0);
  visibility: hidden;
}

.paper-wipe.is-covering,
.paper-wipe.is-uncovering,
html.paper-arriving .paper-wipe {
  visibility: visible;
  will-change: transform;
}

.paper-wipe.is-covering {
  transform: translate3d(0, 0, 0);
  transition: transform var(--paper-duration) var(--paper-ease);
}

html.paper-arriving .paper-wipe {
  transform: translate3d(0, 0, 0);
}

html.paper-arriving .paper-wipe.is-uncovering {
  transform: translate3d(0, -102%, 0);
  transition: transform var(--paper-duration) var(--paper-ease);
}

/* The nav does not replay its entrance on a paper navigation -- it is already
   on screen and the sheet is what should be moving. */
html.paper-enabled .site-header {
  animation: none;
  opacity: 1;
  transform: none;
}

html.paper-enabled .site-header :is(.brand, .brand img, .nav-back, .nav-links a) {
  animation: none;
  opacity: 1;
  transform: none;
}

html.paper-arriving .page-loader { display: none; }
html.paper-arriving :is(.hero-photo, .hero-copy > *) {
  animation-play-state: paused;
}

html.paper-leaving :is(.cs-info, .cs-cursor) { opacity: 0; }
html.paper-enabled .work-card-link.is-paper-pressed {
  transform: scale(.985);
  transition: transform 120ms var(--paper-reveal-ease);
}

/* Small one-time reveals; the page's layout never moves to make room. */
html.case-study-motion main .reveal {
  animation: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms var(--paper-reveal-ease),
    transform 400ms var(--paper-reveal-ease);
  transition-delay: var(--paper-stagger, 0ms);
}

html.case-study-motion main .reveal.paper-visible {
  opacity: 1;
  transform: none;
}

html.paper-enabled [data-paper-intro] {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 400ms var(--paper-reveal-ease),
    translate 400ms var(--paper-reveal-ease);
  transition-delay: var(--paper-stagger, 0ms);
}

html.paper-enabled [data-paper-intro].paper-visible {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .paper-wipe, html.paper-boot::before { display: none; }
  html.paper-enabled .work-card-link.is-paper-pressed { transform: none; }
  html.case-study-motion main .reveal,
  html.paper-enabled [data-paper-intro] {
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
  }
}