/* ==========================================================================
   花瓣飘落 · 装饰层样式（只给 scripts/falling-petals.js 用）
   —— 这一层固定在视口最底下、永远 pointer-events: none，
      既不挡点击/输入/滚动，也不参与任何布局；层里只有一张 <canvas>。
      开关状态记在 localStorage 的 diary.v1.petals（on / off）。
   ========================================================================== */

/* 画布容器：铺满视口，层级压在内容（.page 的 --z-base）下面 */
.petals {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 画布本身：宽高交给 JS 按 devicePixelRatio 设，这里只管铺满与淡入淡出 */
.petals__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease);
}

/* 关掉时先淡出（JS 同时会停掉 rAF 并清屏） */
.petals--off .petals__canvas {
  opacity: 0;
}

/* 顶栏那枚「花瓣」开关：沿用 .icon-btn 的外形，关掉时自己淡一点做状态提示 */
.petals-toggle[aria-pressed="false"] {
  opacity: .55;
}