/* ═══════════════════════════════════════════════════════════════
   ANIMATED PAGE ICONS
   Subtle, themed SVG animations for each page hero.
   ═══════════════════════════════════════════════════════════════ */

/* Container for the animated icon */
.page-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 7px;
}
.page-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR ICON ANIMATIONS
   These use the same class names but scoped so they work
   inside .topbar-page-icon as well as .page-icon containers.
   ═══════════════════════════════════════════════════════════ */

/* ── Dashboard bars ── */
@keyframes bar-grow {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
.topbar-page-icon .bar-1,
.page-icon-bars .bar-1 { animation: bar-grow 1.4s ease-in-out 0s infinite; transform-origin: bottom; }
.topbar-page-icon .bar-2,
.page-icon-bars .bar-2 { animation: bar-grow 1.4s ease-in-out 0.2s infinite; transform-origin: bottom; }
.topbar-page-icon .bar-3,
.page-icon-bars .bar-3 { animation: bar-grow 1.4s ease-in-out 0.4s infinite; transform-origin: bottom; }
.topbar-page-icon .bar-4,
.page-icon-bars .bar-4 { animation: bar-grow 1.4s ease-in-out 0.6s infinite; transform-origin: bottom; }

/* ── Weekly pen ── */
@keyframes pen-write {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(0.5px, -1px) rotate(-3deg); }
  50% { transform: translate(1px, 0) rotate(0deg); }
  75% { transform: translate(0.5px, 1px) rotate(3deg); }
}
.topbar-page-icon .pen-body,
.page-icon-pen .pen-body {
  animation: pen-write 2s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ── Monthly calendar check ── */
@keyframes cal-check {
  0%, 65%, 100% { stroke-dashoffset: 20; opacity: 0; }
  80%, 92% { stroke-dashoffset: 0; opacity: 1; }
}
.topbar-page-icon .cal-check,
.page-icon-cal .cal-check {
  stroke-dasharray: 20;
  animation: cal-check 3s ease-in-out infinite;
}

/* ── History clock ── */
@keyframes clock-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.topbar-page-icon .minute-hand,
.page-icon-clock .minute-hand {
  animation: clock-spin 6s linear infinite;
  transform-origin: 12px 12px;
}
.topbar-page-icon .hour-hand,
.page-icon-clock .hour-hand {
  animation: clock-spin 36s linear infinite;
  transform-origin: 12px 12px;
}

/* ── Insights lightbulb ── */
@keyframes bulb-ray {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes bulb-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.topbar-page-icon .ray,
.page-icon-bulb .ray {
  animation: bulb-ray 2s ease-in-out infinite;
}
.topbar-page-icon .ray:nth-child(2),
.page-icon-bulb .ray:nth-child(2) { animation-delay: 0.3s; }
.topbar-page-icon .ray:nth-child(3),
.page-icon-bulb .ray:nth-child(3) { animation-delay: 0.6s; }
.topbar-page-icon .ray:nth-child(4),
.page-icon-bulb .ray:nth-child(4) { animation-delay: 0.9s; }
.topbar-page-icon .bulb-body,
.page-icon-bulb .bulb-body {
  animation: bulb-glow 2s ease-in-out infinite;
}

/* ── Impulse brain ── */
@keyframes brain-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.topbar-page-icon .brain-main,
.page-icon-brain .brain-main {
  animation: brain-pulse 2.5s ease-in-out infinite;
  transform-origin: center;
}

/* ── 30-Day hourglass sand ── */
@keyframes sand-fall {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(2px); opacity: 0.3; }
}
.topbar-page-icon .sand,
.page-icon-hourglass .sand {
  animation: sand-fall 1.5s ease-in-out infinite;
}
.topbar-page-icon .sand:nth-child(3),
.page-icon-hourglass .sand:nth-child(3) { animation-delay: 0.75s; }

/* ── Purchases bag ── */
@keyframes bag-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  60% { transform: translateY(0); }
}
.topbar-page-icon .bag-main,
.page-icon-bag .bag-main {
  animation: bag-bounce 2s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ── Discards shield ── */
@keyframes shield-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
@keyframes shield-draw {
  0%, 55%, 100% { stroke-dashoffset: 16; opacity: 0; }
  70%, 90% { stroke-dashoffset: 0; opacity: 1; }
}
.topbar-page-icon .shield-main,
.page-icon-shield .shield-main {
  animation: shield-pulse 2.5s ease-in-out infinite;
  transform-origin: center;
}
.topbar-page-icon .shield-check,
.page-icon-shield .shield-check {
  stroke-dasharray: 16;
  animation: shield-draw 3s ease-in-out infinite;
}

/* ── Settings gear ── */
@keyframes gear-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.topbar-page-icon .gear-main,
.page-icon-gear .gear-main {
  animation: gear-spin 6s linear infinite;
  transform-origin: center;
}

/* ══ 30-Day divider icon — subtle tick ══ */
@keyframes tick-tock {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}
.divider-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}
.divider-icon svg {
  width: 100%;
  height: 100%;
}
.divider-icon .pendulum {
  animation: tick-tock 1.5s ease-in-out infinite;
  transform-origin: top center;
}

/* ══ Topbar page icon ══ */
.topbar-page-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  border-radius: 7px;
  background: var(--accent-soft);
  padding: 5px;
  box-sizing: border-box;
}
.topbar-page-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.topbar-page-icon svg * {
  overflow: visible;
}

/* ══ Reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  .page-icon *,
  .page-icon svg *,
  .topbar-page-icon * {
    animation: none !important;
  }
}