/* ---------- Rich visual layer: page transitions, watermarks, micro-interactions, chart draw-in ----------
   All animation/transition rules here are automatically neutralized by the global reduced-motion
   kill-switch in base.css (prefers-reduced-motion + html[data-motion="reduce"]) — no per-rule guards needed. */

@keyframes hbm-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hbm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hbm-pulse-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes hbm-scale-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes hbm-tile-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hbm-draw { to { stroke-dashoffset: 0; } }
@keyframes hbm-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.5%, -1%); } }
@keyframes hbm-pop-in {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, -60px)) scale(1) rotate(var(--rot, 90deg)); }
}

/* Page-enter transition, fired once per route render via shell.focusMain() */
#main.page-enter { animation: hbm-fade-up .32s cubic-bezier(.22, 1, .36, 1); }

/* Per-area watermark: a large, faint themed drawing behind the page header, keyed by html[data-area]
   (set once per route in shell.markActive). The artwork is SVG (assets/art/wm-*.svg, made by
   tools/gen_art.mjs) and is tinted and positioned in art.css; only the drift animation lives here. */
.page-head { position: relative; }
.page-head::before { animation: hbm-drift 9s ease-in-out infinite; }

/* Tile: icon lift on hover/focus, gentle grid entrance */
.tile .tile-ico { display: inline-block; transition: transform .18s ease; }
.tile:hover .tile-ico, .tile:focus-visible .tile-ico { transform: scale(1.16) rotate(-4deg); }
.grid .tile { animation: hbm-tile-in .32s ease-out backwards; }
.grid .tile:nth-child(1) { animation-delay: 0ms; } .grid .tile:nth-child(2) { animation-delay: 30ms; }
.grid .tile:nth-child(3) { animation-delay: 60ms; } .grid .tile:nth-child(4) { animation-delay: 90ms; }
.grid .tile:nth-child(5) { animation-delay: 120ms; } .grid .tile:nth-child(6) { animation-delay: 150ms; }
.grid .tile:nth-child(7) { animation-delay: 180ms; } .grid .tile:nth-child(8) { animation-delay: 210ms; }
.grid .tile:nth-child(n+9) { animation-delay: 230ms; }

/* Nav: soft pulse on the active tab's icon only (never on .emergency-btn) */
.nav a[aria-current="page"] .nav-ico, .bottombar a[aria-current="page"] .nav-ico {
  display: inline-block; animation: hbm-pulse-soft 2.4s ease-in-out infinite;
}

/* Empty state hero: gentle float; banner icon: pop in */
.empty .empty-hero { animation: hbm-float 4.2s ease-in-out infinite; }
.banner .banner-ico { display: inline-block; animation: hbm-scale-in .28s ease-out; }

/* Progress bar: animated fill */
.progress > span { transition: width .55s cubic-bezier(.22, 1, .36, 1); }

/* Sparkline: animated draw-in (paired with pathLength="1" set in ui.js) */
.spark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hbm-draw 1s ease-out forwards; }
.spark .band { animation: hbm-scale-in .4s ease-out; }

/* Ring chart (new data-viz primitive, see ui.ring()) */
.ring-chart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--ring-size, 96px); height: var(--ring-size, 96px); }
.ring-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-chart .ring-bg { fill: none; stroke: var(--outline-soft); }
.ring-chart .ring-fg { fill: none; stroke: var(--sage); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
.ring-chart.ring-plum .ring-fg { stroke: var(--plum); }
.ring-chart.ring-gold .ring-fg { stroke: var(--gold); }
.ring-chart .ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--plum-deep); font-size: .95rem; }

/* Celebration burst: small themed particles spawned by ui.celebrate(). Fixed to the viewport
   (not the triggering element) so they stay visible no matter how far the page is scrolled. */
.celebrate-particle {
  position: fixed; left: 50%; top: 40vh; font-size: 1.3rem; pointer-events: none; z-index: 90;
  animation: hbm-pop-in .9s ease-out forwards;
}

/* High contrast: decorative-only layers step aside so they never compete with text contrast */
html[data-contrast="high"] .page-head::before,
html[data-contrast="high"] .celebrate-particle { display: none; }