/* Shared by the example sites: the "this is an example" bar and the
   shader hero mechanics. Everything else is each site's own design. */
.ex-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px;
  background: #0b0b0c; color: #ededee;
  font: 600 12px/1.3 'Outfit', system-ui, sans-serif; letter-spacing: .04em;
}
.ex-bar b { color: #d8ff35; font-weight: 800; }
.ex-bar a { color: #0b0b0c; background: #d8ff35; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 800; }
.ex-bar a:hover { background: #fff; }

/* Shader hero: the canvas fades in over a CSS gradient that is already a
   finished design on its own (the fallback). */
[data-shader] { position: relative; isolation: isolate; overflow: hidden; }
[data-shader] > canvas.ex-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s ease; display: block; }
[data-shader].is-live > canvas.ex-gl { opacity: 1; }
[data-shader].is-static > canvas.ex-gl { display: none; }
@media (prefers-reduced-motion: reduce) { [data-shader] > canvas.ex-gl { transition: none; } }