.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow 240ms ease;
}

.site-header.is-scrolled { box-shadow: 0 3px 16px #2732220d; }
.desktop-nav a[aria-current="location"] { color: #7b5539; }
.mobile-nav a[aria-current="location"] { font-weight: 600; }

#reading-progress {
  position: fixed;
  z-index: 25;
  inset: 0 0 auto;
  height: 3px;
  background: #ac8d69;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.hero-flower {
  right: 0;
  transform-origin: 20% 72%;
  animation: magnolia-breeze 9s ease-in-out infinite;
}

@keyframes magnolia-breeze {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.7deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(1deg); }
}

#petal-layer {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.falling-petal {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.falling-petal.petal-small { width: 26px; height: 26px; }
.footer-tools { display: flex; gap: 12px; align-items: center; }
.footer-tools button { color: inherit; background: transparent; }
.footer-tools button:hover { background: #4b5747; }
.footer-tools button:disabled { opacity: .55; }
.button svg, .nav-visit svg, .back-top svg {
  transition: transform 250ms ease, background 250ms ease;
}

.page-flower { animation: magnolia-breeze 10s ease-in-out infinite; }
.piece-dialog[open] { animation: magnolia-dialog 230ms ease-out; }

@keyframes magnolia-dialog {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover svg, .nav-visit:hover svg { transform: translate(3px, -3px); }
  .back-top:hover svg { transform: translateY(-3px); }
}

@media (max-width: 760px) {
  :root { scroll-padding-top: 96px; }
  .footer-tools { order: 2; }
  .footer-main p { width: 100%; }
  .falling-petal { width: 30px; height: 30px; }
  .falling-petal.petal-small { width: 22px; height: 22px; }
  .hero-flower { right: 0; animation-duration: 11s; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .hero-flower { width: 480px; height: 480px; right: 0; bottom: -24px; }
}

@media (max-width: 360px) {
  .footer-tools { gap: 7px; }
  .footer-tools .back-top { width: 38px; height: 38px; }
}

body[data-motion="off"] .hero-flower,
body[data-motion="off"] .page-flower,
body[data-motion="off"] .piece-dialog { animation: none; }
body[data-motion="off"] #petal-layer { display: none; }
body[data-motion="off"] .button,
body[data-motion="off"] .button svg,
body[data-motion="off"] .frame { transition: none; }
body.is-background .hero-flower,
body.is-background .page-flower { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-flower, .page-flower, .piece-dialog { animation: none !important; }
  #petal-layer { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}