/* Paper sheet drop. Rewritten from the Da Maria Webflow template (IX2 a-234 "Page Load Main", PAGE_FINISH on every
   page; clone + numbers: ~/Dev/damaria-recreate/PARTS.md). CSS only.

   <div class="psd-sheet"> ... <div class="psd-rise"><h1>...</h1></div> ... </div>

   The whole page is one sheet of paper on a patterned table. It arrives from up and to the right (20% of its own
   width right, 10rem up), tipped back -5deg and invisible, and lands flat:
   - position: 1000ms on cubic-bezier(.17,1.925,.38,1.001), a curve that runs PAST its target early (y1 = 1.925) and
     eases home, so the sheet skids a little beyond its spot and slides back, like paper tossed onto a table;
   - rotation: 700ms on cubic-bezier(.25,.25,0,1.007), it straightens before it stops sliding;
   - opacity: 250ms linear, it is solid almost at once;
   all three 100ms after the trigger. The pivot is 100rem BELOW the sheet's centre (transform-origin 50% 100rem), so
   the -5deg turn swings the sheet along a wide arc instead of spinning it on the spot.
   Then the hero headline inside (.psd-rise, overflow hidden) rises from 100% of its own height at 600ms, 800ms
   outQuart: the page is down before the name comes up.
   Re-run: remove .psd-sheet, force a reflow, add it back (or toggle .psd-play off/on when data-psd="manual"). */
.psd-sheet {
  --psd-x: 20%;            /* start offset x (of the sheet's own width) */
  --psd-y: -10rem;         /* start offset y (negative = from above) */
  --psd-tilt: -5deg;       /* start rotation */
  --psd-origin: 50% 100rem;/* pivot far below the sheet = an arc, not a spin */
  --psd-delay: 100ms;
  --psd-move: 1000ms;      /* position duration */
  --psd-move-ease: cubic-bezier(.17, 1.925, .38, 1.001);
  --psd-turn: 700ms;       /* rotation duration */
  --psd-turn-ease: cubic-bezier(.25, .25, 0, 1.007);
  --psd-fade: 250ms;       /* opacity duration, linear */
  transform-origin: var(--psd-origin);
  animation:
    psd-move var(--psd-move) var(--psd-move-ease) var(--psd-delay) both,
    psd-turn var(--psd-turn) var(--psd-turn-ease) var(--psd-delay) both,
    psd-fade var(--psd-fade) linear var(--psd-delay) both;
}
.psd-sheet[data-psd="manual"]:not(.psd-play) { animation-play-state: paused; }
@keyframes psd-move { from { translate: var(--psd-x) var(--psd-y); } to { translate: none; } }
@keyframes psd-turn { from { rotate: var(--psd-tilt); } to { rotate: none; } }
@keyframes psd-fade { from { opacity: 0; } to { opacity: 1; } }

.psd-rise { overflow: hidden; }
.psd-sheet .psd-rise > * {
  --psd-rise-delay: 600ms;
  --psd-rise: 800ms;
  --psd-rise-ease: cubic-bezier(.165, .84, .44, 1); /* outQuart */
  animation: psd-up var(--psd-rise) var(--psd-rise-ease) var(--psd-rise-delay) both;
}
.psd-sheet[data-psd="manual"]:not(.psd-play) .psd-rise > * { animation-play-state: paused; }
@keyframes psd-up { from { translate: 0 100%; } to { translate: none; } }

@media (prefers-reduced-motion: reduce) {
  .psd-sheet, .psd-sheet .psd-rise > * { animation: none; }
}