/* ========================================================================== Broodwich — netherworld backdrop + character placement helpers. Loaded alongside the regular stylesheets; effects only activate when data-brood='on' is set on . Palette + surface tokens live in tokens.css; this file is purely visual composition. ========================================================================== */ /* A full-bleed backdrop that hides the normal page bg. Opt-in per-container via .brood-plane; every element inside stays clickable. */ .brood-plane { position: relative; isolation: isolate; overflow: hidden; } /* The landscape slots in under the content at z-index 0. */ .brood-plane::before { content: ''; position: absolute; inset: 0; background-image: url('/public/brand/broodwich/landscape.svg'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--speed-brood, 400ms) ease-out; } :root[data-brood='on'] .brood-plane::before { opacity: 1; } .brood-plane > * { position: relative; z-index: 1; } /* Character + motif positioning helpers. They're opt-in decorations; pages compose them inside a .brood-plane as needed. */ .brood-sandwich { display: block; width: clamp(180px, 28vw, 360px); aspect-ratio: 1; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.35)); } .brood-minion { display: block; width: clamp(64px, 8vw, 120px); aspect-ratio: 1; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); } .brood-bones { display: block; width: clamp(200px, 26vw, 360px); aspect-ratio: 320 / 180; opacity: 0.9; } /* Cinematic preview: landscape as bg-image + characters absolutely positioned on it. Always renders (independent of data-brood) so it works inside the styleguide and marketing panels. */ .brood-preview { position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ink); background: var(--brood-deep, #24182f); } .brood-preview__landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .brood-preview__char { position: absolute; z-index: 1; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.45)); } .brood-preview__sandwich { width: 22%; left: 50%; bottom: 18%; transform: translateX(-50%); } .brood-preview__minion { width: 9%; bottom: 9%; } .brood-preview__minion--left { left: 12%; } .brood-preview__minion--right { right: 12%; transform: scaleX(-1); } .brood-preview__bones { width: 16%; left: 50%; bottom: 2%; transform: translateX(-50%); filter: none; } /* Subtle ambient motion — disabled by prefers-reduced-motion via tokens.css rules. */ @keyframes brood-skitter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .brood-preview__minion--left { animation: brood-skitter 2.8s ease-in-out infinite; } .brood-preview__minion--right { animation: brood-skitter 3.2s ease-in-out infinite -1.4s; } :root[data-brood='on'] .brood-minion { animation: brood-skitter 2.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .brood-preview__minion--left, .brood-preview__minion--right, :root[data-brood='on'] .brood-minion { animation: none; } }