/* Keep the decoration between the landscape and the reading surface. */
#sakura-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
#sakura-layer[hidden], body.read-mode #sakura-layer { display: none; }
#content-inner { position: relative; z-index: 2; }
#page-header :is(#site-info, #post-info, #page-site-info, #scroll-down), #footer { z-index: 2; }
.sakura-petal {
  position: absolute;
  top: -22px;
  width: var(--size);
  height: var(--size);
  animation: sakura-fall var(--fall) linear var(--phase) infinite;
}
.sakura-petal::before {
  display: block;
  height: 100%;
  content: '';
  background: url('/img/sakura-petal.svg') center / contain no-repeat;
  animation: sakura-turn var(--turn) ease-in-out var(--phase) infinite alternate;
}
@keyframes sakura-fall {
  from { transform: translate3d(calc(-1 * var(--drift)), 0, 0); }
  50% { transform: translate3d(var(--drift), 52vh, 0); }
  to { transform: translate3d(calc(var(--drift) * .3), calc(100vh + 44px), 0); }
}
@keyframes sakura-turn {
  0% { transform: translateX(-5px) rotate(-42deg) scaleX(.86); }
  55% { transform: translateX(5px) rotate(28deg) scaleX(.45); }
  100% { transform: translateX(-2px) rotate(112deg) scaleX(1); }
}
#nav #sakura-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: .38em;
  min-height: 32px;
  padding: 0 .7em;
  margin-inline-end: .35em;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 100px;
  background: rgb(40 36 65 / 64%);
  color: #fff5f9;
  font: inherit;
  line-height: 1;
  vertical-align: middle;
}
#sakura-toggle svg { color: #ffbad2; }
#sakura-toggle[aria-pressed="false"] svg { color: #c7c4d2; }
#nav #sakura-toggle:focus-visible { outline: 2px solid #ffa6d2; outline-offset: 2px; }
#nav #sakura-toggle:disabled { cursor: default; }
@media (max-width: 768px) {
  #nav #sakura-toggle { width: 40px; height: 40px; padding: 0; border-color: transparent; }
  #sakura-toggle span { display: none; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  #sakura-layer { display: none; }
}
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  :root { --petal-arrow: url('/img/petal-cursor/arrow.svg') 2 2, auto;
          --petal-link: url('/img/petal-cursor/link.svg') 12 2, pointer; }
  body { cursor: var(--petal-arrow); }
  a[href], button:enabled, summary, label[for], [role="button"], #nav .site-page,
  #scroll-down, #toggle-menu, #rightside button:enabled { cursor: var(--petal-link); }
  textarea, input:not([type]), input:is([type="text"], [type="search"], [type="email"], [type="password"]),
  [contenteditable="true"], #article-container :is(p, pre, code) { cursor: text; }
}