/* ═══ Radio La Caletta — Base ═══ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; overflow: hidden;
  font-family: 'Red Hat Display', sans-serif;
  text-align: center; position: relative;
  color: #fff; background: rgb(17,17,17);
}

button { transition: all 200ms; padding: 0; background: transparent; border: none; cursor: pointer; }
@media (min-width: 375px) { button:hover { transform: scale(1.5); } }

/* ── Animations ── */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeOutLeft {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(-40px, 0, 0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.anim-fadeInLeft  { animation: fadeInLeft  500ms ease both; }
.anim-fadeOutLeft { animation: fadeOutLeft 500ms ease both; }
.anim-fadeIn      { animation: fadeIn      400ms ease both; }

.soft-entrance { animation: fadeIn 600ms ease both; }
.soft-entrance-delay-1 { animation: fadeInUp 500ms 100ms ease both; }
.soft-entrance-delay-2 { animation: fadeInUp 500ms 220ms ease both; }
.soft-entrance-delay-3 { animation: fadeInUp 500ms 340ms ease both; }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.grid-row { animation: rowIn 350ms ease both; }
.grid-row:nth-child(1)  { animation-delay:  0ms; }
.grid-row:nth-child(2)  { animation-delay: 40ms; }
.grid-row:nth-child(3)  { animation-delay: 80ms; }
.grid-row:nth-child(4)  { animation-delay:120ms; }
.grid-row:nth-child(5)  { animation-delay:160ms; }
.grid-row:nth-child(6)  { animation-delay:200ms; }
.grid-row:nth-child(7)  { animation-delay:240ms; }
.grid-row:nth-child(8)  { animation-delay:280ms; }
.grid-row:nth-child(9)  { animation-delay:320ms; }
.grid-row:nth-child(n+10){ animation-delay:360ms; }

@keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

/* ── Shared UI ── */
.toast {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); color: #fff; padding: 8px 18px;
  border-radius: 8px; font-size: 13px; opacity: 0;
  transition: opacity .25s; pointer-events: none; z-index: 999; white-space: nowrap;
}
.toast.show { opacity: 1; }

.sse-indicator {
  position: fixed; top: 12px; right: 12px; z-index: 100;
  width: 8px; height: 8px; border-radius: 50%;
  background: #555; transition: background .3s;
}
.sse-indicator.ok { background: #48bb78; box-shadow: 0 0 5px #48bb78; }
.sse-indicator.err { background: #fc8181; }
.sse-indicator.failover { background: #f6ad55; box-shadow: 0 0 6px #f6ad55; animation: failoverBlink 1.5s ease-in-out infinite; }
@keyframes failoverBlink { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.spin-wrap { display: flex; align-items: center; justify-content: center; height: 200px; }
.spinner { display: inline-block; }
.spinner div { width: 18px; height: 18px; background: #fff; border-radius: 100%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }
.spinner div:nth-child(1) { animation-delay: -.32s; }
.spinner div:nth-child(2) { animation-delay: -.16s; }

.grid-empty-msg { margin: auto; padding: 20px; font-size: 14px; opacity: 0.7; }