/* Floating paper fragments drift across the full page, behind all content. */
.site-shell { isolation: isolate; }
.site-header, .hero { position: relative; z-index: 1; }
.paper-scraps { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.scrap {
  position: absolute;
  display: block;
  background: transparent;
  opacity: 0;
  will-change: transform, opacity;
  animation: paper-fall var(--fall-duration, 19s) linear infinite;
}
.scrap img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 12px 18px rgba(43, 49, 47, 0.12)); animation: paper-wobble 5.6s ease-in-out infinite; }
.scrap-one { top: -150px; left: 5%; width: 92px; height: 126px; --fall-drift: 34px; --fall-duration: 16s; rotate: -13deg; animation-delay: -4s; }
.scrap-two { top: -150px; left: 18%; width: 58px; height: 78px; --fall-drift: -28px; --fall-duration: 20s; rotate: 12deg; animation-delay: -12s; }
.scrap-three { top: -150px; left: 31%; width: 68px; height: 96px; --fall-drift: 24px; --fall-duration: 18s; rotate: 8deg; animation-delay: -7s; }
.scrap-four { top: -150px; left: 44%; width: 88px; height: 62px; --fall-drift: -32px; --fall-duration: 22s; rotate: -9deg; animation-delay: -15s; }
.scrap-five { top: -150px; left: 59%; width: 55px; height: 76px; --fall-drift: 25px; --fall-duration: 17s; rotate: 17deg; animation-delay: -9s; }
.scrap-six { top: -150px; left: 72%; width: 42px; height: 56px; --fall-drift: -24px; --fall-duration: 21s; rotate: -15deg; animation-delay: -17s; }
.scrap-seven { top: -150px; left: 84%; width: 46px; height: 64px; --fall-drift: 19px; --fall-duration: 19s; rotate: 9deg; animation-delay: -5s; }
.scrap-eight { top: -150px; left: 94%; width: 38px; height: 52px; --fall-drift: -18px; --fall-duration: 23s; rotate: -11deg; animation-delay: -10s; }
.scrap-nine { top: -150px; left: 52%; width: 64px; height: 82px; --fall-drift: 29px; --fall-duration: 19s; rotate: -7deg; animation-delay: -13s; }
@keyframes paper-fall {
  0% { opacity: 0; transform: translate3d(0, -18vh, 0) rotate(-8deg); }
  10% { opacity: 0.78; }
  28% { transform: translate3d(calc(var(--fall-drift) * -0.2), 16vh, 0) rotate(2deg); }
  52% { transform: translate3d(calc(var(--fall-drift) * 0.55), 51vh, 0) rotate(15deg); }
  76% { transform: translate3d(calc(var(--fall-drift) * 0.75), 82vh, 0) rotate(5deg); }
  90% { opacity: 0.78; }
  100% { opacity: 0; transform: translate3d(var(--fall-drift), 112vh, 0) rotate(-8deg); }
}
@keyframes paper-wobble {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
@media (max-width: 600px) {
  .scrap-one { left: 3%; width: 54px; height: 72px; }
  .scrap-two { left: 15%; width: 42px; height: 58px; }
  .scrap-three { left: 27%; width: 39px; height: 56px; }
  .scrap-four { left: 39%; width: 47px; height: 36px; }
  .scrap-five { left: 52%; width: 34px; height: 46px; }
  .scrap-six { left: 64%; width: 29px; height: 39px; }
  .scrap-seven { left: 76%; width: 31px; height: 44px; }
  .scrap-eight { left: 87%; width: 30px; height: 41px; }
  .scrap-nine { left: 46%; width: 38px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .scrap { animation: none; top: 12%; opacity: 0.72; }
  .scrap img { animation: none; }
  .scrap-two, .scrap-four, .scrap-six, .scrap-eight { top: 48%; }
  .scrap-three, .scrap-five, .scrap-seven, .scrap-nine { top: 78%; }
}