/* V5: reuse the template's progressive bottom blur on every public page.
   The JS controller only switches its visibility, never the page's content. */
.blur-container.findigital-viewport-blur {
  display: block;
  height: clamp(120px, 24vh, 300px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
}

.blur-container.findigital-viewport-blur[data-blur-active="true"] {
  opacity: 1;
  visibility: visible;
}

/* Without backdrop-filter there is no dark/color-panel substitute. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blur-container.findigital-viewport-blur { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blur-container.findigital-viewport-blur { display: none; }
}