/* Chaptrly behaviour layer: fixed background layers + scroll reveal. Ported from static/style.css. Visual styling lives in Bricks (theme style, global classes, variables); only what the JS drives is here. */ /* ============ BACKGROUND LAYERS (fixed on scroll) ============ */ .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; } /* ============ SCROLL-IN ANIMATIONS ============ */ /* Longhand transition-* on purpose: .btn / .inno-card also set their own longhands for the hover scale, and a shorthand would reset the stagger delay (see the note in static/style.css). :where() keeps these at zero specificity, so the Bricks classes (.btn, .inno-card) win on transition timing and hover transform regardless of stylesheet order – the same outcome the static source got from order. */ /* Hidden start state before site.js runs. html.chaptrly-reveal is set by a tiny inline script in (only with motion allowed), so reveal targets never paint visible first and then fade out. */ :where(html.chaptrly-reveal) :where([data-reveal], [data-reveal-group] > *) { opacity: 0; transform: translateY(28px); } :where(.reveal) { opacity: 0; transform: translateY(28px); transition-property: opacity, transform; transition-duration: 0.4s, 0.4s; transition-timing-function: var(--ease-out), var(--ease-out); transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms); } :where(.reveal.is-visible) { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { :where(.reveal) { transition: none; opacity: 1; transform: none; } }