/* A sheet of cotton paper, with afternoon light across the far corner. */
:root { --paper: #f7f1e3; }
body { background: var(--paper); }
.stationery-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: #f7f1e3 url('/assets/handmade-paper.jpg') center / cover no-repeat;
}
.stationery-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, #fffdf578 0%, #fffdf542 58%, #fffdf51a 100%);
  pointer-events: none;
}
.gift-garden { z-index: 1; }
.window-light {
  position: absolute;
  width: 84vw;
  height: 125vh;
  right: -27vw;
  top: -34vh;
  pointer-events: none;
  transform: rotate(-24deg) skewY(7deg);
  transform-origin: 50% 50%;
  translate: 0 0;
  rotate: 0deg;
  background:
    linear-gradient(90deg, transparent 0% 25%, #706b5133 27% 29%, transparent 32% 61%, #706b5130 63% 65%, transparent 68%),
    linear-gradient(0deg, transparent 0% 43%, #706b512e 45% 47%, transparent 50%);
  filter: blur(8px);
  mask-image: linear-gradient(155deg, #000 15%, #0009 60%, transparent 91%);
  opacity: .66;
}
.pressed-petals {
  position: absolute;
  display: block;
  width: 102px;
  height: 68px;
  background: url('/assets/pressed-petals.svg') center / contain no-repeat;
  filter: drop-shadow(1px 2px 1px #75574e19);
  opacity: .7;
  pointer-events: none;
}
.pressed-petals--lower { left: 4.3%; bottom: 9%; transform: rotate(-22deg); }
.pressed-petals--upper { right: 4.7%; top: 4%; width: 78px; transform: rotate(27deg); opacity: .53; }
.garden-note {
  background-image: linear-gradient(#fffdf58a, #fffdf58a), url('/assets/handmade-paper.jpg');
  background-size: auto, 650px auto;
  border-radius: 2px 5px 2px 4px / 3px 2px 5px 2px;
  border-color: #cfbea64a;
  box-shadow: 1px 9px 23px #66524420, 0 1px 2px #6652440d;
}
@media (max-width: 740px) {
  .window-light { width: 145vw; height: 90vh; right: -75vw; top: -17vh; opacity: .43; filter: blur(6px); }
  .pressed-petals--lower { left: 6%; bottom: 3%; width: 62px; height: 42px; opacity: .57; }
  .pressed-petals--upper { right: 4%; top: 2%; width: 44px; height: 42px; opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .window-light { translate: 0 0 !important; rotate: 0deg !important; }
}