/* =============================================================================
   Footer widgets flair (Weather + NBH Radio) - shared across pages.
   Dark footer context (#1a1a1a). No emojis; icons are inline SVG built by
   shared/footer-widgets.js. All motion is transform/opacity and respects
   prefers-reduced-motion.
   ============================================================================= */

.fw2 { position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.fw2:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }

/* condition tint: a whisper of colour, never a poster */
.fw2::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.8s ease;
}
.fw2[data-cond="sun"]::after { background: radial-gradient(120% 90% at 85% 0%, rgba(242, 201, 76, 0.16), transparent 60%); opacity: 1; }
.fw2[data-cond="night"]::after { background: radial-gradient(120% 90% at 85% 0%, rgba(126, 140, 224, 0.14), transparent 60%); opacity: 1; }
.fw2[data-cond="rain"]::after { background: radial-gradient(120% 90% at 85% 0%, rgba(126, 166, 224, 0.13), transparent 60%); opacity: 1; }
.fw2[data-cond="storm"]::after { background: radial-gradient(120% 90% at 85% 0%, rgba(155, 138, 224, 0.15), transparent 60%); opacity: 1; }
.fw2[data-cond="cloud"]::after { background: radial-gradient(120% 90% at 85% 0%, rgba(190, 195, 205, 0.10), transparent 60%); opacity: 1; }

/* ----- Weather icon (animated SVG parts) -------------------------------- */
.fw2-icon { display: inline-flex; width: 40px; height: 40px; }
.fw2-icon svg { width: 100%; height: 100%; overflow: visible; }
.fw2-sunspin { transform-origin: center; animation: fw2-spin 26s linear infinite; }
@keyframes fw2-spin { to { transform: rotate(360deg); } }
.fw2-cloud-drift { animation: fw2-drift 7s ease-in-out infinite alternate; }
@keyframes fw2-drift { from { transform: translateX(-1.2px); } to { transform: translateX(1.6px); } }
.fw2-drop { animation: fw2-fall 1.5s linear infinite; }
.fw2-drop:nth-of-type(2) { animation-delay: 0.5s; }
.fw2-drop:nth-of-type(3) { animation-delay: 1s; }
@keyframes fw2-fall {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}
.fw2-bolt { animation: fw2-flash 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes fw2-flash {
  0%, 86%, 100% { opacity: 1; }
  90% { opacity: 0.25; }
  93% { opacity: 1; }
  96% { opacity: 0.45; }
}
.fw2-star { animation: fw2-twinkle 2.6s ease-in-out infinite; }
.fw2-star:nth-of-type(2) { animation-delay: 1.1s; }
@keyframes fw2-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.fw2-fog-line { animation: fw2-drift 5s ease-in-out infinite alternate; }
.fw2-fog-line:nth-of-type(2) { animation-delay: 0.9s; animation-direction: alternate-reverse; }

/* ----- HQ clock (weather card) ------------------------------------------ */
.fw2-time { color: #9b9b95; font-size: 15px; letter-spacing: 0.01em; }

/* ----- Radio card -------------------------------------------------------- */
a.fw2 { display: flex; color: inherit; text-decoration: none; cursor: pointer; }
/* the base .ft-widget is min-height 150px: keep the label on the same top
   line as the weather card's, and centre the track row in the space below */
.fw2-radio .ft-radio { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.fw2-art {
  position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px;
  overflow: visible; display: inline-flex; align-items: center; justify-content: center;
}
.fw2-art img {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover; display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.fw2-art .fw2-spot-badge {
  position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px;
  border-radius: 9999px; background: #1a1a1a; display: inline-flex;
  align-items: center; justify-content: center;
}
.fw2-art .fw2-spot-badge svg { width: 14px; height: 14px; }
.fw2-track { min-width: 0; line-height: 1.3; }
.fw2-track [data-radio-title] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw2-track [data-radio-sub] { display: block; color: #9b9b95; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* equalizer: only exists while something is playing (idle dots read as broken) */
.fw2-eq { display: none; align-items: flex-end; gap: 3px; height: 20px; margin-left: auto; flex-shrink: 0; }
.fw2.is-playing .fw2-eq { display: inline-flex; }
.fw2-eq i { width: 3.5px; height: 5px; border-radius: 2px; background: #54bf87; }
.fw2.is-playing .fw2-eq i { opacity: 1; animation: fw2-eq 1s ease-in-out infinite; }
.fw2.is-playing .fw2-eq i:nth-child(2) { animation-delay: 0.18s; animation-duration: 0.9s; }
.fw2.is-playing .fw2-eq i:nth-child(3) { animation-delay: 0.36s; animation-duration: 1.15s; }
.fw2.is-playing .fw2-eq i:nth-child(4) { animation-delay: 0.09s; animation-duration: 0.8s; }
@keyframes fw2-eq { 0%, 100% { height: 5px; } 50% { height: 18px; } }

/* label row + LIVE badge */
.fw2-lblrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fw2-live {
  display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; color: #54bf87;
}
.fw2.is-playing .fw2-live { display: inline-flex; }
.fw2-live i {
  width: 7px; height: 7px; border-radius: 9999px; background: #54bf87;
  animation: fw2-pulse 1.6s ease-in-out infinite;
}
@keyframes fw2-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .fw2:hover { transform: none; }
  .fw2-sunspin, .fw2-cloud-drift, .fw2-drop, .fw2-bolt, .fw2-star, .fw2-fog-line,
  .fw2.is-playing .fw2-eq i, .fw2-live i { animation: none; }
}