/* One travelling edge drives the word, its matching photograph and the loose lip. */
@property --rip-position {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -16%;
}
.creative-hero {
  --paper-beat: calc(var(--hero-cycle) / 3);
  animation: travel-across-sheet var(--paper-beat) cubic-bezier(.60,.04,.27,.98) infinite;
}
@keyframes travel-across-sheet {
  0%, 77% { --rip-position: -16%; }
  100% { --rip-position: 116%; }
}

.paper-words {
  position: relative;
  display: inline-grid;
  vertical-align: top;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.25;
  color: var(--prune-encre);
}
.paper-word { grid-area: 1 / 1; white-space: nowrap; }
.paper-word, .creative-hero .hero-stage {
  --tooth: .08em;
  --cut: calc(var(--rip-position) - var(--tooth)) -1%,
    var(--rip-position) 8%, calc(var(--rip-position) - var(--tooth)) 17%,
    calc(var(--rip-position) + var(--tooth)) 23%, var(--rip-position) 29%,
    calc(var(--rip-position) + var(--tooth)) 34%, var(--rip-position) 41%,
    calc(var(--rip-position) + 2 * var(--tooth)) 46%, calc(var(--rip-position) + var(--tooth)) 53%,
    calc(var(--rip-position) + 2 * var(--tooth)) 58%, var(--rip-position) 64%,
    calc(var(--rip-position) + var(--tooth)) 73%, var(--rip-position) 78%,
    calc(var(--rip-position) - var(--tooth)) 87%, var(--rip-position) 91%,
    calc(var(--rip-position) - 2 * var(--tooth)) 101%;
  --revealed: polygon(-1% -1%, var(--cut), -1% 101%);
  --remaining: polygon(101% -1%, var(--cut), 101% 101%);
  animation: paper-layer var(--hero-cycle) steps(1, end) var(--phase, 0s) infinite;
}
.creative-hero .hero-stage {
  --tooth: clamp(2px, .36vw, 7px);
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}
.paper-word:nth-child(2), .creative-hero .hero-stage-1 { --phase: calc(0s - var(--paper-beat) - var(--paper-beat)); }
.paper-word:nth-child(3), .creative-hero .hero-stage-2 { --phase: calc(0s - var(--paper-beat)); }
@keyframes paper-layer {
  0%       { visibility: visible; clip-path: none; }
  25.6667% { visibility: visible; clip-path: var(--remaining); }
  33.3333% { visibility: hidden; clip-path: none; }
  92.3333%, 100% { visibility: visible; clip-path: var(--revealed); }
}

.paper-flap {
  position: absolute;
  pointer-events: none;
  top: .04em;
  bottom: .015em;
  left: var(--rip-position);
  width: .79em;
  transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(95deg, #fff9ec00 24%, #fff8ec4d 58%, #402a421f 79%, #f8f2de 93%),
    url("/assets/papier-rabat.webp") center / cover;
  clip-path: polygon(19% 3%, 53% 1%, 92% 4%, 86% 12%, 91% 19%, 81% 29%, 89% 36%, 85% 47%, 96% 54%, 84% 63%, 88% 73%, 79% 83%, 84% 91%, 74% 98%, 15% 95%, 19% 89%, 8% 81%, 16% 73%, 11% 66%, 24% 55%, 17% 47%, 22% 40%, 11% 31%, 17% 21%, 11% 15%);
}
.paper-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7efdd;
  clip-path: polygon(83% 0,100% 0,100% 100%,70% 100%,77% 89%,74% 82%,81% 72%,78% 62%,88% 54%,78% 46%,84% 36%,76% 28%,85% 19%,80% 12%);
}

/* Torn sheet between sections. Masks come from scripts/generate-paper-rims.mjs:
   three scales of noise for the tear, a fibre core of varying width, a tile
   that repeats at a fixed pixel width so the tear is never stretched. */
.paper-join {
  --join-height: clamp(12px, 1.4vw, 22px);
  --surface: var(--background);
  --fibre: #f6f1e6;
  --rim: url("/assets/paper-rim-a.svg");
  --rim-fibre: url("/assets/paper-fibre-a.svg");
  --rim-tile: 2400px;
  position: relative;
  z-index: 1;
  height: var(--join-height);
  margin-block-start: calc(0px - var(--join-height));
  pointer-events: none;
  filter: drop-shadow(0 -.5px .8px rgb(42 27 39 / .1));
}
.paper-join::before, .paper-join::after {
  content: "";
  position: absolute;
  /* 2px of overlap on the straight side hides the sub-pixel seam with the next section. */
  inset: 0 0 -2px;
  background: var(--surface);
  -webkit-mask: var(--rim) left bottom / var(--rim-tile) 100% repeat-x;
  mask: var(--rim) left bottom / var(--rim-tile) 100% repeat-x;
}
.paper-join::before {
  background: var(--fibre);
  -webkit-mask-image: var(--rim-fibre);
  mask-image: var(--rim-fibre);
}
.paper-join--reverse { --rim: url("/assets/paper-rim-b.svg"); --rim-fibre: url("/assets/paper-fibre-b.svg"); transform: scaleX(-1); }
.paper-join--soft { --surface: var(--secondary); --rim: url("/assets/paper-rim-c.svg"); --rim-fibre: url("/assets/paper-fibre-c.svg"); }
.paper-join--cta, .paper-join--footer { --join-height: clamp(16px, 2vw, 32px); }
.paper-join--cta {
  --rim: url("/assets/paper-rim-d.svg");
  --rim-fibre: url("/assets/paper-fibre-d.svg");
  margin-block-start: 0;
  margin-block-end: calc(0px - var(--join-height));
  transform: scaleY(-1);
}
.paper-join--footer {
  --surface: var(--prune-encre);
  --fibre: #efe6d6;
  --rim: url("/assets/paper-rim-b.svg");
  --rim-fibre: url("/assets/paper-fibre-b.svg");
}
.agency-scale > .client-strip { border-block: 0; }
.agency-scale > .paper-join + section { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .creative-hero .paper-flap, .creative-hero .paper-word, .creative-hero .hero-stage { display: none; }
  .creative-hero .paper-word:nth-child(3), .creative-hero .hero-stage-2 {
    display: block; visibility: visible; clip-path: none; transform: none; opacity: 1;
  }
}