/* Ambience toggle for the static pages (injectables / wellness).
   Mirrors #ambience in src/styles.css on the homepage; keep the two in step. */
@font-face { font-family: 'Cinzel'; src: url('/fonts/cinzel-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
#ambience {
  position: fixed;
  left: clamp(14px, 2.5vw, 28px);
  bottom: calc(clamp(14px, 2.5vh, 24px) + env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  background: rgba(11, 10, 8, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 162, 75, 0.26);
  color: #e8c877;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: border-color 0.4s ease, color 0.4s ease;
}
#ambience .amb-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
#ambience .amb-bars i { width: 2px; height: 4px; background: #c9a24b; transition: height 0.3s ease; }
#ambience[aria-pressed="true"] .amb-bars i { animation: amb 1.2s ease-in-out infinite alternate; }
#ambience[aria-pressed="true"] .amb-bars i:nth-child(2) { animation-delay: 0.2s; }
#ambience[aria-pressed="true"] .amb-bars i:nth-child(3) { animation-delay: 0.4s; }
@keyframes amb { from { height: 3px; } to { height: 12px; } }
@media (hover: hover) and (pointer: fine) {
  #ambience:hover { border-color: #e8c877; color: #fff3cf; }
}
@media (max-width: 767px) {
  #ambience { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  #ambience span:not(.amb-bars) { display: none; }
  #ambience { transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease; }
  #ambience.tucked { opacity: 0; transform: translateY(10px); pointer-events: none; }
}
#ambience.pending {
  border-color: #c9a24b;
  color: #e8c877;
  animation: amb-breathe 2.1s ease-in-out infinite;
}
@keyframes amb-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.34); }
  50%      { box-shadow: 0 0 0 9px rgba(201, 162, 75, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #ambience.pending { animation: none; }
}