/* The hunny-pot music player for "The Heart of Pooh".
   Floats bottom-left on most pages; on the animated book it sits in the top bar. */
.hw-player {
  --pot: #e2a63b;
  --pot-dark: #a8650a;
  --pot-ink: #2b241a;
  --pill-bg: color-mix(in srgb, var(--paper, var(--room, #f8f1da)) 92%, transparent);
  --pill-fg: var(--ink, var(--chrome, #2b241a));
  --pill-soft: var(--ink-soft, var(--chrome-soft, #62563f));
  --pill-rule: var(--rule, var(--line, #d9c999));
  position: fixed; z-index: 45;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.6rem;
  font-family: "IM Fell English SC", Georgia, serif;
}
.hw-player.inline { position: static; z-index: auto; }

.hw-pot {
  position: relative; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; flex: none;
  filter: drop-shadow(0 6px 10px rgba(60, 35, 0, 0.35));
  transition: transform 0.2s ease;
}
.hw-player.inline .hw-pot { width: 40px; height: 40px; filter: none; }
.hw-pot:hover { transform: rotate(-6deg) scale(1.05); }
.hw-pot:focus-visible { outline: 2px solid var(--focus, #2f6db3); outline-offset: 3px; border-radius: 50%; }
.hw-pot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hw-pot .lid { transform-origin: 30px 16px; transition: transform 0.35s cubic-bezier(.4,1.6,.5,1); }
.hw-player.playing .hw-pot .lid { transform: translate(6px, -6px) rotate(18deg); }
.hw-player.playing .hw-pot .pot-body { animation: hw-sway 2.4s ease-in-out infinite; transform-origin: 30px 56px; }
.hw-pot .state { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pot-ink); color: #fbf6e5; display: grid; place-items: center; box-shadow: 0 0 0 2px #fbf6e5; }
.hw-player.inline .hw-pot .state { width: 17px; height: 17px; right: -3px; bottom: -3px; }
.hw-pot .state svg { width: 55%; height: 55%; }
.hw-player.waiting .hw-pot { animation: hw-nudge 1.6s ease-in-out infinite; }

.hw-pill {
  display: grid; gap: 0.25rem; min-width: 0; max-width: min(15rem, calc(100vw - 120px));
  padding: 0.45rem 0.75rem 0.5rem; border-radius: 12px;
  background: var(--pill-bg); color: var(--pill-fg); border: 1px solid var(--pill-rule);
  backdrop-filter: blur(6px); box-shadow: 0 8px 20px -14px rgba(40, 25, 0, 0.6);
}
.hw-player.inline .hw-pill { display: none; }
.hw-pill .t { font-size: 0.92rem; letter-spacing: 0.04em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-pill .s { font: italic 0.74rem/1.2 "Spectral", Georgia, serif; color: var(--pill-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-bar { height: 3px; border-radius: 3px; background: var(--pill-rule); overflow: hidden; cursor: pointer; }
.hw-bar span { display: block; height: 100%; width: 0; background: var(--pot-dark); }
.hw-close { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--pill-rule);
  background: var(--pill-bg); color: var(--pill-soft); display: grid; place-items: center; cursor: pointer; padding: 0; opacity: 0; transition: opacity 0.2s; }
.hw-pill-wrap { position: relative; }
.hw-player:hover .hw-close, .hw-close:focus-visible { opacity: 1; }
.hw-close svg { width: 10px; height: 10px; }
.hw-player.collapsed .hw-pill-wrap { display: none; }

/* notes and bees rising from the pot */
.hw-fx { position: absolute; left: 0; bottom: 0; width: 58px; height: 58px; pointer-events: none; overflow: visible; }
.hw-player.inline .hw-fx { width: 40px; height: 40px; }
.hw-fx i { position: absolute; left: 50%; top: 10%; font-style: normal; color: var(--pot-dark); font-family: Georgia, serif; font-size: 15px; opacity: 0; }

@keyframes hw-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hw-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* On phones the pot plays on its own; the title would cover what people are typing. */
@media (max-width: 600px) {
  .hw-pill-wrap { display: none; }
  .hw-pot { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-player.playing .hw-pot .pot-body, .hw-player.waiting .hw-pot { animation: none; }
  .hw-fx { display: none; }
}