/* =========================================================
   /css/ambient-vibe.css
   Global Ambient State & Vibe Timer Animations
   ========================================================= */

body.vibe-wrap-up-active::before,
#tv-mode-container.vibe-wrap-up-active::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; 
  z-index: 0; pointer-events: none;
  background: linear-gradient(135deg, #3730a3 0%, #4c1d95 100%);
  background-size: 200% 200%; opacity: 0;
  will-change: background-position, opacity;
  animation: vibeFadeIn 5s ease-in forwards, vibeBreathe 8s ease-in-out infinite alternate;
}

body.vibe-wrap-up-active::after,
#tv-mode-container.vibe-wrap-up-active::after {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; 
  z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, #ea580c 0%, #b45309 100%);
  background-size: 200% 200%; opacity: 0;
  will-change: background-position, opacity;
  animation: vibeBreathe 8s ease-in-out infinite alternate, vibeAmberFade var(--vibe-duration, 300s) ease-in forwards;
  animation-delay: 0s, var(--vibe-elapsed, 0s);
}

@keyframes vibeFadeIn { to { opacity: 1; } }
@keyframes vibeBreathe { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes vibeAmberFade { 0% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.vibe-wrap-up-active::before,
  #tv-mode-container.vibe-wrap-up-active::before { animation: vibeFadeIn 5s ease-in forwards; }
  body.vibe-wrap-up-active::after,
  #tv-mode-container.vibe-wrap-up-active::after { animation: vibeAmberFade var(--vibe-duration, 300s) ease-in forwards; animation-delay: var(--vibe-elapsed, 0s); }
}