/* Background music toggle: one small round control in the lower-left
   corner, four thin bars that move while the music plays and lie flat when
   it is muted. It sits on photography and on paper alike, so it carries its
   own frosted ground rather than borrowing the page's. */
.cpg-ambient {
  position: fixed;
  inset-block-end: clamp(1rem, 2vw, 1.5rem);
  inset-inline-start: clamp(1rem, 2vw, 1.5rem);
  z-index: 90;
}
.cpg-ambient__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(13, 13, 12, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #0D0D0C;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.cpg-ambient__toggle:hover { border-color: rgba(13, 13, 12, .5); }
.cpg-ambient__toggle:focus-visible {
  outline: var(--cpg-focus-width, 2px) solid var(--cpg-focus-ring, currentColor);
  outline-offset: 3px;
}
:root[data-cpg-theme="dark"] .cpg-ambient__toggle {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(13, 13, 12, .72);
  color: #FFFFFF;
}
:root[data-cpg-theme="dark"] .cpg-ambient__toggle:hover { border-color: rgba(255, 255, 255, .6); }

.cpg-ambient__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: .875rem;
}
.cpg-ambient__bars i {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: height .3s;
}
.cpg-ambient.is-playing .cpg-ambient__bars i { animation: cpg-ambient-bar 1.4s ease-in-out infinite; }
.cpg-ambient.is-playing .cpg-ambient__bars i:nth-child(2) { animation-delay: -.5s; }
.cpg-ambient.is-playing .cpg-ambient__bars i:nth-child(3) { animation-delay: -.9s; }
.cpg-ambient.is-playing .cpg-ambient__bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes cpg-ambient-bar {
  0%, 100% { height: 3px; }
  50% { height: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cpg-ambient.is-playing .cpg-ambient__bars i { animation: none; }
  .cpg-ambient.is-playing .cpg-ambient__bars i:nth-child(odd) { height: .625rem; }
  .cpg-ambient.is-playing .cpg-ambient__bars i:nth-child(even) { height: .375rem; }
}
/* On a phone the hero's slide arrows sit in the lower-left corner, so the
   toggle rises clear of them. */
@media (max-width: 47.999rem) {
  .cpg-ambient { inset-block-end: 5.25rem; inset-inline-start: 1rem; }
}
@media print { .cpg-ambient { display: none; } }