/* Task completions become stable, layered pixel props on the rooftop plane. */
:is(#todayView,#plannerView) .weekly-paper-collection {
  position: absolute;
  z-index: 12;
  inset: 0 auto auto 0;
  width: max(100%, 900px);
  aspect-ratio: 2172 / 1064;
  container-type: inline-size;
  pointer-events: none;
  transform: translate3d(0,0,0);
  transition: transform var(--banner-rail-duration,720ms) var(--banner-rail-ease,cubic-bezier(.45,0,.2,1));
}
:is(#todayView,#plannerView) .rooftop-banner.is-expanded .weekly-paper-collection {
  /* Lock the props to the building plane, second from the front. */
  transform: translate3d(0,var(--rooftop-building-rail-y),0);
}
:is(#todayView,#plannerView) .weekly-paper-collection[hidden] { display: none; }
:is(#todayView,#plannerView) .paper-pile,
:is(#todayView,#plannerView) .paper-pieces {
  position: absolute;
  inset: 0;
}
:is(#todayView,#plannerView) .paper-shelf { display: none; }
:is(#todayView,#plannerView) .paper-piece {
  position: absolute;
  left: var(--paper-left);
  top: var(--paper-top);
  width: 14.733cqw;
  height: auto;
  max-width: none;
  image-rendering: pixelated;
  transform: rotate(var(--paper-tilt));
  transform-origin: 50% 74%;
}
:is(#todayView,#plannerView) .paper-piece.is-new {
  animation: paper-arrive 480ms cubic-bezier(.2,.9,.25,1.2) both;
}
:is(#todayView,#plannerView) .weekly-paper-collection.is-burning .paper-piece {
  animation: paper-burn-away 1250ms steps(8, end) var(--paper-burn-delay) forwards;
}
:is(#todayView,#plannerView) .paper-burn-embers {
  position: absolute;
  z-index: 50;
  left: calc(var(--ember-left) + 5cqw);
  top: 17cqw;
  width: 2.4cqw;
  height: 3.8cqw;
  opacity: 0;
  background: linear-gradient(0deg, #fc6420 0 30%, #ffbc46 30% 55%, #fff1a7 55% 70%, transparent 70%);
  clip-path: polygon(30% 100%, 6% 79%, 21% 61%, 10% 47%, 43% 66%, 45% 27%, 63% 48%, 77% 9%, 91% 52%, 80% 77%, 67% 100%);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 .9cqw #ff9a30);
  animation: paper-embers 1700ms steps(5, end) var(--ember-delay) forwards;
}
@keyframes paper-burn-away {
  0% { opacity: 1; filter: brightness(1); transform: rotate(var(--paper-tilt)) scale(1); }
  25% { opacity: 1; filter: sepia(.6) saturate(2.8) brightness(1.2); }
  65% { opacity: .7; filter: sepia(1) saturate(4) brightness(.65); }
  100% { opacity: 0; filter: grayscale(1) brightness(.22); transform: translateY(1.8cqw) rotate(var(--paper-tilt)) scale(.76); }
}
@keyframes paper-embers {
  0%, 100% { opacity: 0; transform: translateY(.8cqw) scale(.55); }
  22%, 58% { opacity: .95; transform: translateY(-.5cqw) scale(1.05); }
  75% { opacity: .55; transform: translateY(-1.2cqw) scale(.85); }
}
@keyframes paper-arrive {
  from { opacity: 0; translate: 0 -2.3cqw; }
  to { opacity: 1; translate: 0 0; }
}
:is(#todayView,#plannerView) .paper-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 580px) {
  :is(#todayView,#plannerView) .weekly-paper-collection { left: -145px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#todayView,#plannerView) .paper-piece.is-new { animation: none; }
  :is(#todayView,#plannerView) .weekly-paper-collection.is-burning .paper-piece,
  :is(#todayView,#plannerView) .paper-burn-embers { animation: none; }
  :is(#todayView,#plannerView) .paper-piece { transition: none; }
  :is(#todayView,#plannerView) .weekly-paper-collection { transition: none; }
}