/* The garden's watercolour (watercolor.js): washes painted onto bare paper as you go
   deeper, two branches in a light breeze, and now and then a drifting leaf.
   Loaded after garden.css / host.css. */

/* The washes multiply into the paper colour behind them, the way pigment sits on paper. */
.garden .garden-paint {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh;
  mix-blend-mode: multiply; transition: opacity 1.8s ease;
}
.garden .garden-paint.fading { opacity: 0; }

/* Two slender branches, grown in once you're in the room, each swaying from its stem. */
.garden .garden-branch {
  position: absolute; width: min(46vmin, 380px); height: auto;
  opacity: 0; scale: .9; transition: opacity 4s ease, scale 6s cubic-bezier(.22, .61, .36, 1);
  animation: branchSway var(--sway, 9s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}
.garden .garden-branch.on { opacity: .9; scale: 1; }
.garden .garden-branch.rise { left: -1vmin; bottom: -1vmin; transform-origin: 3% 99%; }
.garden .garden-branch.hang { right: -1vmin; top: -1vmin; transform-origin: 97% 1%; --sway: 11.5s; --sway-delay: -4s; --lean: -1; }

/* A leaf on the wind: it drifts across on gusts and lulls, turning over as it goes. */
.garden .drift {
  position: absolute; left: 0; top: 0; width: var(--size, 40px); pointer-events: none; opacity: 0;
  animation: leafDrift var(--dur, 18s) ease-in-out forwards;
  will-change: transform, opacity;
}
.garden .drift canvas { display: block; width: 100%; height: auto; animation: leafTurn var(--turn, 2.4s) ease-in-out infinite alternate; }

@keyframes branchSway { from { rotate: calc(var(--lean, 1) * -1deg); } to { rotate: calc(var(--lean, 1) * 1.3deg); } }
@keyframes leafDrift {
  0% { transform: translate3d(-14vw, var(--y), 0) rotate(0deg); opacity: 0; }
  8% { opacity: .9; }
  30% { transform: translate3d(22vw, calc(var(--y) + var(--rise) * .3 + 3vh), 0) rotate(calc(var(--spin) * .3)); }
  55% { transform: translate3d(48vw, calc(var(--y) + var(--rise) * .6 - 2vh), 0) rotate(calc(var(--spin) * .55)); }
  80% { transform: translate3d(78vw, calc(var(--y) + var(--rise) * .85 + 2vh), 0) rotate(calc(var(--spin) * .8)); }
  92% { opacity: .9; }
  100% { transform: translate3d(112vw, calc(var(--y) + var(--rise)), 0) rotate(var(--spin)); opacity: 0; }
}
@keyframes leafTurn { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(62deg) rotateY(-28deg); } }

@media (prefers-reduced-motion: reduce) {
  .garden .garden-paint, .garden .garden-branch { transition: none !important; }
  .garden .garden-branch, .garden .drift, .garden .drift canvas { animation: none !important; }
  .garden .drift { display: none; }
}