.observance-note[hidden] { display: none; }

.observance-note {
  position: absolute;
  z-index: 4;
  top: 96px;
  left: 5.4%;
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  max-width: min(340px, calc(100vw - 28px));
  padding: 10px 14px 11px 11px;
  border: 1px solid rgba(210, 219, 230, .16);
  border-radius: 4px;
  background: rgba(27, 29, 34, .76);
  color: #e0e3e8;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
}

.observance-note.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.observance-mark {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
  background: var(--prism-line);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.observance-copy { display: grid; gap: 4px; }
.observance-kicker { color: #aeb7c3; font: 7px/1 'Jost EG', Arial, sans-serif; letter-spacing: 1.3px; }
.observance-messages { display: grid; gap: 2px; }
.observance-message { color: #e0e3e8; font: 400 11px/1.35 'Jost EG', Arial, sans-serif; letter-spacing: .015em; }

.has-observance-atmosphere { position: relative; }
.observance-symbols {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.observance-symbol {
  --symbol-ink: #84c9e8;
  position: absolute;
  display: block;
  width: clamp(20px, 3vw, 38px);
  height: clamp(20px, 3vw, 38px);
  opacity: .12;
  color: var(--symbol-ink);
  animation: observance-symbol-float 11s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--symbol-ink) 28%, transparent));
}
.observance-symbol:nth-child(2n) { animation-duration: 14s; animation-delay: -5s; }
.observance-symbol:nth-child(3n) { animation-duration: 17s; animation-delay: -8s; }
.observance-symbol svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes observance-symbol-float {
  from { translate: 0 7px; rotate: -5deg; }
  to { translate: 0 -8px; rotate: 5deg; }
}

html[data-observance-themes~="pride"] .observance-symbol[data-theme="pride"] { --symbol-ink: #6fd5e8; opacity: .17; }
html[data-observance-themes~="lgbtq-history"] .observance-symbol[data-theme="lgbtq-history"],
html[data-observance-themes~="coming-out"] .observance-symbol[data-theme="coming-out"] { --symbol-ink: #8ab8d6; }
html[data-observance-themes~="indigenous-day"] .observance-symbol[data-theme="indigenous-day"],
html[data-observance-themes~="native-heritage"] .observance-symbol[data-theme="native-heritage"] { --symbol-ink: #8dc8b6; }
html[data-observance-themes~="halloween"] .observance-symbol[data-theme="halloween"] { --symbol-ink: #c7b0d5; }

@media (max-width: 760px) {
  .observance-note { top: 80px; left: 7%; padding: 9px 11px 10px 9px; gap: 8px; max-width: min(300px, calc(100vw - 20px)); }
  .observance-mark { font-size: 16px; }
  .observance-kicker { font-size: 6px; }
  .observance-message { font-size: 10px; }
  .observance-symbol { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .observance-note { transition: none; }
  .observance-symbol { animation: none; }
}