/* ambient.css — work-gallery media fills + the corner BGM toggle.
   Added alongside the vendored js/ambient.js player. Uses theme tokens. */

/* Real photos/video fill the work tiles; caption gets a legibility scrim. */
.work-grid .tile img,
.work-grid .tile video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.work-grid .tile .meta {
  left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
  color: #fff; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.work-grid .tile { cursor: default; }

/* Ambient sound toggle — fixed bottom-LEFT (chatbot launcher sits bottom-right). */
.sound-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  color: var(--ink-soft);
  transition: color .3s, border-color .3s, background .3s;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle:hover { border-color: var(--accent); color: var(--ink); }
.sound-toggle__bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.sound-toggle__bars i { width: 3px; height: 5px; background: currentColor; border-radius: 2px; }
.sound-toggle.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.sound-toggle.is-on .sound-toggle__bars i { animation: eqbar 1s ease-in-out infinite; }
.sound-toggle.is-on .sound-toggle__bars i:nth-child(2) { animation-delay: .2s; }
.sound-toggle.is-on .sound-toggle__bars i:nth-child(3) { animation-delay: .4s; }
@keyframes eqbar { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .sound-toggle.is-on .sound-toggle__bars i { animation: none; } }
@media (max-width: 720px) { .sound-toggle { left: 14px; bottom: 14px; } }