/* Small, slow movement; the reading layer stays above the decorative field. */
.petal-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  contain: strict;
}
.falling-petal {
  position: absolute;
  top: -65px;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * 1.65);
  opacity: 0;
  animation: petal-fall var(--duration) cubic-bezier(.35,.32,.65,.68) infinite;
  animation-delay: var(--delay);
}
.petal-shape {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 80% 15% 75% 22%;
  background: linear-gradient(125deg, #f2dc87 4%, #e4bd50 52%, #c39b34 100%);
  box-shadow: inset 1px 1px 3px #fff5bd88;
  transform-origin: 45% 20%;
  animation: petal-tumble var(--sway-duration) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
.petal-shape::after {
  content: '';
  position: absolute;
  left: 47%;
  top: 12%;
  height: 75%;
  width: 1px;
  background: #ac81263b;
  transform: rotate(20deg);
}
@keyframes petal-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: var(--opacity); }
  20% { transform: translate3d(var(--sway), 22vh, 0); }
  40% { transform: translate3d(calc(var(--sway) * -.3), 44vh, 0); }
  60% { transform: translate3d(calc(var(--sway) * .7), 66vh, 0); }
  80% { transform: translate3d(calc(var(--sway) * -.5), 88vh, 0); opacity: var(--opacity); }
  100% { transform: translate3d(calc(var(--sway) * .4), calc(100vh + 140px), 0); opacity: 0; }
}
@keyframes petal-tumble {
  0% { transform: perspective(240px) rotateZ(var(--rotation)) rotateY(-36deg) rotateX(12deg); }
  50% { transform: perspective(240px) rotateZ(calc(var(--rotation) + 30deg)) rotateY(25deg) rotateX(-16deg); }
  100% { transform: perspective(240px) rotateZ(calc(var(--rotation) - 20deg)) rotateY(65deg) rotateX(18deg); }
}
.flower {
  animation: flower-breathe 14s ease-in-out infinite alternate;
}
.flower > span {
  animation: flower-unfold 10s cubic-bezier(.4,0,.2,1) infinite alternate;
  animation-delay: calc(var(--n) * -1.3s);
}
.flower > span::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 70%;
  left: 50%;
  bottom: 5%;
  background: linear-gradient(transparent, #a97f1b22);
  transform: rotate(-6deg);
}
@keyframes flower-breathe {
  0% { transform: translate(-50%,-50%) rotate(-12deg); }
  50% { transform: translate(-49%,-51%) rotate(-9deg); }
  100% { transform: translate(-50%,-52%) rotate(-6deg); }
}
@keyframes flower-unfold {
  0% { transform: rotate(calc(var(--n) * 60deg)) scale(.97,.95); }
  100% { transform: rotate(calc(var(--n) * 60deg + 2deg)) scale(1.01,1.025); }
}
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after,
body.tab-hidden *, body.tab-hidden *::before, body.tab-hidden *::after,
body.modal-open .petal-field *, body.modal-open .flower, body.modal-open .flower > span {
  animation-play-state: paused !important;
}
.preview-tools #motion-toggle { display: inline-flex; align-items: center; gap: 6px; }
.preview-tools #motion-toggle:disabled { cursor: default; }
.about-copy .copy-note { font-size: 9px; color: #838879; margin-bottom: 0; }
.about-copy .personal-note p { font-family: inherit; font-style: normal; font-size: 11px; }
@media (max-width: 760px) {
  .falling-petal:nth-child(n+5) { display: none; }
  .contact h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .petal-field { display: none; }
  .flower, .flower > span { animation: none !important; }
}