/* Paper-cut scenery (papercut.js) and the cut-paper lift on cards. */

.pc-scene {
  --p: 0;
  position: relative;
  width: 100vw;
  height: clamp(66px, 8.5vw, 128px);
  margin: clamp(1.2rem, 3vw, 2.4rem) 0 0 calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.pc-sheet {
  position: absolute;
  left: -4%;
  bottom: -1px;
  width: 108%;
  height: 100%;
  overflow: visible;
  /* Every sheet casts a soft shadow on the one behind it */
  filter: drop-shadow(0 -2px 2.5px rgba(26, 25, 22, 0.26));
  transform: translateX(calc(var(--p) * var(--depth, 1) * -1.1%));
  translate: 0 70%;
  transition: translate 820ms cubic-bezier(0.2, 1.35, 0.35, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* The front sheet is the page itself: it fades into it below the cut */
.pc-sheet--4 {
  filter: drop-shadow(0 -2px 2px rgba(26, 25, 22, 0.3));
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}

.pc-scene.is-up .pc-sheet { translate: 0 0; }

/* The sun: a paper disc with a pinked rim, behind everything */
.pc-sun {
  position: absolute;
  top: 16%;
  width: clamp(34px, 4.6vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #f07a4e, #d15a35 55%, #a33128);
  box-shadow: 0 0 0 4px #eadfce, 0 0 0 5.5px rgba(26, 25, 22, 0.6), 2px 3px 4px rgba(26, 25, 22, 0.25);
  translate: -50% 120%;
  transform: translateX(calc(var(--p) * -0.35%));
  transition: translate 1100ms cubic-bezier(0.2, 1.2, 0.35, 1) 320ms;
}

.pc-scene.is-up .pc-sun { translate: -50% 0; }

.pc-star {
  position: absolute;
  width: clamp(10px, 1.1vw, 16px);
  aspect-ratio: 1;
  opacity: 0;
  scale: 0.2;
  rotate: -40deg;
  transition: opacity 300ms ease, scale 520ms cubic-bezier(0.2, 1.8, 0.4, 1), rotate 520ms ease;
  transition-delay: calc(700ms + var(--d, 0s) * 0.4);
}

.pc-star svg { display: block; width: 100%; height: 100%; }

.pc-scene:not(.is-live) .pc-star { animation-play-state: paused !important; }

.pc-scene.is-up .pc-star {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  animation: pcTwinkle 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes pcTwinkle {
  50% { scale: 0.78; rotate: 18deg; }
}

/* A folded paper plane glides across once, as the strip arrives */
.pc-plane {
  position: absolute;
  left: 0;
  top: 18%;
  width: clamp(34px, 3.6vw, 52px);
  opacity: 0;
  filter: drop-shadow(2px 4px 2px rgba(26, 25, 22, 0.22));
}

.pc-plane svg { display: block; width: 100%; height: auto; }

.pc-scene.is-up:not(.is-still) .pc-plane { animation: pcGlide 3.4s cubic-bezier(0.45, 0.05, 0.4, 1) 500ms both; }
.pc-scene.is-up:not(.is-still) .pc-plane.is-rtl { animation-name: pcGlideBack; }

@keyframes pcGlide {
  0% { opacity: 0; transform: translate(-10vw, 40px) rotate(-8deg); }
  10% { opacity: 1; }
  35% { transform: translate(30vw, -6px) rotate(4deg); }
  65% { transform: translate(62vw, 18px) rotate(-6deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(104vw, -30px) rotate(-14deg); }
}

@keyframes pcGlideBack {
  0% { opacity: 0; transform: translate(104vw, 36px) scaleX(-1) rotate(-8deg); }
  10% { opacity: 1; }
  40% { transform: translate(64vw, -4px) scaleX(-1) rotate(5deg); }
  70% { transform: translate(30vw, 16px) scaleX(-1) rotate(-5deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(-10vw, -26px) scaleX(-1) rotate(-12deg); }
}

/* Dark sections read the strip against ink rather than paper */
.extra-spin + .pc-scene,
.pc-scene + .extra-spin { margin-top: 0; }

/* ---- Cards lift off the page as cut paper: two sheets underneath ---- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.pr-motion .pr-cutout.is-cut {
    transition: box-shadow 260ms ease, translate 260ms cubic-bezier(0.2, 1.3, 0.4, 1);
  }

  html.pr-motion .pr-cutout.is-cut:hover {
    translate: -3px -4px;
    box-shadow:
      5px 6px 0 -1px #eadfce,
      5px 6px 0 0 rgba(26, 25, 22, 0.45),
      10px 12px 0 -1px #a33128,
      0 18px 30px rgba(26, 25, 22, 0.16) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-sheet, .pc-sun, .pc-star { transition: none; translate: 0 0; transform: none; }
  .pc-sun { translate: -50% 0; }
  .pc-star { opacity: 1; scale: 1; rotate: 0deg; }
  .pc-plane { display: none; }
}

@media print {
  .pc-scene { display: none; }
}