/*
 Theme Name:   Chaptrly
 Theme URI:    https://chaptrly.eu/
 Description:  Child theme of Bricks for Chaptrly.eu. Visual design lives in Bricks (theme style, global classes, variables); this theme adds the fixed background layers and the sticky header. Scroll motion comes from the Puik Motion plugin, content logic from the chaptrly-site mu-plugin.
 Author:       Studio Puik
 Template:     bricks
 Version:      1.0.0
 Text Domain:  chaptrly
*/

/* ============ BACKGROUND LAYERS (fixed on scroll) ============ */
/* Hosts are created by assets/js/backgrounds.js. */

.bg-blobs,
.bg-letters {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-blobs { z-index: -2; }
.bg-letters { z-index: -1; }

.blob {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: var(--c);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.18;
  animation: chaptrly-drift var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

@keyframes chaptrly-drift {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(140px, -90px) scale(1.15); }
  40%  { transform: translate(-90px, 60px) scale(0.88); }
  60%  { transform: translate(110px, 130px) scale(1.1); }
  80%  { transform: translate(-130px, -60px) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}

.bg-letters svg {
  display: block;
  width: 100%;
  height: 100%;
}

.glyph {
  font-family: var(--font-serif);
  font-weight: 700;
  fill: none;
  stroke: rgba(0, 0, 0, 0.38);
  stroke-width: 1.8px;
  paint-order: stroke;
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .glyph {
    animation: none !important;
    opacity: 0.35;
    stroke-dashoffset: 0 !important;
  }
}

/* ============ STICKY HEADER ============ */

/* Bricks' own "sticky header" is position: fixed and overlays the content;
   the static build used position: sticky, which keeps its space. The Bricks
   header template renders inside #brx-header, so stick that wrapper. */
#brx-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}