/* Falling petals (layer/particles/001) — library w1 (A1279), ported from themes/garden/theme.css (Wave 2, A1263): the
   two background floral sprays at the top of the page box (they drift with the scroll in section.js) and the petals
   that fall after opening. A layer renders first inside <main>, as the sprays did in the theme. */
.pa001-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pa001-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pa001-bg__spray { position: absolute; width: min(64vw, 440px); height: auto; opacity: .3; }
.pa001-bg__spray--1 { top: 24%; right: -24vw; transform: rotate(100deg); }
.pa001-bg__spray--2 { top: 58%; left: -26vw; transform: rotate(-80deg) scaleX(-1); }

/* falling petals: only after opening, never in reduced motion. z-index 0 = above the background
   sprays, behind every section, so petals never cover text. */
.pa001-petals { position: fixed; inset: 0; z-index: 0; display: none; overflow: hidden; pointer-events: none; }
html.kjy-opened:not(.motion-reduce) .pa001-petals { display: block; }
html.kjy-lite .pa001-petal:nth-child(n+5) { display: none; }
.pa001-petal { position: absolute; top: -40px; left: var(--pa001-x); width: var(--pa001-size, 16px); opacity: .7; will-change: transform; animation: pa001-fall var(--pa001-d, 20s) linear var(--pa001-delay, 0s) infinite; }
.pa001-petal svg { width: 100%; height: auto; animation: pa001-sway calc(var(--pa001-d, 20s) / 4) ease-in-out var(--pa001-delay, 0s) infinite alternate; }
@keyframes pa001-fall { to { transform: translate3d(0, calc(100vh + 80px), 0) rotate(240deg); } }
@keyframes pa001-sway { from { transform: translateX(-18px) rotate(-12deg); } to { transform: translateX(18px) rotate(14deg); } }