/* ============================================================ BDD CTA Motifs — ENGINE v2 (opt-in). GENERATED by brand-contexts/bdd/visual/motion/tools/build_engine_v2.py — edit there, never here. Root:
Every rule is rooted at [data-bdd-engine="2"]; keyframes bdd2-*; properties --bdd2-*. The legacy engine (its root class, modifier classes and keyframes) is untouched by this file. ============================================================ */ /* --- root: tokens, defaults (scoped to the v2 root, never :root) --- */ .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--primary); --bdd2-hue-light: var(--primary-semi-light); --bdd2-hue-dark: var(--primary-dark); --bdd2-hue-ultra-dark: var(--primary-ultra-dark); --bdd2-pyramid-hue: var(--primary); --bdd2-pyramid-hue-light: var(--primary-semi-light); --bdd2-tier-peak: .65; --bdd2-stroke: color-mix(in srgb, var(--white) 14%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--white) 8%, transparent); --bdd2-ground: var(--bdd-scheme-surface, var(--neutral)); --bdd2-opacity: .82; --bdd2-thirds-glow: 38%; --bdd2-venn-fill: 14%; --bdd2-contours-glow: 36%; --bdd2-contour-crest: var(--bdd2-hue-light); --bdd2-wash-opacity: .55; --bdd2-bubbles-light-opacity: .5; --bdd2-bubbles-deep-opacity: .92; --bdd2-arrow-ink: var(--bdd2-stroke); --bdd2-speed: 1; --bdd2-intensity: 1; --bdd2-glow-intensity: 1; --bdd2-bubbles-intensity: 1; --bdd2-satellite-globe: 1; --bdd2-satellite-lines: 1; --bdd2-spaceman-glow: 1; --bdd2-spaceman-orbits: 1; --bdd2-scrim: .4; --bdd2-grain: .055; --bdd2-floor: .55; --bdd2-ripple-duration: calc(9s / 1); --bdd2-intensity-narrow: .55; --bdd2-scrim-w: 42rem; --bdd2-scrim-h: 19rem; --bdd2-scrim-x: 50%; --bdd2-scrim-y: 50%; position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; opacity: var(--bdd2-opacity); -webkit-mask-image: radial-gradient(ellipse var(--bdd2-scrim-w) var(--bdd2-scrim-h) at var(--bdd2-scrim-x) var(--bdd2-scrim-y), rgba(0, 0, 0, calc(1 - var(--bdd2-scrim))) 0%, rgba(0, 0, 0, calc(1 - .8 * var(--bdd2-scrim))) 55%, rgba(0, 0, 0, calc(1 - .3 * var(--bdd2-scrim))) 85%, #000 100%); mask-image: radial-gradient(ellipse var(--bdd2-scrim-w) var(--bdd2-scrim-h) at var(--bdd2-scrim-x) var(--bdd2-scrim-y), rgba(0, 0, 0, calc(1 - var(--bdd2-scrim))) 0%, rgba(0, 0, 0, calc(1 - .8 * var(--bdd2-scrim))) 55%, rgba(0, 0, 0, calc(1 - .3 * var(--bdd2-scrim))) 85%, #000 100%); } .bdd-motif-v2[data-bdd-engine="2"] > *, .bdd-motif-v2[data-bdd-engine="2"] > .bdd-motif__part > * { position: absolute; display: block; } .bdd-motif-v2[data-bdd-engine="2"] > .bdd-motif__part { inset: 0; } @media (max-width: 1200px) { .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-intensity: var(--bdd2-intensity-narrow); --bdd2-opacity: .537; --bdd2-scrim: .6; } } /* page hue (same switch as the link system) and hue grounds */ body.bdd-hue--blue .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--accent); --bdd2-hue-light: var(--accent-semi-light); --bdd2-hue-dark: var(--accent-dark); --bdd2-hue-ultra-dark: var(--accent-ultra-dark); --bdd2-pyramid-hue: var(--accent); --bdd2-pyramid-hue-light: var(--accent-semi-light); } body.bdd-hue--orange .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--tertiary); --bdd2-hue-light: var(--tertiary-semi-light); --bdd2-hue-dark: var(--tertiary-dark); --bdd2-hue-ultra-dark: var(--tertiary-ultra-dark); --bdd2-pyramid-hue: var(--tertiary); --bdd2-pyramid-hue-light: var(--tertiary-semi-light); } body.bdd-hue--yellow .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--secondary); --bdd2-hue-light: var(--secondary-semi-light); --bdd2-hue-dark: var(--secondary-dark); --bdd2-hue-ultra-dark: var(--secondary-ultra-dark); --bdd2-pyramid-hue: var(--secondary); --bdd2-pyramid-hue-light: var(--secondary-semi-light); } [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--white); --bdd2-hue-light: var(--white); --bdd2-stroke: color-mix(in srgb, var(--bdd-scheme-rule, var(--white)) 26%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--bdd-scheme-rule, var(--white)) 14%, transparent); } [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-pyramid-hue: var(--primary-light); --bdd2-pyramid-hue-light: var(--primary-ultra-light); } body.bdd-hue--blue [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-pyramid-hue: var(--accent-light); --bdd2-pyramid-hue-light: var(--accent-ultra-light); } body.bdd-hue--orange [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-pyramid-hue: var(--tertiary-light); --bdd2-pyramid-hue-light: var(--tertiary-ultra-light); } body.bdd-hue--yellow [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-pyramid-hue: var(--secondary-light); --bdd2-pyramid-hue-light: var(--secondary-ultra-light); } /* light grounds (wash-*, hue-light, and light-neutral): the motif inherits the scheme hue tokens - strokes from the hue LIGHT value, fills/glows from ULTRA-LIGHT at lower opacity. Same animation language, geometry, and timing; only the ink changes. -dark/-ultra-dark stay unmapped so the Bubbles Deep variant stays a deliberate selectable contrast, never an accident of the ground. */ :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--primary); --bdd2-hue-light: var(--primary-light); --bdd2-stroke: color-mix(in srgb, var(--black) 18%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--black) 12%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-ground: var(--bdd-scheme-surface, var(--primary-ultra-light)); } body.bdd-hue--blue :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--accent); --bdd2-hue-light: var(--accent-light); --bdd2-stroke: color-mix(in srgb, var(--black) 18%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--black) 12%, transparent); } body.bdd-hue--blue :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-ground: var(--bdd-scheme-surface, var(--accent-ultra-light)); } body.bdd-hue--orange :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--tertiary); --bdd2-hue-light: var(--tertiary-light); --bdd2-stroke: color-mix(in srgb, var(--black) 18%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--black) 12%, transparent); } body.bdd-hue--orange :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-ground: var(--bdd-scheme-surface, var(--tertiary-ultra-light)); } body.bdd-hue--yellow :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--secondary); --bdd2-hue-light: var(--secondary-light); --bdd2-stroke: color-mix(in srgb, var(--black) 18%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--black) 12%, transparent); } body.bdd-hue--yellow :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-ground: var(--bdd-scheme-surface, var(--secondary-ultra-light)); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-ground: var(--bdd-scheme-surface, var(--white)); --bdd2-hue: var(--neutral-semi-light); --bdd2-hue-light: var(--neutral-semi-light); --bdd2-hue-dark: var(--base); --bdd2-hue-ultra-dark: var(--neutral); --bdd2-pyramid-hue: var(--neutral-semi-light); --bdd2-pyramid-hue-light: var(--neutral-light); --bdd2-stroke: var(--black-trans-10, rgba(0, 0, 0, .1)); --bdd2-stroke-soft: var(--neutral-trans-10, rgba(20, 22, 24, .1)); } body:not(.bdd-hue--blue):not(.bdd-hue--orange):not(.bdd-hue--yellow):not(.bdd-hue--black):not(.bdd-hue--white) .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--primary); --bdd2-hue-light: var(--primary-light); --bdd2-hue-dark: var(--primary-dark); --bdd2-hue-ultra-dark: var(--primary-ultra-dark); --bdd2-pyramid-hue: var(--primary); --bdd2-pyramid-hue-light: var(--primary-light); } /* Magenta remains chromatic on Light Neutral, matching the other hue families. */ body.bdd-hue--white .bdd-scheme--dark-neutral > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-hue: var(--white); --bdd2-hue-light: var(--white); --bdd2-hue-dark: var(--neutral-light); --bdd2-hue-ultra-dark: var(--neutral); --bdd2-pyramid-hue: var(--white); --bdd2-pyramid-hue-light: var(--neutral-light); --bdd2-stroke: color-mix(in srgb, var(--white) 26%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--white) 14%, transparent); } /* light-ground exceptions: same artwork, light ink (no geometry/timing changes) */ .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__face { background: color-mix(in srgb, var(--bdd2-hue-light) 22%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__face { background: color-mix(in srgb, var(--bdd2-hue) 16%, transparent); } /* retain dimensionality without turning one face into a solid panel */ :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__dots, .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__dots { background-image: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 60%, transparent) .9px, transparent 1.3px); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc, .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc { mix-blend-mode: normal; } /* screen blend whites out on light grounds */ :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"]:not([data-bdd-fill="deep"]) .bdd-motif__disc, .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"]:not([data-bdd-fill="deep"]) .bdd-motif__disc { opacity: clamp(.1, calc(var(--bdd2-bubbles-light-opacity) * var(--bdd2-bubbles-intensity)), 1); background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--bdd2-hue) 82%, transparent), color-mix(in srgb, var(--bdd2-hue-light) 62%, transparent) 58%, transparent 76%); } /* dedicated Bubbles intensity changes discs without changing the chart axes */ :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob, .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob { opacity: calc(.4 * var(--bdd2-intensity)); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(2), .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(2) { background: color-mix(in srgb, var(--bdd2-hue) 60%, var(--white)); } /* legacy partner is --neutral: muddy on light */ /* host section: the v2 motif sits under everything else (v2-specific :has(), legacy host rule untouched) */ .brxe-section:has(> .bdd-motif-v2[data-bdd-engine="2"]) { position: relative; isolation: isolate; overflow: hidden; } .brxe-section:has(> .bdd-motif-v2[data-bdd-engine="2"]) > :not(.bdd-motif-v2):not(.bricks-background-video-wrapper) { position: relative; z-index: 1; } .brxe-section:has(> .bdd-motif-v2[data-bdd-engine="2"]) > .bricks-background-video-wrapper { z-index: -1; } /* ACSS offsets the first child below a transparent header. When that child is artwork, cancel the offset so the motif fills the header band; content spacing stays unchanged. */ #brx-content > .brxe-section:first-child:has(> .bdd-motif-v2[data-bdd-engine="2"]) > .bdd-motif-v2[data-bdd-engine="2"] { margin-block-start: 0; } /* Opening bdd-hero-106 motifs use two intentional ACSS-aware coordinate spaces: artwork stays centered in the visible hero frame, while the scrim follows the readable content center in the usable area below the transparent header. Do not offset parts. */ #brx-content > .bdd-hero-106:first-child:has(> .bdd-motif-v2[data-bdd-engine="2"]) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-scrim-y: calc(50% + var(--bdd-hero-content-shift, 0px)); } /* --- per-instance overrides: attribute step tables (the validation layer) --- */ /* data-bdd-speed */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="0.25"] { --bdd2-speed: 0.25; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="0.5"] { --bdd2-speed: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="0.75"] { --bdd2-speed: 0.75; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="1"] { --bdd2-speed: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="1.25"] { --bdd2-speed: 1.25; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="1.5"] { --bdd2-speed: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="1.75"] { --bdd2-speed: 1.75; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="2"] { --bdd2-speed: 2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="2.25"] { --bdd2-speed: 2.25; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="2.5"] { --bdd2-speed: 2.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="2.75"] { --bdd2-speed: 2.75; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-speed="3"] { --bdd2-speed: 3; } /* data-bdd-intensity */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.3"] { --bdd2-intensity: 0.3; --bdd2-opacity: 0.38; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.4"] { --bdd2-intensity: 0.4; --bdd2-opacity: 0.443; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.5"] { --bdd2-intensity: 0.5; --bdd2-opacity: 0.506; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.6"] { --bdd2-intensity: 0.6; --bdd2-opacity: 0.569; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.7"] { --bdd2-intensity: 0.7; --bdd2-opacity: 0.631; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.8"] { --bdd2-intensity: 0.8; --bdd2-opacity: 0.694; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="0.9"] { --bdd2-intensity: 0.9; --bdd2-opacity: 0.757; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1"] { --bdd2-intensity: 1; --bdd2-opacity: 0.82; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1.1"] { --bdd2-intensity: 1.1; --bdd2-opacity: 0.85; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1.2"] { --bdd2-intensity: 1.2; --bdd2-opacity: 0.88; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1.3"] { --bdd2-intensity: 1.3; --bdd2-opacity: 0.91; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1.4"] { --bdd2-intensity: 1.4; --bdd2-opacity: 0.94; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1.5"] { --bdd2-intensity: 1.5; --bdd2-opacity: 0.97; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-intensity="1.6"] { --bdd2-intensity: 1.6; --bdd2-opacity: 1; } /* data-bdd-glow-intensity */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0"] { --bdd2-glow-intensity: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.1"] { --bdd2-glow-intensity: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.2"] { --bdd2-glow-intensity: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.3"] { --bdd2-glow-intensity: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.4"] { --bdd2-glow-intensity: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.5"] { --bdd2-glow-intensity: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.6"] { --bdd2-glow-intensity: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.7"] { --bdd2-glow-intensity: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.8"] { --bdd2-glow-intensity: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="0.9"] { --bdd2-glow-intensity: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1"] { --bdd2-glow-intensity: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.1"] { --bdd2-glow-intensity: 1.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.2"] { --bdd2-glow-intensity: 1.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.3"] { --bdd2-glow-intensity: 1.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.4"] { --bdd2-glow-intensity: 1.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.5"] { --bdd2-glow-intensity: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.6"] { --bdd2-glow-intensity: 1.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.7"] { --bdd2-glow-intensity: 1.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.8"] { --bdd2-glow-intensity: 1.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="1.9"] { --bdd2-glow-intensity: 1.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-glow-intensity="2"] { --bdd2-glow-intensity: 2; } /* data-bdd-bubbles-intensity */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.3"] { --bdd2-bubbles-intensity: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.4"] { --bdd2-bubbles-intensity: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.5"] { --bdd2-bubbles-intensity: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.6"] { --bdd2-bubbles-intensity: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.7"] { --bdd2-bubbles-intensity: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.8"] { --bdd2-bubbles-intensity: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="0.9"] { --bdd2-bubbles-intensity: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1"] { --bdd2-bubbles-intensity: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1.1"] { --bdd2-bubbles-intensity: 1.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1.2"] { --bdd2-bubbles-intensity: 1.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1.3"] { --bdd2-bubbles-intensity: 1.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1.4"] { --bdd2-bubbles-intensity: 1.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1.5"] { --bdd2-bubbles-intensity: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-bubbles-intensity="1.6"] { --bdd2-bubbles-intensity: 1.6; } /* data-bdd-satellite-globe */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0"] { --bdd2-satellite-globe: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.1"] { --bdd2-satellite-globe: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.2"] { --bdd2-satellite-globe: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.3"] { --bdd2-satellite-globe: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.4"] { --bdd2-satellite-globe: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.5"] { --bdd2-satellite-globe: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.6"] { --bdd2-satellite-globe: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.7"] { --bdd2-satellite-globe: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.8"] { --bdd2-satellite-globe: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="0.9"] { --bdd2-satellite-globe: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1"] { --bdd2-satellite-globe: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.1"] { --bdd2-satellite-globe: 1.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.2"] { --bdd2-satellite-globe: 1.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.3"] { --bdd2-satellite-globe: 1.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.4"] { --bdd2-satellite-globe: 1.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.5"] { --bdd2-satellite-globe: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.6"] { --bdd2-satellite-globe: 1.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.7"] { --bdd2-satellite-globe: 1.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.8"] { --bdd2-satellite-globe: 1.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="1.9"] { --bdd2-satellite-globe: 1.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-globe="2"] { --bdd2-satellite-globe: 2; } /* data-bdd-satellite-lines */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0"] { --bdd2-satellite-lines: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.1"] { --bdd2-satellite-lines: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.2"] { --bdd2-satellite-lines: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.3"] { --bdd2-satellite-lines: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.4"] { --bdd2-satellite-lines: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.5"] { --bdd2-satellite-lines: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.6"] { --bdd2-satellite-lines: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.7"] { --bdd2-satellite-lines: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.8"] { --bdd2-satellite-lines: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="0.9"] { --bdd2-satellite-lines: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1"] { --bdd2-satellite-lines: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.1"] { --bdd2-satellite-lines: 1.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.2"] { --bdd2-satellite-lines: 1.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.3"] { --bdd2-satellite-lines: 1.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.4"] { --bdd2-satellite-lines: 1.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.5"] { --bdd2-satellite-lines: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.6"] { --bdd2-satellite-lines: 1.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.7"] { --bdd2-satellite-lines: 1.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.8"] { --bdd2-satellite-lines: 1.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="1.9"] { --bdd2-satellite-lines: 1.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-satellite-lines="2"] { --bdd2-satellite-lines: 2; } /* data-bdd-spaceman-glow */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0"] { --bdd2-spaceman-glow: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.1"] { --bdd2-spaceman-glow: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.2"] { --bdd2-spaceman-glow: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.3"] { --bdd2-spaceman-glow: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.4"] { --bdd2-spaceman-glow: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.5"] { --bdd2-spaceman-glow: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.6"] { --bdd2-spaceman-glow: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.7"] { --bdd2-spaceman-glow: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.8"] { --bdd2-spaceman-glow: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="0.9"] { --bdd2-spaceman-glow: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1"] { --bdd2-spaceman-glow: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.1"] { --bdd2-spaceman-glow: 1.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.2"] { --bdd2-spaceman-glow: 1.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.3"] { --bdd2-spaceman-glow: 1.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.4"] { --bdd2-spaceman-glow: 1.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.5"] { --bdd2-spaceman-glow: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.6"] { --bdd2-spaceman-glow: 1.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.7"] { --bdd2-spaceman-glow: 1.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.8"] { --bdd2-spaceman-glow: 1.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="1.9"] { --bdd2-spaceman-glow: 1.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-glow="2"] { --bdd2-spaceman-glow: 2; } /* data-bdd-spaceman-orbits */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0"] { --bdd2-spaceman-orbits: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.1"] { --bdd2-spaceman-orbits: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.2"] { --bdd2-spaceman-orbits: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.3"] { --bdd2-spaceman-orbits: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.4"] { --bdd2-spaceman-orbits: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.5"] { --bdd2-spaceman-orbits: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.6"] { --bdd2-spaceman-orbits: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.7"] { --bdd2-spaceman-orbits: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.8"] { --bdd2-spaceman-orbits: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="0.9"] { --bdd2-spaceman-orbits: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1"] { --bdd2-spaceman-orbits: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.1"] { --bdd2-spaceman-orbits: 1.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.2"] { --bdd2-spaceman-orbits: 1.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.3"] { --bdd2-spaceman-orbits: 1.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.4"] { --bdd2-spaceman-orbits: 1.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.5"] { --bdd2-spaceman-orbits: 1.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.6"] { --bdd2-spaceman-orbits: 1.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.7"] { --bdd2-spaceman-orbits: 1.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.8"] { --bdd2-spaceman-orbits: 1.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="1.9"] { --bdd2-spaceman-orbits: 1.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-spaceman-orbits="2"] { --bdd2-spaceman-orbits: 2; } /* data-bdd-scrim */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0"] { --bdd2-scrim: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.05"] { --bdd2-scrim: 0.05; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.1"] { --bdd2-scrim: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.15"] { --bdd2-scrim: 0.15; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.2"] { --bdd2-scrim: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.25"] { --bdd2-scrim: 0.25; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.3"] { --bdd2-scrim: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.35"] { --bdd2-scrim: 0.35; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.4"] { --bdd2-scrim: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.45"] { --bdd2-scrim: 0.45; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.5"] { --bdd2-scrim: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.55"] { --bdd2-scrim: 0.55; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.6"] { --bdd2-scrim: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.65"] { --bdd2-scrim: 0.65; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.7"] { --bdd2-scrim: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.75"] { --bdd2-scrim: 0.75; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.8"] { --bdd2-scrim: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.85"] { --bdd2-scrim: 0.85; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.9"] { --bdd2-scrim: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="0.95"] { --bdd2-scrim: 0.95; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-scrim="1"] { --bdd2-scrim: 1; } /* data-bdd-grain */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0"] { --bdd2-grain: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.005"] { --bdd2-grain: 0.005; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.01"] { --bdd2-grain: 0.01; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.015"] { --bdd2-grain: 0.015; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.02"] { --bdd2-grain: 0.02; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.025"] { --bdd2-grain: 0.025; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.03"] { --bdd2-grain: 0.03; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.035"] { --bdd2-grain: 0.035; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.04"] { --bdd2-grain: 0.04; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.045"] { --bdd2-grain: 0.045; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.05"] { --bdd2-grain: 0.05; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.055"] { --bdd2-grain: 0.055; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.06"] { --bdd2-grain: 0.06; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.065"] { --bdd2-grain: 0.065; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.07"] { --bdd2-grain: 0.07; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.075"] { --bdd2-grain: 0.075; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.08"] { --bdd2-grain: 0.08; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.085"] { --bdd2-grain: 0.085; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.09"] { --bdd2-grain: 0.09; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.095"] { --bdd2-grain: 0.095; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.1"] { --bdd2-grain: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.105"] { --bdd2-grain: 0.105; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.11"] { --bdd2-grain: 0.11; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.115"] { --bdd2-grain: 0.115; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.12"] { --bdd2-grain: 0.12; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.125"] { --bdd2-grain: 0.125; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.13"] { --bdd2-grain: 0.13; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.135"] { --bdd2-grain: 0.135; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.14"] { --bdd2-grain: 0.14; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.145"] { --bdd2-grain: 0.145; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-grain="0.15"] { --bdd2-grain: 0.15; } /* data-bdd-floor */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0"] { --bdd2-floor: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.05"] { --bdd2-floor: 0.05; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.1"] { --bdd2-floor: 0.1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.15"] { --bdd2-floor: 0.15; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.2"] { --bdd2-floor: 0.2; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.25"] { --bdd2-floor: 0.25; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.3"] { --bdd2-floor: 0.3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.35"] { --bdd2-floor: 0.35; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.4"] { --bdd2-floor: 0.4; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.45"] { --bdd2-floor: 0.45; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.5"] { --bdd2-floor: 0.5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.55"] { --bdd2-floor: 0.55; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.6"] { --bdd2-floor: 0.6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.65"] { --bdd2-floor: 0.65; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.7"] { --bdd2-floor: 0.7; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.75"] { --bdd2-floor: 0.75; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.8"] { --bdd2-floor: 0.8; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.85"] { --bdd2-floor: 0.85; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.9"] { --bdd2-floor: 0.9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="0.95"] { --bdd2-floor: 0.95; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-floor="1"] { --bdd2-floor: 1; } /* data-bdd-ripple */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="0.5"] { --bdd2-ripple-duration: calc(9s / 0.5); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="0.75"] { --bdd2-ripple-duration: calc(9s / 0.75); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="1"] { --bdd2-ripple-duration: calc(9s / 1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="1.25"] { --bdd2-ripple-duration: calc(9s / 1.25); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="1.5"] { --bdd2-ripple-duration: calc(9s / 1.5); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="1.75"] { --bdd2-ripple-duration: calc(9s / 1.75); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="2"] { --bdd2-ripple-duration: calc(9s / 2); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="2.25"] { --bdd2-ripple-duration: calc(9s / 2.25); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="2.5"] { --bdd2-ripple-duration: calc(9s / 2.5); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="2.75"] { --bdd2-ripple-duration: calc(9s / 2.75); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-ripple="3"] { --bdd2-ripple-duration: calc(9s / 3); } /* --- motifs (transformed from the legacy rules; visuals identical) --- */ /* 1. Thirds - rule-of-thirds hairlines + a breathing power point */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="thirds"] .bdd-motif__lines { inset: 0; background: linear-gradient(to right, transparent calc(33.333% - .5px), var(--bdd2-stroke) calc(33.333% - .5px), var(--bdd2-stroke) calc(33.333% + .5px), transparent calc(33.333% + .5px)), linear-gradient(to right, transparent calc(66.666% - .5px), var(--bdd2-stroke) calc(66.666% - .5px), var(--bdd2-stroke) calc(66.666% + .5px), transparent calc(66.666% + .5px)), linear-gradient(to bottom, transparent calc(33.333% - .5px), var(--bdd2-stroke) calc(33.333% - .5px), var(--bdd2-stroke) calc(33.333% + .5px), transparent calc(33.333% + .5px)), linear-gradient(to bottom, transparent calc(66.666% - .5px), var(--bdd2-stroke) calc(66.666% - .5px), var(--bdd2-stroke) calc(66.666% + .5px), transparent calc(66.666% + .5px)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="thirds"] .bdd-motif__point { left: 33.333%; top: 33.333%; width: 46vmin; height: 46vmin; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 38%, transparent) 0%, color-mix(in srgb, var(--bdd2-hue) 31%, transparent) 18%, color-mix(in srgb, var(--bdd2-hue) 19%, transparent) 36%, color-mix(in srgb, var(--bdd2-hue) 8%, transparent) 50%, color-mix(in srgb, var(--bdd2-hue) 2%, transparent) 58%, transparent 62%); animation: bdd2-breathe-big calc(18s / var(--bdd2-speed, 1)) ease-in-out infinite, bdd2-wander calc(46s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } /* Bill 2026-08-23: the glow grows, shrinks, and wanders a little in x and y. */ @keyframes bdd2-breathe-big { 0%, 100% { scale: .8; opacity: calc(.5 * var(--bdd2-glow-intensity)) } 50% { scale: 1.25; opacity: calc(.95 * var(--bdd2-glow-intensity)) } } @keyframes bdd2-wander { 0% { translate: -50% -50% } 25% { translate: -30% -66% } 50% { translate: -68% -38% } 75% { translate: -40% -24% } 100% { translate: -62% -60% } } /* Bill: wander more, left/right/up/down, inside the upper-left quadrant */ @keyframes bdd2-drift { from { transform: translate(-1.5%, -1%) } to { transform: translate(1.5%, 1%) } } @keyframes bdd2-breathe { 0%, 100% { transform: scale(.92); opacity: calc(.55 * var(--bdd2-glow-intensity)) } 50% { transform: scale(1.08); opacity: calc(.9 * var(--bdd2-glow-intensity)) } } /* 2. Golden - the Fibonacci 8-5-3-2-1-1 construction (Bill 2026-08-24: the canonical figure that TERMINATES in two equal unit squares - a pure-phi subdivision never ends, so wherever it stops the innermost pair reads as a mistake). viewBox 1300x800 = 13:8; all cells are true squares; the spiral's quarter-arcs end at the twins. Frame stays an SVG mask (stroke color rides the CSS variable). The spiral div's mask is the STATIC no-JS fallback; bdd2-golden.js progressively upgrades it to a real inline SVG path so the spiral genuinely DRAWS via stroke-dashoffset (the original approved animation - a mask cannot dash-animate, which is how the draw silently became a fade in the first conversion; never again without a case). */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__frame, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral { right: -6vmin; top: 50%; width: 110vmin; height: 68vmin; translate: 0 -50%; transform-origin: 61.5% 50%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: bdd2-turn calc(120s / var(--bdd2-speed, 1)) linear infinite, bdd2-golden-breathe calc(50s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-golden-drift calc(64s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__frame { background: var(--bdd2-stroke); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1300 800%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22%3E%3Crect x=%220%22 y=%220%22 width=%221300%22 height=%22800%22/%3E%3Cline x1=%22800%22 y1=%220%22 x2=%22800%22 y2=%22800%22/%3E%3Cline x1=%22800%22 y1=%22500%22 x2=%221300%22 y2=%22500%22/%3E%3Cline x1=%221000%22 y1=%22500%22 x2=%221000%22 y2=%22800%22/%3E%3Cline x1=%22800%22 y1=%22600%22 x2=%221000%22 y2=%22600%22/%3E%3Cline x1=%22900%22 y1=%22500%22 x2=%22900%22 y2=%22600%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1300 800%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22%3E%3Crect x=%220%22 y=%220%22 width=%221300%22 height=%22800%22/%3E%3Cline x1=%22800%22 y1=%220%22 x2=%22800%22 y2=%22800%22/%3E%3Cline x1=%22800%22 y1=%22500%22 x2=%221300%22 y2=%22500%22/%3E%3Cline x1=%221000%22 y1=%22500%22 x2=%221000%22 y2=%22800%22/%3E%3Cline x1=%22800%22 y1=%22600%22 x2=%221000%22 y2=%22600%22/%3E%3Cline x1=%22900%22 y1=%22500%22 x2=%22900%22 y2=%22600%22/%3E%3C/g%3E%3C/svg%3E"); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral { background: var(--bdd2-hue-light); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1300 800%22%3E%3Cpath fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.3%22 d=%22M 0 800 A 800 800 0 0 1 800 0 A 500 500 0 0 1 1300 500 A 300 300 0 0 1 1000 800 A 200 200 0 0 1 800 600 A 100 100 0 0 1 900 500 A 100 100 0 0 1 1000 600%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1300 800%22%3E%3Cpath fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.3%22 d=%22M 0 800 A 800 800 0 0 1 800 0 A 500 500 0 0 1 1300 500 A 300 300 0 0 1 1000 800 A 200 200 0 0 1 800 600 A 100 100 0 0 1 900 500 A 100 100 0 0 1 1000 600%22/%3E%3C/svg%3E"); animation: bdd2-turn calc(120s / var(--bdd2-speed, 1)) linear infinite, bdd2-golden-breathe calc(50s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-golden-drift calc(64s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-spiral calc(40s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } /* JS-upgraded spiral: real path, real draw. The div keeps position/rotation/breathe/ drift; the mask + fade go quiet and the inline path takes over. Total arc length (pi/2)(800+500+300+200+100+100) = 3141.6; draw runs half-in/half-out like the original prototype (dasharray 3142, offset 1571 -> 0, alternating). Reduced motion: the path's own dashoffset attribute is 0, so with animations off the spiral shows COMPLETE and static. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral.has-svg { background: none; -webkit-mask-image: none; mask-image: none; opacity: 1; animation: bdd2-turn calc(120s / var(--bdd2-speed, 1)) linear infinite, bdd2-golden-breathe calc(50s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-golden-drift calc(64s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral.has-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral.has-svg path { fill: none; stroke: var(--bdd2-hue-light); stroke-width: 2.3; vector-effect: non-scaling-stroke; stroke-dasharray: 3142; stroke-dashoffset: 0; animation: bdd2-spiral-draw calc(40s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } @keyframes bdd2-spiral-draw { from { stroke-dashoffset: 1571; opacity: .5 } to { stroke-dashoffset: 0; opacity: 1 } } @keyframes bdd2-turn { from { rotate: 0deg } to { rotate: 360deg } } @keyframes bdd2-spiral { from { opacity: .35 } to { opacity: .75 } } /* Bill 2026-08-23: rotation stays primary; a slow breath and a small drift behind it (kept small - the mask is rasterised once). */ @keyframes bdd2-golden-breathe { from { scale: .96 } to { scale: 1.06 } } @keyframes bdd2-golden-drift { 0% { translate: 0 -50% } 35% { translate: -3vmin calc(-50% - 2vmin) } 70% { translate: 2vmin calc(-50% + 2.5vmin) } 100% { translate: -1vmin calc(-50% - 1vmin) } } /* 3. Venn - three thin rings on their own slow orbits */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"] .bdd-motif__ring { width: 58vmin; height: 58vmin; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--bdd2-stroke); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bdd2-hue) 14%, transparent) 0%, transparent 70%); background-size: 140% 140%; background-position: 50% 50%; } /* Orbit on `translate`, undulation on `scale` (Bill 2026-08-23: "slowly undulate") - separate transform properties so the two animations never fight. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"] .bdd-motif__ring:nth-child(1) { animation: bdd2-orbit-a calc(60s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-undulate calc(28s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-fill-drift calc(38s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"] .bdd-motif__ring:nth-child(2) { animation: bdd2-orbit-b calc(74s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-undulate calc(34s / var(--bdd2-speed, 1)) ease-in-out calc(-11s / var(--bdd2-speed, 1)) infinite alternate, bdd2-fill-drift calc(50s / var(--bdd2-speed, 1)) ease-in-out calc(-17s / var(--bdd2-speed, 1)) infinite alternate; border-color: color-mix(in srgb, var(--bdd2-hue-light) 45%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"] .bdd-motif__ring:nth-child(3) { animation: bdd2-orbit-c calc(88s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-undulate calc(40s / var(--bdd2-speed, 1)) ease-in-out calc(-23s / var(--bdd2-speed, 1)) infinite alternate, bdd2-fill-drift calc(44s / var(--bdd2-speed, 1)) ease-in-out calc(-31s / var(--bdd2-speed, 1)) infinite alternate; } @keyframes bdd2-orbit-a { from { translate: -78% -62% } to { translate: -62% -52% } } @keyframes bdd2-orbit-b { from { translate: -22% -60% } to { translate: -40% -46% } } @keyframes bdd2-orbit-c { from { translate: -52% -30% } to { translate: -46% -40% } } @keyframes bdd2-undulate { from { scale: .96 } to { scale: 1.04 } } /* Bill 2026-08-23: the gradient inside each ring moves a little too (the fill is oversized and its position drifts - a 58vmin element, not full-bleed). */ @keyframes bdd2-fill-drift { from { background-position: 30% 35% } to { background-position: 70% 65% } } /* 4. Bubbles - quadrants + growth-share discs (Bill 2026-08-23: more transparent) */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__quad { inset: 12% 10%; width: auto; /* crosshairs only - Bill 2026-08-23 */ background: linear-gradient(to right, transparent calc(50% - .5px), var(--bdd2-stroke-soft) calc(50% - .5px), var(--bdd2-stroke-soft) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), var(--bdd2-stroke-soft) calc(50% - .5px), var(--bdd2-stroke-soft) calc(50% + .5px), transparent calc(50% + .5px)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc { border-radius: 50%; mix-blend-mode: screen; opacity: .7; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--bdd2-hue-light) 18%, transparent), color-mix(in srgb, var(--bdd2-hue) 12%, transparent) 55%, transparent 72%); animation: bdd2-bob calc(22s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(2) { left: 18%; top: 22%; width: 26vmin; height: 26vmin; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(3) { left: 58%; top: 18%; width: 14vmin; height: 14vmin; animation-duration: calc(26s / var(--bdd2-speed, 1)); animation-delay: calc(-6s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(4) { left: 68%; top: 48%; width: 34vmin; height: 34vmin; animation-duration: calc(30s / var(--bdd2-speed, 1)); animation-delay: calc(-12s / var(--bdd2-speed, 1)); opacity: .6; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(5) { left: 30%; top: 58%; width: 10vmin; height: 10vmin; animation-duration: calc(18s / var(--bdd2-speed, 1)); animation-delay: calc(-3s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(6) { left: 44%; top: 36%; width: 7vmin; height: 7vmin; animation-duration: calc(20s / var(--bdd2-speed, 1)); animation-delay: calc(-9s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(7) { left: 10%; top: 64%; width: 18vmin; height: 18vmin; animation-duration: calc(28s / var(--bdd2-speed, 1)); animation-delay: calc(-20s / var(--bdd2-speed, 1)); opacity: .55; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"][data-bdd-fill="deep"] .bdd-motif__disc { background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--bdd2-hue) 28%, transparent), color-mix(in srgb, var(--bdd2-hue-dark) 26%, transparent) 58%, transparent 72%); } /* Deep variant (Bill 2026-08-23): dark -> hue instead of light -> hue */ /* Chroma-true discs (Bill 2026-08-23: alpha over the ground grays the hue). Where relative color syntax is supported, the gradient lowers LIGHTNESS in oklch and keeps chroma; the alpha version above stays as the fallback. */ @supports (color: oklch(from red l c h)) { /* Palette-derived: the hue is the page's base token (--primary / --accent / --tertiary / --secondary); light and dark ends are that hue at fixed oklch lightness steps, so the relationship is identical per hue. Toned down 2026-08-23 (Bill: too saturated / luminous). */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc { opacity: .5; background: radial-gradient(circle at 35% 35%, oklch(from var(--bdd2-hue) .46 calc(c * .75) h), oklch(from var(--bdd2-hue) .26 calc(c * .8) h) 58%, transparent 72%); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"][data-bdd-fill="deep"] .bdd-motif__disc { opacity: .92; background: radial-gradient(circle at 35% 35%, var(--bdd2-hue-dark), color-mix(in oklch, var(--bdd2-hue-dark) 45%, var(--bdd2-hue-ultra-dark)) 45%, var(--bdd2-hue-ultra-dark) 66%, transparent 72%); } /* Deep = the palette's own dark -> ultra-dark tokens per hue; near-opaque so alpha never grays it (Bill 2026-08-23) */ } @keyframes bdd2-bob { from { transform: translate(0, 0) scale(.96) } to { transform: translate(3vmin, -2.5vmin) scale(1.04) } } /* 5. Contours v6 (Bill's reference: classic CSS sonar ripple, kept as STROKES). Two layers: - the static contour field breathes: each ring swells ~2% and swings back as the crest passes, ring k lagging k-1 by 0.5 s on a 9 s period; - the ripple itself: a drop every 9 s launches three stroked rings 0.9 s apart that expand from the centre across the field with water easing (fast, then slowing) and fade out; the drop finishes before the next. Rings animate width/height, not transform, so the 1px stroke is re-drawn crisp at every radius (no pixelation). */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour { left: 75%; top: 50%; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--bdd2-stroke); opacity: .18; animation: bdd2-contour-breathe calc(9s / var(--bdd2-speed, 1)) ease-in-out infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(1) { width: 10vmin; height: 10vmin; animation-delay: calc(0.0s / var(--bdd2-speed, 1)); --peak: 0.420; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(2) { width: 20vmin; height: 20vmin; animation-delay: calc(-0.5s / var(--bdd2-speed, 1)); --peak: 0.395; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(3) { width: 30vmin; height: 30vmin; animation-delay: calc(-1.0s / var(--bdd2-speed, 1)); --peak: 0.370; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(4) { width: 40vmin; height: 40vmin; animation-delay: calc(-1.5s / var(--bdd2-speed, 1)); --peak: 0.345; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(5) { width: 50vmin; height: 50vmin; animation-delay: calc(-2.0s / var(--bdd2-speed, 1)); --peak: 0.320; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(6) { width: 60vmin; height: 60vmin; animation-delay: calc(-2.5s / var(--bdd2-speed, 1)); --peak: 0.295; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(7) { width: 70vmin; height: 70vmin; animation-delay: calc(-3.0s / var(--bdd2-speed, 1)); --peak: 0.270; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(8) { width: 80vmin; height: 80vmin; animation-delay: calc(-3.5s / var(--bdd2-speed, 1)); --peak: 0.245; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(9) { width: 90vmin; height: 90vmin; animation-delay: calc(-4.0s / var(--bdd2-speed, 1)); --peak: 0.220; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour:nth-child(10) { width: 100vmin; height: 100vmin; animation-delay: calc(-4.5s / var(--bdd2-speed, 1)); --peak: 0.195; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__ripple { left: 75%; top: 50%; translate: -50% -50%; width: 2vmin; height: 2vmin; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bdd2-hue-light) 60%, transparent); opacity: 0; animation: bdd2-ripple-out var(--bdd2-ripple-duration) cubic-bezier(.16, .7, .3, 1) infinite; } /* irregular drops (Bill): each ring on its own period, so the pattern never repeats the same way */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__ripple:nth-of-type(11) { animation-duration: calc(var(--bdd2-ripple-duration) * 1.0); --grow: 104vmin; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__ripple:nth-of-type(12) { animation-duration: calc(var(--bdd2-ripple-duration) * 1.28); animation-delay: calc(var(--bdd2-ripple-duration) * -.37); --grow: 88vmin; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__ripple:nth-of-type(13) { animation-duration: calc(var(--bdd2-ripple-duration) * 1.52); animation-delay: calc(var(--bdd2-ripple-duration) * -.71); --grow: 112vmin; } @keyframes bdd2-ripple-out { 0% { width: 2vmin; height: 2vmin; opacity: 0 } 4% { opacity: .3 } 44% { opacity: 0 } 62% { width: var(--grow, 104vmin); height: var(--grow, 104vmin); opacity: 0 } 100% { width: var(--grow, 104vmin); height: var(--grow, 104vmin); opacity: 0 } } /* starts at .3 (was .6) and is gone by 44% while still expanding */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__glow { right: 8%; top: 50%; width: 50vmin; height: 50vmin; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 36%, transparent), transparent 65%); animation: bdd2-breathe calc(16s / var(--bdd2-speed, 1)) ease-in-out infinite; } /* 6. Ledger - fine grid, dots, and one highlight band reading down the rows */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__grid { inset: 0; background: repeating-linear-gradient(to bottom, var(--bdd2-stroke-soft) 0 1px, transparent 1px 5.6rem), repeating-linear-gradient(to right, var(--bdd2-stroke-soft) 0 1px, transparent 1px 12rem); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__dots { inset: 0; opacity: .6; background-image: radial-gradient(circle, color-mix(in srgb, var(--white) 35%, transparent) .9px, transparent 1.3px); background-size: 12rem 5.6rem; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__band { left: 0; right: 0; top: -6rem; height: 5.6rem; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--bdd2-hue) 28%, transparent) 40%, color-mix(in srgb, var(--bdd2-hue) 28%, transparent) 60%, transparent); animation: bdd2-sweep calc(14s / var(--bdd2-speed, 1)) linear infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__band-y { top: 0; bottom: 0; left: -12rem; width: 12rem; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bdd2-hue) 22%, transparent) 40%, color-mix(in srgb, var(--bdd2-hue) 22%, transparent) 60%, transparent); animation: bdd2-sweep-x calc(23s / var(--bdd2-speed, 1)) linear calc(-9s / var(--bdd2-speed, 1)) infinite; } /* Bill 2026-08-23: a y-axis scan as well; 23s vs 14s so they rarely meet */ @keyframes bdd2-sweep { from { transform: translateY(0) } to { transform: translateY(90vh) } } @keyframes bdd2-sweep-x { from { transform: translateX(0) } to { transform: translateX(calc(100vw + 12rem)) } } /* 7. Wash - two blurred hue blobs under the ground (the default) */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob { width: 70vmin; height: 70vmin; border-radius: 50%; filter: blur(70px); opacity: calc(.55 * var(--bdd2-intensity)); background: var(--bdd2-hue); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(1) { left: -10%; top: -20%; animation: bdd2-wash-a calc(30s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(2) { right: -15%; bottom: -30%; background: color-mix(in srgb, var(--bdd2-hue) 60%, var(--neutral)); animation: bdd2-wash-b calc(45s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob { opacity: calc(.22 * var(--bdd2-intensity)); } /* Bill 2026-08-23: "subtly, tastefully, fluidly moves" - the blobs morph (border-radius) and turn slowly while they drift; blur is unchanged. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(1) { animation: bdd2-wash-a calc(30s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-morph calc(42s / var(--bdd2-speed, 1)) ease-in-out infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(2) { animation: bdd2-wash-b calc(45s / var(--bdd2-speed, 1)) ease-in-out infinite alternate, bdd2-morph calc(56s / var(--bdd2-speed, 1)) ease-in-out calc(-20s / var(--bdd2-speed, 1)) infinite; } @keyframes bdd2-wash-a { from { translate: 0 0; scale: 1 } to { translate: 18vmin 10vmin; scale: 1.15 } } @keyframes bdd2-wash-b { from { translate: 0 0; scale: 1.1 } to { translate: -14vmin -12vmin; scale: .95 } } @keyframes bdd2-morph { 0%, 100% { border-radius: 50%; rotate: 0deg } 25% { border-radius: 62% 38% 46% 54% / 54% 42% 58% 46%; rotate: 12deg } 50% { border-radius: 44% 56% 60% 40% / 40% 58% 42% 60%; rotate: -8deg } 75% { border-radius: 58% 42% 38% 62% / 62% 46% 54% 38%; rotate: 16deg } } /* 10. Transformation - point of departure, point of arrival, a pulse on the path */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__from { left: 16%; top: 80%; width: 7vmin; height: 7vmin; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--bdd2-stroke); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__to { left: 84%; top: 80%; width: 7vmin; height: 7vmin; translate: -50% -50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bdd2-hue-light) 60%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 45%, transparent), transparent 70%); animation: bdd2-arrive calc(24s / var(--bdd2-speed, 1)) ease-in-out infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__path { left: 16%; top: 80%; width: 68%; height: 1px; transform-origin: left center; background: linear-gradient(to right, var(--bdd2-stroke), color-mix(in srgb, var(--bdd2-hue-light) 50%, transparent)); animation: bdd2-draw-path calc(24s / var(--bdd2-speed, 1)) ease-in-out infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__pulse { left: 16%; top: 80%; width: 1.8vmin; height: 1.8vmin; translate: -50% -50%; border-radius: 50%; background: var(--bdd2-hue-light); box-shadow: 0 0 2vmin color-mix(in srgb, var(--bdd2-hue) 60%, transparent); animation: bdd2-travel calc(24s / var(--bdd2-speed, 1)) ease-in-out infinite; } @keyframes bdd2-draw-path { 0% { scale: 0 1; opacity: 1 } 30% { scale: 1 1; opacity: 1 } 88% { scale: 1 1; opacity: 1 } 100% { scale: 1 1; opacity: 0 } } @keyframes bdd2-travel { 0%, 28% { left: 16%; opacity: 0 } 34% { opacity: var(--bdd2-glow-intensity) } 72% { left: 84%; opacity: var(--bdd2-glow-intensity) } 80%, 100% { left: 84%; opacity: 0 } } @keyframes bdd2-arrive { 0%, 70% { scale: 1; opacity: calc(.6 * var(--bdd2-glow-intensity)) } 78% { scale: 1.35; opacity: var(--bdd2-glow-intensity) } 100% { scale: 1; opacity: calc(.6 * var(--bdd2-glow-intensity)) } } /* 11. Arrows - a slow field of the house arrow (attachment 364, the only approved arrow) */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow { left: 0; background: var(--bdd2-stroke); opacity: 0; -webkit-mask: url("../assets/arrow-right-thin-full-acss.svg") center / contain no-repeat; mask: url("../assets/arrow-right-thin-full-acss.svg") center / contain no-repeat; animation: bdd2-glide calc(90s / var(--bdd2-speed, 1)) linear infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(1) { top: 10%; width: 16vmin; height: 11vmin; animation-duration: calc(90s / var(--bdd2-speed, 1)); animation-delay: calc(-20s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(2) { top: 26%; width: 26vmin; height: 18vmin; animation-duration: calc(70s / var(--bdd2-speed, 1)); animation-delay: calc(-50s / var(--bdd2-speed, 1)); background: color-mix(in srgb, var(--bdd2-hue-light) 30%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(3) { top: 44%; width: 10vmin; height: 7vmin; animation-duration: calc(120s / var(--bdd2-speed, 1)); animation-delay: calc(-5s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(4) { top: 58%; width: 20vmin; height: 14vmin; animation-duration: calc(80s / var(--bdd2-speed, 1)); animation-delay: calc(-65s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(5) { top: min(74%, calc(100% - 9.0vmin - 2vmin)); width: 13vmin; height: 9.0vmin; animation-duration: calc(105s / var(--bdd2-speed, 1)); animation-delay: calc(-35s / var(--bdd2-speed, 1)); background: color-mix(in srgb, var(--bdd2-hue-light) 30%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(6) { top: min(88%, calc(100% - 21.0vmin - 2vmin)); width: 30vmin; height: 21.0vmin; animation-duration: calc(60s / var(--bdd2-speed, 1)); animation-delay: calc(-12s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(7) { top: 18%; width: 8vmin; height: 5.6vmin; animation-duration: calc(130s / var(--bdd2-speed, 1)); animation-delay: calc(-80s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(8) { top: 36%; width: 14vmin; height: 10vmin; animation-duration: calc(95s / var(--bdd2-speed, 1)); animation-delay: calc(-28s / var(--bdd2-speed, 1)); background: color-mix(in srgb, var(--bdd2-hue-light) 30%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(9) { top: min(66%, calc(100% - 6.3vmin - 2vmin)); width: 9vmin; height: 6.3vmin; animation-duration: calc(115s / var(--bdd2-speed, 1)); animation-delay: calc(-98s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(10) { top: min(82%, calc(100% - 12.6vmin - 2vmin)); width: 18vmin; height: 12.6vmin; animation-duration: calc(75s / var(--bdd2-speed, 1)); animation-delay: calc(-44s / var(--bdd2-speed, 1)); } /* Hue flash (Bill 2026-08-23, replaces the halos): now and then one arrow on the rows above and below the copy fades into the page hue and back; two arrows on different periods so it never repeats on a beat. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(1) { animation-name: bdd2-glide, bdd2-hue-flash; animation-duration: calc(90s / var(--bdd2-speed, 1)), calc(29s / var(--bdd2-speed, 1)); animation-timing-function: linear, ease-in-out; animation-delay: calc(-20s / var(--bdd2-speed, 1)), calc(-7s / var(--bdd2-speed, 1)); animation-iteration-count: infinite, infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(6) { animation-name: bdd2-glide, bdd2-hue-flash; animation-duration: calc(60s / var(--bdd2-speed, 1)), calc(41s / var(--bdd2-speed, 1)); animation-timing-function: linear, ease-in-out; animation-delay: calc(-12s / var(--bdd2-speed, 1)), calc(-23s / var(--bdd2-speed, 1)); animation-iteration-count: infinite, infinite; } @keyframes bdd2-glide { 0% { translate: -32vmin 0; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { translate: calc(100vw + 4vmin) 0; opacity: 0 } } /* Grain (Bill 2026-08-23): an 8-bit hue gradient over near-black bands into rings; ~5% fractal noise dithers the steps. Only on the motifs with large soft gradients. Static tile, no filter at runtime. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="thirds"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--bdd2-grain, .055); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Play state LAST: the `animation` shorthands above reset play-state to running, so the pause has to win by order + specificity. */ /* 12. Aperture - six oversized geometric shutter blades clipped beneath a quiet double rim */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-iris { left: 75%; top: 50%; width: clamp(20rem, 46vmin, 50rem); aspect-ratio: 1; translate: -50% -50%; z-index: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-iris svg { display: block; width: 100%; height: 100%; overflow: visible; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-iris g { transform-origin: 50% 50%; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-blade { fill: color-mix(in srgb, var(--bdd2-hue) 15%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 24%, transparent); stroke-width: .36; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-blade:nth-of-type(even) { fill: color-mix(in srgb, var(--bdd2-hue) 12%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-ring { left: 75%; top: 50%; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--bdd2-stroke); z-index: 3; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-ring:nth-child(2) { width: clamp(20rem, 46vmin, 50rem); opacity: .5; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-ring:nth-child(3) { width: clamp(18rem, 44vmin, 48rem); opacity: .28; } /* 13. Satellites - spacious orbital relationships above a quiet globe horizon */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__satellite-scene { inset: 0; width: 100%; height: 100%; z-index: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__satellite-scene svg { display: block; width: 100%; height: 100%; overflow: hidden; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-globe-level { opacity: clamp(0, calc(.5 * var(--bdd2-satellite-globe)), 1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-lines-level { opacity: clamp(0, calc(.5 * var(--bdd2-satellite-lines)), 1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-globe { fill: color-mix(in srgb, var(--bdd2-hue) 8%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 48%, transparent); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-grid { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 20%, transparent); stroke-width: .7; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-network { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 36%, transparent); stroke-width: .8; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-orbit { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 44%, transparent); stroke-width: .8; stroke-dasharray: 3 9; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-orbit--secondary { opacity: .58; stroke-dasharray: 1 11; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-link { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 32%, transparent); stroke-width: .7; stroke-dasharray: 4 10; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-frame { fill: color-mix(in srgb, var(--bdd2-ground) 86%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 48%, transparent); stroke-width: .9; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-panel { fill: color-mix(in srgb, var(--bdd2-hue) 7%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 34%, transparent); stroke-width: .7; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-core { fill: color-mix(in srgb, var(--bdd2-hue) 50%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 64%, transparent); stroke-width: .8; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-node { fill: var(--bdd2-hue-light); opacity: .46; animation: bdd2-satellite-node-pulse calc(9s / var(--bdd2-speed, 1)) ease-in-out infinite; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-node:nth-child(2n) { animation-delay: calc(-3s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-node:nth-child(3n) { animation-delay: calc(-6s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-anchor { fill: color-mix(in srgb, var(--bdd2-hue-light) 72%, transparent); } @keyframes bdd2-satellite-node-pulse { 0%, 72%, 100% { opacity: .24 } 82% { opacity: .72 } 90% { opacity: .36 } } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__satellite-scene svg { width: 132%; translate: -12% 0; } } /* 14. Spaceman - an atmospheric outline discovered along a broad orbital path */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-scene { inset: 0; width: 100%; height: 100%; z-index: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-scene svg { display: block; width: 100%; height: 100%; overflow: hidden; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-orbit { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) min(100%, calc(31% * var(--bdd2-spaceman-orbits))), transparent); stroke-width: .75; stroke-dasharray: 2 13; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-orbit--secondary { opacity: .52; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-orbit--tertiary { opacity: .30; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-glow-level { opacity: var(--bdd2-spaceman-glow); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-glow { transform-origin: center; transform-box: fill-box; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-art { fill: color-mix(in srgb, var(--bdd2-hue-light) 76%, transparent); } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-scene svg { width: 128%; translate: -14% 0; } } /* 15. Rocket launch - a faceted directional craft departing along one event path */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-scene { inset: 0; width: 100%; height: 100%; z-index: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-scene svg { display: block; width: 100%; height: 100%; overflow: hidden; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-field { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 13%, transparent); stroke-width: .7; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-field--soft { opacity: .5; stroke-dasharray: 2 14; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-trail { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 70%, transparent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-trail-glow { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue) 30%, transparent); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-craft { fill: color-mix(in srgb, var(--bdd2-ground) 76%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 78%, transparent); stroke-width: 1.15; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-facet { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue) 48%, transparent); stroke-width: .8; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-node { fill: var(--bdd2-hue-light); } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-scene svg { width: 142%; translate: -22% 0; } } /* 16. City roadways - perspective paths and connected junctions */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadways-floor { position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--bdd2-stroke) 40%, transparent); opacity: var(--bdd2-floor); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-4100.0%22 y1=%22903.0%22 x2=%22473.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-3750.0%22 y1=%22903.0%22 x2=%22496.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-3400.0%22 y1=%22903.0%22 x2=%22520.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-3050.0%22 y1=%22903.0%22 x2=%22543.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2700.0%22 y1=%22903.0%22 x2=%22566.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2350.0%22 y1=%22903.0%22 x2=%22590.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2000.0%22 y1=%22903.0%22 x2=%22613.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1650.0%22 y1=%22903.0%22 x2=%22636.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1300.0%22 y1=%22903.0%22 x2=%22660.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-950.0%22 y1=%22903.0%22 x2=%22683.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-600.0%22 y1=%22903.0%22 x2=%22706.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-250.0%22 y1=%22903.0%22 x2=%22730.0%22 y2=%22413.0%22/%3E%3Cline x1=%22100.0%22 y1=%22903.0%22 x2=%22753.3%22 y2=%22413.0%22/%3E%3Cline x1=%22450.0%22 y1=%22903.0%22 x2=%22776.7%22 y2=%22413.0%22/%3E%3Cline x1=%22800.0%22 y1=%22903.0%22 x2=%22800.0%22 y2=%22413.0%22/%3E%3Cline x1=%221150.0%22 y1=%22903.0%22 x2=%22823.3%22 y2=%22413.0%22/%3E%3Cline x1=%221500.0%22 y1=%22903.0%22 x2=%22846.7%22 y2=%22413.0%22/%3E%3Cline x1=%221850.0%22 y1=%22903.0%22 x2=%22870.0%22 y2=%22413.0%22/%3E%3Cline x1=%222200.0%22 y1=%22903.0%22 x2=%22893.3%22 y2=%22413.0%22/%3E%3Cline x1=%222550.0%22 y1=%22903.0%22 x2=%22916.7%22 y2=%22413.0%22/%3E%3Cline x1=%222900.0%22 y1=%22903.0%22 x2=%22940.0%22 y2=%22413.0%22/%3E%3Cline x1=%223250.0%22 y1=%22903.0%22 x2=%22963.3%22 y2=%22413.0%22/%3E%3Cline x1=%223600.0%22 y1=%22903.0%22 x2=%22986.7%22 y2=%22413.0%22/%3E%3Cline x1=%223950.0%22 y1=%22903.0%22 x2=%221010.0%22 y2=%22413.0%22/%3E%3Cline x1=%224300.0%22 y1=%22903.0%22 x2=%221033.3%22 y2=%22413.0%22/%3E%3Cline x1=%224650.0%22 y1=%22903.0%22 x2=%221056.7%22 y2=%22413.0%22/%3E%3Cline x1=%225000.0%22 y1=%22903.0%22 x2=%221080.0%22 y2=%22413.0%22/%3E%3Cline x1=%225350.0%22 y1=%22903.0%22 x2=%221103.3%22 y2=%22413.0%22/%3E%3Cline x1=%225700.0%22 y1=%22903.0%22 x2=%221126.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-4100.0%22 y1=%22903.0%22 x2=%22473.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-3750.0%22 y1=%22903.0%22 x2=%22496.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-3400.0%22 y1=%22903.0%22 x2=%22520.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-3050.0%22 y1=%22903.0%22 x2=%22543.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2700.0%22 y1=%22903.0%22 x2=%22566.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2350.0%22 y1=%22903.0%22 x2=%22590.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2000.0%22 y1=%22903.0%22 x2=%22613.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1650.0%22 y1=%22903.0%22 x2=%22636.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1300.0%22 y1=%22903.0%22 x2=%22660.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-950.0%22 y1=%22903.0%22 x2=%22683.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-600.0%22 y1=%22903.0%22 x2=%22706.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-250.0%22 y1=%22903.0%22 x2=%22730.0%22 y2=%22413.0%22/%3E%3Cline x1=%22100.0%22 y1=%22903.0%22 x2=%22753.3%22 y2=%22413.0%22/%3E%3Cline x1=%22450.0%22 y1=%22903.0%22 x2=%22776.7%22 y2=%22413.0%22/%3E%3Cline x1=%22800.0%22 y1=%22903.0%22 x2=%22800.0%22 y2=%22413.0%22/%3E%3Cline x1=%221150.0%22 y1=%22903.0%22 x2=%22823.3%22 y2=%22413.0%22/%3E%3Cline x1=%221500.0%22 y1=%22903.0%22 x2=%22846.7%22 y2=%22413.0%22/%3E%3Cline x1=%221850.0%22 y1=%22903.0%22 x2=%22870.0%22 y2=%22413.0%22/%3E%3Cline x1=%222200.0%22 y1=%22903.0%22 x2=%22893.3%22 y2=%22413.0%22/%3E%3Cline x1=%222550.0%22 y1=%22903.0%22 x2=%22916.7%22 y2=%22413.0%22/%3E%3Cline x1=%222900.0%22 y1=%22903.0%22 x2=%22940.0%22 y2=%22413.0%22/%3E%3Cline x1=%223250.0%22 y1=%22903.0%22 x2=%22963.3%22 y2=%22413.0%22/%3E%3Cline x1=%223600.0%22 y1=%22903.0%22 x2=%22986.7%22 y2=%22413.0%22/%3E%3Cline x1=%223950.0%22 y1=%22903.0%22 x2=%221010.0%22 y2=%22413.0%22/%3E%3Cline x1=%224300.0%22 y1=%22903.0%22 x2=%221033.3%22 y2=%22413.0%22/%3E%3Cline x1=%224650.0%22 y1=%22903.0%22 x2=%221056.7%22 y2=%22413.0%22/%3E%3Cline x1=%225000.0%22 y1=%22903.0%22 x2=%221080.0%22 y2=%22413.0%22/%3E%3Cline x1=%225350.0%22 y1=%22903.0%22 x2=%221103.3%22 y2=%22413.0%22/%3E%3Cline x1=%225700.0%22 y1=%22903.0%22 x2=%221126.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadways-scene { inset: 0; width: 100%; height: 100%; z-index: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadways-scene svg { display: block; width: 100%; height: 100%; overflow: hidden; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-corridor { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue) 13%, transparent); stroke-width: 12; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-route { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 44%, transparent); stroke-width: .9; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-route--secondary { stroke: color-mix(in srgb, var(--bdd2-hue) 24%, transparent); stroke-dasharray: 2 12; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-junction-glow { fill: var(--bdd2-hue); opacity: .1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-junction-ring { fill: color-mix(in srgb, var(--bdd2-ground) 72%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 45%, transparent); stroke-width: .8; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-junction-core { fill: var(--bdd2-hue-light); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-ray-glow { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue) 40%, transparent); stroke-width: 12; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-ray-core { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 90%, transparent); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadways-scene svg { width: 138%; translate: -19% 0; } } /* 17. Hub and spoke - one shared center coordinating a balanced radial field */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-spoke-scene { inset: 0; width: 100%; height: 100%; z-index: 1; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-spoke-scene svg { display: block; width: 100%; height: 100%; overflow: hidden; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"][data-bdd-hub-side="left"] .bdd-motif__hub-field { transform: matrix(-1, 0, 0, 1, 1600, 0); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-connection { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 40%, transparent); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-glow { fill: var(--bdd2-hue); opacity: .11; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-ring { fill: color-mix(in srgb, var(--bdd2-ground) 74%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 74%, transparent); stroke-width: 1.3; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-ring--inner { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue) 52%, transparent); stroke-width: .9; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-core { fill: var(--bdd2-hue-light); opacity: .92; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-node-ring { fill: color-mix(in srgb, var(--bdd2-ground) 76%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue-light) 62%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-node-core { fill: var(--bdd2-hue-light); opacity: .78; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-signal-glow { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue) 42%, transparent); stroke-width: 12; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-signal-core { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 92%, transparent); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-signal-dot { fill: var(--bdd2-hue-light); } /* 18. Marimekko - proportional fields sharing the approved Depth perspective floor */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__marimekko-scene { top: 0; height: 100%; aspect-ratio: 16 / 9; left: 50%; --sx: -50%; animation: bdd2-scene-drift calc(46s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__marimekko-scene > * { position: absolute; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__floor { z-index: 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-4100.0%22 y1=%22903.0%22 x2=%22473.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-3750.0%22 y1=%22903.0%22 x2=%22496.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-3400.0%22 y1=%22903.0%22 x2=%22520.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-3050.0%22 y1=%22903.0%22 x2=%22543.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2700.0%22 y1=%22903.0%22 x2=%22566.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2350.0%22 y1=%22903.0%22 x2=%22590.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2000.0%22 y1=%22903.0%22 x2=%22613.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1650.0%22 y1=%22903.0%22 x2=%22636.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1300.0%22 y1=%22903.0%22 x2=%22660.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-950.0%22 y1=%22903.0%22 x2=%22683.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-600.0%22 y1=%22903.0%22 x2=%22706.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-250.0%22 y1=%22903.0%22 x2=%22730.0%22 y2=%22413.0%22/%3E%3Cline x1=%22100.0%22 y1=%22903.0%22 x2=%22753.3%22 y2=%22413.0%22/%3E%3Cline x1=%22450.0%22 y1=%22903.0%22 x2=%22776.7%22 y2=%22413.0%22/%3E%3Cline x1=%22800.0%22 y1=%22903.0%22 x2=%22800.0%22 y2=%22413.0%22/%3E%3Cline x1=%221150.0%22 y1=%22903.0%22 x2=%22823.3%22 y2=%22413.0%22/%3E%3Cline x1=%221500.0%22 y1=%22903.0%22 x2=%22846.7%22 y2=%22413.0%22/%3E%3Cline x1=%221850.0%22 y1=%22903.0%22 x2=%22870.0%22 y2=%22413.0%22/%3E%3Cline x1=%222200.0%22 y1=%22903.0%22 x2=%22893.3%22 y2=%22413.0%22/%3E%3Cline x1=%222550.0%22 y1=%22903.0%22 x2=%22916.7%22 y2=%22413.0%22/%3E%3Cline x1=%222900.0%22 y1=%22903.0%22 x2=%22940.0%22 y2=%22413.0%22/%3E%3Cline x1=%223250.0%22 y1=%22903.0%22 x2=%22963.3%22 y2=%22413.0%22/%3E%3Cline x1=%223600.0%22 y1=%22903.0%22 x2=%22986.7%22 y2=%22413.0%22/%3E%3Cline x1=%223950.0%22 y1=%22903.0%22 x2=%221010.0%22 y2=%22413.0%22/%3E%3Cline x1=%224300.0%22 y1=%22903.0%22 x2=%221033.3%22 y2=%22413.0%22/%3E%3Cline x1=%224650.0%22 y1=%22903.0%22 x2=%221056.7%22 y2=%22413.0%22/%3E%3Cline x1=%225000.0%22 y1=%22903.0%22 x2=%221080.0%22 y2=%22413.0%22/%3E%3Cline x1=%225350.0%22 y1=%22903.0%22 x2=%221103.3%22 y2=%22413.0%22/%3E%3Cline x1=%225700.0%22 y1=%22903.0%22 x2=%221126.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-4100.0%22 y1=%22903.0%22 x2=%22473.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-3750.0%22 y1=%22903.0%22 x2=%22496.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-3400.0%22 y1=%22903.0%22 x2=%22520.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-3050.0%22 y1=%22903.0%22 x2=%22543.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2700.0%22 y1=%22903.0%22 x2=%22566.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2350.0%22 y1=%22903.0%22 x2=%22590.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2000.0%22 y1=%22903.0%22 x2=%22613.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1650.0%22 y1=%22903.0%22 x2=%22636.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1300.0%22 y1=%22903.0%22 x2=%22660.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-950.0%22 y1=%22903.0%22 x2=%22683.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-600.0%22 y1=%22903.0%22 x2=%22706.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-250.0%22 y1=%22903.0%22 x2=%22730.0%22 y2=%22413.0%22/%3E%3Cline x1=%22100.0%22 y1=%22903.0%22 x2=%22753.3%22 y2=%22413.0%22/%3E%3Cline x1=%22450.0%22 y1=%22903.0%22 x2=%22776.7%22 y2=%22413.0%22/%3E%3Cline x1=%22800.0%22 y1=%22903.0%22 x2=%22800.0%22 y2=%22413.0%22/%3E%3Cline x1=%221150.0%22 y1=%22903.0%22 x2=%22823.3%22 y2=%22413.0%22/%3E%3Cline x1=%221500.0%22 y1=%22903.0%22 x2=%22846.7%22 y2=%22413.0%22/%3E%3Cline x1=%221850.0%22 y1=%22903.0%22 x2=%22870.0%22 y2=%22413.0%22/%3E%3Cline x1=%222200.0%22 y1=%22903.0%22 x2=%22893.3%22 y2=%22413.0%22/%3E%3Cline x1=%222550.0%22 y1=%22903.0%22 x2=%22916.7%22 y2=%22413.0%22/%3E%3Cline x1=%222900.0%22 y1=%22903.0%22 x2=%22940.0%22 y2=%22413.0%22/%3E%3Cline x1=%223250.0%22 y1=%22903.0%22 x2=%22963.3%22 y2=%22413.0%22/%3E%3Cline x1=%223600.0%22 y1=%22903.0%22 x2=%22986.7%22 y2=%22413.0%22/%3E%3Cline x1=%223950.0%22 y1=%22903.0%22 x2=%221010.0%22 y2=%22413.0%22/%3E%3Cline x1=%224300.0%22 y1=%22903.0%22 x2=%221033.3%22 y2=%22413.0%22/%3E%3Cline x1=%224650.0%22 y1=%22903.0%22 x2=%221056.7%22 y2=%22413.0%22/%3E%3Cline x1=%225000.0%22 y1=%22903.0%22 x2=%221080.0%22 y2=%22413.0%22/%3E%3Cline x1=%225350.0%22 y1=%22903.0%22 x2=%221103.3%22 y2=%22413.0%22/%3E%3Cline x1=%225700.0%22 y1=%22903.0%22 x2=%221126.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__marimekko-scene svg { inset: 0; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-cell { stroke: none; opacity: .18; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-cell--1 { fill: color-mix(in srgb, var(--bdd2-hue) 22%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-cell--2 { fill: color-mix(in srgb, var(--bdd2-hue-light) 26%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-cell--3 { fill: color-mix(in srgb, var(--bdd2-hue) 34%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-cell--4 { fill: color-mix(in srgb, var(--bdd2-hue-light) 42%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-top { fill: color-mix(in srgb, var(--bdd2-hue-light) 10%, var(--bdd2-ground)); stroke: color-mix(in srgb, var(--bdd2-hue-light) 32%, transparent); stroke-width: .75; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-side { fill: color-mix(in srgb, var(--black) 28%, var(--bdd2-ground)); stroke: color-mix(in srgb, var(--bdd2-hue-light) 26%, transparent); stroke-width: .75; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-frame { fill: none; stroke: color-mix(in srgb, var(--bdd2-hue-light) 44%, transparent); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-junction-glow { fill: var(--bdd2-hue); opacity: .08; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-glow-level { opacity: var(--bdd2-glow-intensity); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-junction { fill: var(--bdd2-hue-light); opacity: .56; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__mekko-chart:first-child { opacity: .85; } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] .bdd-motif__marimekko-scene { left: 62%; } } /* 19. Candlestick - change over time without literal chart furniture */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candlestick-scene { inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candlestick-scene svg { display: block; width: 100%; height: 100%; overflow: visible; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-wick { stroke: color-mix(in srgb, var(--bdd2-hue-light) 58%, transparent); stroke-width: 1.15; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-body { stroke: color-mix(in srgb, var(--bdd2-hue-light) 58%, transparent); stroke-width: .9; vector-effect: non-scaling-stroke; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-body--1 { fill: color-mix(in srgb, var(--bdd2-hue) 15%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-body--2 { fill: color-mix(in srgb, var(--bdd2-hue-light) 20%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-body--3 { fill: color-mix(in srgb, var(--bdd2-hue) 28%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-body--4 { fill: color-mix(in srgb, var(--bdd2-hue-light) 34%, transparent); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-glow { fill: var(--bdd2-hue); opacity: 0; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-glow-level { opacity: var(--bdd2-glow-intensity); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candle-node { fill: var(--bdd2-hue-light); opacity: .66; } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="candlestick"] .bdd-motif__candlestick-scene svg { width: 132%; translate: -16% 0; } } /* 8 + 9. Pyramids (v2): geometry is delivered as custom properties. Defaults below are the sitewide apex 100 / lean 100 scene; bdd-motifs-v2.js overrides the same properties on an instance when data-bdd-apex / data-bdd-lean differ from 100. No JS -> defaults render. */ .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__scene { top: 0; height: 100%; aspect-ratio: 16 / 9; } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__scene > * { position: absolute; } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__floor { left: -60%; width: 220%; max-width: none; top: 0; height: 100%; background: var(--bdd2-stroke); opacity: var(--bdd2-floor); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr > *, .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr::before { position: absolute; inset: 0; } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr::before { content: ''; background: var(--bdd2-ground, var(--neutral)); } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__frame { background: var(--bdd2-stroke); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__face { background: rgba(0, 0, 0, .38); } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__tier { opacity: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bdd2-pyramid-hue) 36%, transparent), color-mix(in srgb, var(--bdd2-pyramid-hue-light) 24%, transparent)); animation: bdd2-tier-rise calc(20s / var(--bdd2-speed, 1)) ease-in-out infinite; } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__tier:nth-child(1) { animation-delay: calc(0s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__tier:nth-child(2) { animation-delay: calc(-16s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__tier:nth-child(3) { animation-delay: calc(-12s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__tier:nth-child(4) { animation-delay: calc(-8s / var(--bdd2-speed, 1)); } .bdd-motif-v2[data-bdd-engine="2"] .bdd-motif__pyr .bdd-motif__tier:nth-child(5) { animation-delay: calc(-4s / var(--bdd2-speed, 1)); } @keyframes bdd2-tier-rise { 0%, 45% { opacity: 0 } 12% { opacity: var(--bdd2-tier-peak, .65) } 24% { opacity: var(--bdd2-tier-peak, .65) } 100% { opacity: 0 } } @keyframes bdd2-scene-drift { from { translate: var(--sx, 0) 0 } to { translate: calc(var(--sx, 0) + 1.2vmin) .4vmin } } @keyframes bdd2-usp-handoff { 0%, 30%, 100% { opacity: .6 } 37% { opacity: .08 } 46% { opacity: .6 } } /* maslow */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__scene { right: 0; animation: bdd2-scene-drift calc(40s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__floor { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-3332.0%22 y1=%22903.0%22 x2=%221241.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2982.0%22 y1=%22903.0%22 x2=%221264.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2632.0%22 y1=%22903.0%22 x2=%221288.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2282.0%22 y1=%22903.0%22 x2=%221311.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1932.0%22 y1=%22903.0%22 x2=%221334.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1582.0%22 y1=%22903.0%22 x2=%221358.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-1232.0%22 y1=%22903.0%22 x2=%221381.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-882.0%22 y1=%22903.0%22 x2=%221404.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-532.0%22 y1=%22903.0%22 x2=%221428.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-182.0%22 y1=%22903.0%22 x2=%221451.3%22 y2=%22413.0%22/%3E%3Cline x1=%22168.0%22 y1=%22903.0%22 x2=%221474.7%22 y2=%22413.0%22/%3E%3Cline x1=%22518.0%22 y1=%22903.0%22 x2=%221498.0%22 y2=%22413.0%22/%3E%3Cline x1=%22868.0%22 y1=%22903.0%22 x2=%221521.3%22 y2=%22413.0%22/%3E%3Cline x1=%221218.0%22 y1=%22903.0%22 x2=%221544.7%22 y2=%22413.0%22/%3E%3Cline x1=%221568.0%22 y1=%22903.0%22 x2=%221568.0%22 y2=%22413.0%22/%3E%3Cline x1=%221918.0%22 y1=%22903.0%22 x2=%221591.3%22 y2=%22413.0%22/%3E%3Cline x1=%222268.0%22 y1=%22903.0%22 x2=%221614.7%22 y2=%22413.0%22/%3E%3Cline x1=%222618.0%22 y1=%22903.0%22 x2=%221638.0%22 y2=%22413.0%22/%3E%3Cline x1=%222968.0%22 y1=%22903.0%22 x2=%221661.3%22 y2=%22413.0%22/%3E%3Cline x1=%223318.0%22 y1=%22903.0%22 x2=%221684.7%22 y2=%22413.0%22/%3E%3Cline x1=%223668.0%22 y1=%22903.0%22 x2=%221708.0%22 y2=%22413.0%22/%3E%3Cline x1=%224018.0%22 y1=%22903.0%22 x2=%221731.3%22 y2=%22413.0%22/%3E%3Cline x1=%224368.0%22 y1=%22903.0%22 x2=%221754.7%22 y2=%22413.0%22/%3E%3Cline x1=%224718.0%22 y1=%22903.0%22 x2=%221778.0%22 y2=%22413.0%22/%3E%3Cline x1=%225068.0%22 y1=%22903.0%22 x2=%221801.3%22 y2=%22413.0%22/%3E%3Cline x1=%225418.0%22 y1=%22903.0%22 x2=%221824.7%22 y2=%22413.0%22/%3E%3Cline x1=%225768.0%22 y1=%22903.0%22 x2=%221848.0%22 y2=%22413.0%22/%3E%3Cline x1=%226118.0%22 y1=%22903.0%22 x2=%221871.3%22 y2=%22413.0%22/%3E%3Cline x1=%226468.0%22 y1=%22903.0%22 x2=%221894.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-3332.0%22 y1=%22903.0%22 x2=%221241.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2982.0%22 y1=%22903.0%22 x2=%221264.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2632.0%22 y1=%22903.0%22 x2=%221288.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2282.0%22 y1=%22903.0%22 x2=%221311.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1932.0%22 y1=%22903.0%22 x2=%221334.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1582.0%22 y1=%22903.0%22 x2=%221358.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-1232.0%22 y1=%22903.0%22 x2=%221381.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-882.0%22 y1=%22903.0%22 x2=%221404.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-532.0%22 y1=%22903.0%22 x2=%221428.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-182.0%22 y1=%22903.0%22 x2=%221451.3%22 y2=%22413.0%22/%3E%3Cline x1=%22168.0%22 y1=%22903.0%22 x2=%221474.7%22 y2=%22413.0%22/%3E%3Cline x1=%22518.0%22 y1=%22903.0%22 x2=%221498.0%22 y2=%22413.0%22/%3E%3Cline x1=%22868.0%22 y1=%22903.0%22 x2=%221521.3%22 y2=%22413.0%22/%3E%3Cline x1=%221218.0%22 y1=%22903.0%22 x2=%221544.7%22 y2=%22413.0%22/%3E%3Cline x1=%221568.0%22 y1=%22903.0%22 x2=%221568.0%22 y2=%22413.0%22/%3E%3Cline x1=%221918.0%22 y1=%22903.0%22 x2=%221591.3%22 y2=%22413.0%22/%3E%3Cline x1=%222268.0%22 y1=%22903.0%22 x2=%221614.7%22 y2=%22413.0%22/%3E%3Cline x1=%222618.0%22 y1=%22903.0%22 x2=%221638.0%22 y2=%22413.0%22/%3E%3Cline x1=%222968.0%22 y1=%22903.0%22 x2=%221661.3%22 y2=%22413.0%22/%3E%3Cline x1=%223318.0%22 y1=%22903.0%22 x2=%221684.7%22 y2=%22413.0%22/%3E%3Cline x1=%223668.0%22 y1=%22903.0%22 x2=%221708.0%22 y2=%22413.0%22/%3E%3Cline x1=%224018.0%22 y1=%22903.0%22 x2=%221731.3%22 y2=%22413.0%22/%3E%3Cline x1=%224368.0%22 y1=%22903.0%22 x2=%221754.7%22 y2=%22413.0%22/%3E%3Cline x1=%224718.0%22 y1=%22903.0%22 x2=%221778.0%22 y2=%22413.0%22/%3E%3Cline x1=%225068.0%22 y1=%22903.0%22 x2=%221801.3%22 y2=%22413.0%22/%3E%3Cline x1=%225418.0%22 y1=%22903.0%22 x2=%221824.7%22 y2=%22413.0%22/%3E%3Cline x1=%225768.0%22 y1=%22903.0%22 x2=%221848.0%22 y2=%22413.0%22/%3E%3Cline x1=%226118.0%22 y1=%22903.0%22 x2=%221871.3%22 y2=%22413.0%22/%3E%3Cline x1=%226468.0%22 y1=%22903.0%22 x2=%221894.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr { left: var(--bdd2-maslow-p1-left); top: var(--bdd2-maslow-p1-top); width: var(--bdd2-maslow-p1-width); height: var(--bdd2-maslow-p1-height); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr::before { clip-path: var(--bdd2-maslow-p1-body); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__frame { -webkit-mask-image: var(--bdd2-maslow-p1-frame); mask-image: var(--bdd2-maslow-p1-frame); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__face { clip-path: var(--bdd2-maslow-p1-face); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__tier:nth-child(1) { clip-path: var(--bdd2-maslow-p1-tier1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__tier:nth-child(2) { clip-path: var(--bdd2-maslow-p1-tier2); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__tier:nth-child(3) { clip-path: var(--bdd2-maslow-p1-tier3); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__tier:nth-child(4) { clip-path: var(--bdd2-maslow-p1-tier4); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__pyr .bdd-motif__tier:nth-child(5) { clip-path: var(--bdd2-maslow-p1-tier5); } /* depth */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__scene { left: 50%; --sx: -50%; animation: bdd2-scene-drift calc(46s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__floor, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="floor"] .bdd-motif__floor { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-4100.0%22 y1=%22903.0%22 x2=%22473.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-3750.0%22 y1=%22903.0%22 x2=%22496.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-3400.0%22 y1=%22903.0%22 x2=%22520.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-3050.0%22 y1=%22903.0%22 x2=%22543.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2700.0%22 y1=%22903.0%22 x2=%22566.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2350.0%22 y1=%22903.0%22 x2=%22590.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2000.0%22 y1=%22903.0%22 x2=%22613.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1650.0%22 y1=%22903.0%22 x2=%22636.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1300.0%22 y1=%22903.0%22 x2=%22660.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-950.0%22 y1=%22903.0%22 x2=%22683.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-600.0%22 y1=%22903.0%22 x2=%22706.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-250.0%22 y1=%22903.0%22 x2=%22730.0%22 y2=%22413.0%22/%3E%3Cline x1=%22100.0%22 y1=%22903.0%22 x2=%22753.3%22 y2=%22413.0%22/%3E%3Cline x1=%22450.0%22 y1=%22903.0%22 x2=%22776.7%22 y2=%22413.0%22/%3E%3Cline x1=%22800.0%22 y1=%22903.0%22 x2=%22800.0%22 y2=%22413.0%22/%3E%3Cline x1=%221150.0%22 y1=%22903.0%22 x2=%22823.3%22 y2=%22413.0%22/%3E%3Cline x1=%221500.0%22 y1=%22903.0%22 x2=%22846.7%22 y2=%22413.0%22/%3E%3Cline x1=%221850.0%22 y1=%22903.0%22 x2=%22870.0%22 y2=%22413.0%22/%3E%3Cline x1=%222200.0%22 y1=%22903.0%22 x2=%22893.3%22 y2=%22413.0%22/%3E%3Cline x1=%222550.0%22 y1=%22903.0%22 x2=%22916.7%22 y2=%22413.0%22/%3E%3Cline x1=%222900.0%22 y1=%22903.0%22 x2=%22940.0%22 y2=%22413.0%22/%3E%3Cline x1=%223250.0%22 y1=%22903.0%22 x2=%22963.3%22 y2=%22413.0%22/%3E%3Cline x1=%223600.0%22 y1=%22903.0%22 x2=%22986.7%22 y2=%22413.0%22/%3E%3Cline x1=%223950.0%22 y1=%22903.0%22 x2=%221010.0%22 y2=%22413.0%22/%3E%3Cline x1=%224300.0%22 y1=%22903.0%22 x2=%221033.3%22 y2=%22413.0%22/%3E%3Cline x1=%224650.0%22 y1=%22903.0%22 x2=%221056.7%22 y2=%22413.0%22/%3E%3Cline x1=%225000.0%22 y1=%22903.0%22 x2=%221080.0%22 y2=%22413.0%22/%3E%3Cline x1=%225350.0%22 y1=%22903.0%22 x2=%221103.3%22 y2=%22413.0%22/%3E%3Cline x1=%225700.0%22 y1=%22903.0%22 x2=%221126.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-960 0 3520 900%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%22900%22%3E%3Cstop offset=%220.42%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.62%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%221.2%22%3E%3Cg stroke-opacity=%22.42%22%3E%3Cline x1=%22-960%22 y1=%22903.0%22 x2=%222560%22 y2=%22903.0%22/%3E%3Cline x1=%22-960%22 y1=%22798.0%22 x2=%222560%22 y2=%22798.0%22/%3E%3Cline x1=%22-960%22 y1=%22728.0%22 x2=%222560%22 y2=%22728.0%22/%3E%3Cline x1=%22-960%22 y1=%22678.0%22 x2=%222560%22 y2=%22678.0%22/%3E%3Cline x1=%22-960%22 y1=%22640.5%22 x2=%222560%22 y2=%22640.5%22/%3E%3Cline x1=%22-960%22 y1=%22611.3%22 x2=%222560%22 y2=%22611.3%22/%3E%3Cline x1=%22-960%22 y1=%22588.0%22 x2=%222560%22 y2=%22588.0%22/%3E%3Cline x1=%22-960%22 y1=%22568.9%22 x2=%222560%22 y2=%22568.9%22/%3E%3Cline x1=%22-960%22 y1=%22553.0%22 x2=%222560%22 y2=%22553.0%22/%3E%3Cline x1=%22-960%22 y1=%22539.5%22 x2=%222560%22 y2=%22539.5%22/%3E%3Cline x1=%22-960%22 y1=%22528.0%22 x2=%222560%22 y2=%22528.0%22/%3E%3Cline x1=%22-960%22 y1=%22518.0%22 x2=%222560%22 y2=%22518.0%22/%3E%3Cline x1=%22-960%22 y1=%22509.2%22 x2=%222560%22 y2=%22509.2%22/%3E%3Cline x1=%22-960%22 y1=%22501.5%22 x2=%222560%22 y2=%22501.5%22/%3E%3Cline x1=%22-960%22 y1=%22494.7%22 x2=%222560%22 y2=%22494.7%22/%3E%3Cline x1=%22-960%22 y1=%22488.5%22 x2=%222560%22 y2=%22488.5%22/%3E%3Cline x1=%22-960%22 y1=%22483.0%22 x2=%222560%22 y2=%22483.0%22/%3E%3Cline x1=%22-960%22 y1=%22478.0%22 x2=%222560%22 y2=%22478.0%22/%3E%3C/g%3E%3Cline x1=%22-4100.0%22 y1=%22903.0%22 x2=%22473.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-3750.0%22 y1=%22903.0%22 x2=%22496.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-3400.0%22 y1=%22903.0%22 x2=%22520.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-3050.0%22 y1=%22903.0%22 x2=%22543.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-2700.0%22 y1=%22903.0%22 x2=%22566.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-2350.0%22 y1=%22903.0%22 x2=%22590.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-2000.0%22 y1=%22903.0%22 x2=%22613.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-1650.0%22 y1=%22903.0%22 x2=%22636.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-1300.0%22 y1=%22903.0%22 x2=%22660.0%22 y2=%22413.0%22/%3E%3Cline x1=%22-950.0%22 y1=%22903.0%22 x2=%22683.3%22 y2=%22413.0%22/%3E%3Cline x1=%22-600.0%22 y1=%22903.0%22 x2=%22706.7%22 y2=%22413.0%22/%3E%3Cline x1=%22-250.0%22 y1=%22903.0%22 x2=%22730.0%22 y2=%22413.0%22/%3E%3Cline x1=%22100.0%22 y1=%22903.0%22 x2=%22753.3%22 y2=%22413.0%22/%3E%3Cline x1=%22450.0%22 y1=%22903.0%22 x2=%22776.7%22 y2=%22413.0%22/%3E%3Cline x1=%22800.0%22 y1=%22903.0%22 x2=%22800.0%22 y2=%22413.0%22/%3E%3Cline x1=%221150.0%22 y1=%22903.0%22 x2=%22823.3%22 y2=%22413.0%22/%3E%3Cline x1=%221500.0%22 y1=%22903.0%22 x2=%22846.7%22 y2=%22413.0%22/%3E%3Cline x1=%221850.0%22 y1=%22903.0%22 x2=%22870.0%22 y2=%22413.0%22/%3E%3Cline x1=%222200.0%22 y1=%22903.0%22 x2=%22893.3%22 y2=%22413.0%22/%3E%3Cline x1=%222550.0%22 y1=%22903.0%22 x2=%22916.7%22 y2=%22413.0%22/%3E%3Cline x1=%222900.0%22 y1=%22903.0%22 x2=%22940.0%22 y2=%22413.0%22/%3E%3Cline x1=%223250.0%22 y1=%22903.0%22 x2=%22963.3%22 y2=%22413.0%22/%3E%3Cline x1=%223600.0%22 y1=%22903.0%22 x2=%22986.7%22 y2=%22413.0%22/%3E%3Cline x1=%223950.0%22 y1=%22903.0%22 x2=%221010.0%22 y2=%22413.0%22/%3E%3Cline x1=%224300.0%22 y1=%22903.0%22 x2=%221033.3%22 y2=%22413.0%22/%3E%3Cline x1=%224650.0%22 y1=%22903.0%22 x2=%221056.7%22 y2=%22413.0%22/%3E%3Cline x1=%225000.0%22 y1=%22903.0%22 x2=%221080.0%22 y2=%22413.0%22/%3E%3Cline x1=%225350.0%22 y1=%22903.0%22 x2=%221103.3%22 y2=%22413.0%22/%3E%3Cline x1=%225700.0%22 y1=%22903.0%22 x2=%221126.7%22 y2=%22413.0%22/%3E%3C/g%3E%3C/svg%3E"); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) { left: var(--bdd2-depth-p1-left); top: var(--bdd2-depth-p1-top); width: var(--bdd2-depth-p1-width); height: var(--bdd2-depth-p1-height); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2)::before { clip-path: var(--bdd2-depth-p1-body); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__frame { -webkit-mask-image: var(--bdd2-depth-p1-frame); mask-image: var(--bdd2-depth-p1-frame); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__face { clip-path: var(--bdd2-depth-p1-face); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__tier:nth-child(1) { clip-path: var(--bdd2-depth-p1-tier1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__tier:nth-child(2) { clip-path: var(--bdd2-depth-p1-tier2); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__tier:nth-child(3) { clip-path: var(--bdd2-depth-p1-tier3); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__tier:nth-child(4) { clip-path: var(--bdd2-depth-p1-tier4); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) .bdd-motif__tier:nth-child(5) { clip-path: var(--bdd2-depth-p1-tier5); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) { left: var(--bdd2-depth-p2-left); top: var(--bdd2-depth-p2-top); width: var(--bdd2-depth-p2-width); height: var(--bdd2-depth-p2-height); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3)::before { clip-path: var(--bdd2-depth-p2-body); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__frame { -webkit-mask-image: var(--bdd2-depth-p2-frame); mask-image: var(--bdd2-depth-p2-frame); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__face { clip-path: var(--bdd2-depth-p2-face); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier:nth-child(1) { clip-path: var(--bdd2-depth-p2-tier1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier:nth-child(2) { clip-path: var(--bdd2-depth-p2-tier2); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier:nth-child(3) { clip-path: var(--bdd2-depth-p2-tier3); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier:nth-child(4) { clip-path: var(--bdd2-depth-p2-tier4); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier:nth-child(5) { clip-path: var(--bdd2-depth-p2-tier5); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) { opacity: .85; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier { animation: none; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(3) .bdd-motif__tier:nth-child(5) { opacity: .6; animation: bdd2-usp-handoff calc(20s / var(--bdd2-speed, 1)) ease-in-out infinite; } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__scene { right: -30%; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="depth"] .bdd-motif__scene { left: 62%; } } /* default geometry (apex 100 / lean 100) */ .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-maslow-p1-left: 45.50%; --bdd2-maslow-p1-top: 17.37%; --bdd2-maslow-p1-width: 40.00%; --bdd2-maslow-p1-height: 71.30%; --bdd2-maslow-p1-body: polygon(58.33% 0.00%, 0.00% 100.00%, 87.50% 100.00%, 100.00% 81.30%); --bdd2-maslow-p1-face: polygon(58.33% 0.00%, 87.50% 100.00%, 100.00% 81.30%); --bdd2-maslow-p1-frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%220.45%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22%3E%3Cpolyline points=%220.00,100.00 58.33,0.00 87.50,100.00%22/%3E%3Cline x1=%220.00%22 y1=%22100.00%22 x2=%2287.50%22 y2=%22100.00%22/%3E%3Cpolyline points=%2287.50,100.00 100.00,81.30 58.33,0.00%22/%3E%3Cpolyline points=%2213.46,76.92 80.77,76.92 92.65,66.95%22/%3E%3Cpolyline points=%2225.93,55.56 74.54,55.56 84.85,51.74%22/%3E%3Cpolyline points=%2237.50,35.71 68.75,35.71 76.56,35.57%22/%3E%3Cpolyline points=%2248.28,17.24 63.36,17.24 67.74,18.36%22/%3E%3C/g%3E%3C/svg%3E"); --bdd2-maslow-p1-tier1: polygon(13.46% 76.92%, 80.77% 76.92%, 92.65% 66.95%, 100.00% 81.30%, 87.50% 100.00%, 0.00% 100.00%); --bdd2-maslow-p1-tier2: polygon(25.93% 55.56%, 74.54% 55.56%, 84.85% 51.74%, 92.65% 66.95%, 80.77% 76.92%, 13.46% 76.92%); --bdd2-maslow-p1-tier3: polygon(37.50% 35.71%, 68.75% 35.71%, 76.56% 35.57%, 84.85% 51.74%, 74.54% 55.56%, 25.93% 55.56%); --bdd2-maslow-p1-tier4: polygon(48.28% 17.24%, 63.36% 17.24%, 67.74% 18.36%, 76.56% 35.57%, 68.75% 35.71%, 37.50% 35.71%); --bdd2-maslow-p1-tier5: polygon(58.33% 0.00%, 58.33% 0.00%, 58.33% 0.00%, 67.74% 18.36%, 63.36% 17.24%, 48.28% 17.24%); --bdd2-depth-p1-left: -22.92%; --bdd2-depth-p1-top: 27.56%; --bdd2-depth-p1-width: 40.10%; --bdd2-depth-p1-height: 53.33%; --bdd2-depth-p1-body: polygon(57.14% 0.00%, 0.00% 100.00%, 72.73% 100.00%, 100.00% 81.77%); --bdd2-depth-p1-face: polygon(57.14% 0.00%, 72.73% 100.00%, 100.00% 81.77%); --bdd2-depth-p1-frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%220.45%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22%3E%3Cpolyline points=%220.00,100.00 57.14,0.00 72.73,100.00%22/%3E%3Cline x1=%220.00%22 y1=%22100.00%22 x2=%2272.73%22 y2=%22100.00%22/%3E%3Cpolyline points=%2272.73,100.00 100.00,81.77 57.14,0.00%22/%3E%3Cpolyline points=%2212.90,77.42 69.21,77.42 92.31,67.09%22/%3E%3Cpolyline points=%2225.00,56.25 65.91,56.25 84.21,51.64%22/%3E%3Cpolyline points=%2236.36,36.36 62.81,36.36 75.68,35.36%22/%3E%3Cpolyline points=%2247.06,17.65 59.89,17.65 66.67,18.17%22/%3E%3C/g%3E%3C/svg%3E"); --bdd2-depth-p1-tier1: polygon(12.90% 77.42%, 69.21% 77.42%, 92.31% 67.09%, 100.00% 81.77%, 72.73% 100.00%, 0.00% 100.00%); --bdd2-depth-p1-tier2: polygon(25.00% 56.25%, 65.91% 56.25%, 84.21% 51.64%, 92.31% 67.09%, 69.21% 77.42%, 12.90% 77.42%); --bdd2-depth-p1-tier3: polygon(36.36% 36.36%, 62.81% 36.36%, 75.68% 35.36%, 84.21% 51.64%, 65.91% 56.25%, 25.00% 56.25%); --bdd2-depth-p1-tier4: polygon(47.06% 17.65%, 59.89% 17.65%, 66.67% 18.17%, 75.68% 35.36%, 62.81% 36.36%, 36.36% 36.36%); --bdd2-depth-p1-tier5: polygon(57.14% 0.00%, 57.14% 0.00%, 57.14% 0.00%, 66.67% 18.17%, 59.89% 17.65%, 47.06% 17.65%); --bdd2-depth-p2-left: 75.00%; --bdd2-depth-p2-top: 19.96%; --bdd2-depth-p2-width: 62.50%; --bdd2-depth-p2-height: 68.70%; --bdd2-depth-p2-body: polygon(41.67% 0.00%, 0.00% 80.59%, 16.00% 100.00%, 100.00% 100.00%); --bdd2-depth-p2-face: polygon(41.67% 0.00%, 0.00% 80.59%, 16.00% 100.00%); --bdd2-depth-p2-frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%220.45%22 stroke-linejoin=%22round%22 vector-effect=%22non-scaling-stroke%22%3E%3Cpolyline points=%2216.00,100.00 41.67,0.00 100.00,100.00%22/%3E%3Cline x1=%2216.00%22 y1=%22100.00%22 x2=%22100.00%22 y2=%22100.00%22/%3E%3Cpolyline points=%2216.00,100.00 0.00,80.59 41.67,0.00%22/%3E%3Cpolyline points=%227.35,66.37 21.92,76.92 86.54,76.92%22/%3E%3Cpolyline points=%2215.15,51.29 27.41,55.56 74.07,55.56%22/%3E%3Cpolyline points=%2223.44,35.26 32.50,35.71 62.50,35.71%22/%3E%3Cpolyline points=%2232.26,18.20 37.24,17.24 51.72,17.24%22/%3E%3C/g%3E%3C/svg%3E"); --bdd2-depth-p2-tier1: polygon(7.35% 66.37%, 21.92% 76.92%, 86.54% 76.92%, 100.00% 100.00%, 16.00% 100.00%, 0.00% 80.59%); --bdd2-depth-p2-tier2: polygon(15.15% 51.29%, 27.41% 55.56%, 74.07% 55.56%, 86.54% 76.92%, 21.92% 76.92%, 7.35% 66.37%); --bdd2-depth-p2-tier3: polygon(23.44% 35.26%, 32.50% 35.71%, 62.50% 35.71%, 74.07% 55.56%, 27.41% 55.56%, 15.15% 51.29%); --bdd2-depth-p2-tier4: polygon(32.26% 18.20%, 37.24% 17.24%, 51.72% 17.24%, 62.50% 35.71%, 32.50% 35.71%, 23.44% 35.26%); --bdd2-depth-p2-tier5: polygon(41.67% 0.00%, 41.67% 0.00%, 41.67% 0.00%, 51.72% 17.24%, 37.24% 17.24%, 32.26% 18.20%); } /* 20. Floor - the approved centered perspective field without foreground objects */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="floor"] .bdd-motif__scene { left: 50%; --sx: -50%; animation: bdd2-scene-drift calc(46s / var(--bdd2-speed, 1)) ease-in-out infinite alternate; } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="floor"] .bdd-motif__scene { left: 62%; } } /* --- perceived midpoint calibration (Bill review 2026-08-24) --- */ /* Intensity is applied once at the root. These variables calibrate each motif's midpoint; they do not create a second intensity curve. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="thirds"] .bdd-motif__point { background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) var(--bdd2-thirds-glow), transparent) 0%, color-mix(in srgb, var(--bdd2-hue) 31%, transparent) 18%, color-mix(in srgb, var(--bdd2-hue) 19%, transparent) 36%, color-mix(in srgb, var(--bdd2-hue) 8%, transparent) 50%, color-mix(in srgb, var(--bdd2-hue) 2%, transparent) 58%, transparent 62%); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"] .bdd-motif__ring { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bdd2-hue) clamp(0%, calc(var(--bdd2-venn-fill) * var(--bdd2-glow-intensity)), 100%), transparent) 0%, transparent 70%); background-size: 140% 140%; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__glow { background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) var(--bdd2-contours-glow), transparent), transparent 65%); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] :is(.bdd-motif__band, .bdd-motif__band-y) { opacity: var(--bdd2-glow-intensity); } @keyframes bdd2-contour-breathe { 0% { scale: 1; opacity: .18 } 22% { scale: 1.02; opacity: var(--peak, .4); border-color: color-mix(in srgb, var(--bdd2-contour-crest, var(--bdd2-hue-light)) 40%, transparent) } 48% { scale: .992; opacity: .2; border-color: var(--bdd2-stroke) } 70%, 100% { scale: 1; opacity: .18 } } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob, [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob { opacity: var(--bdd2-wash-opacity); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc { opacity: clamp(.1, calc(var(--bdd2-bubbles-light-opacity) * var(--bdd2-bubbles-intensity)), 1); } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"][data-bdd-fill="deep"] .bdd-motif__disc { opacity: clamp(.1, calc(var(--bdd2-bubbles-deep-opacity) * var(--bdd2-bubbles-intensity)), 1); } /* Dark-neutral + charcoal share the quiet neutral-ground balance. */ .bdd-scheme--dark-neutral > .bdd-motif-v2[data-bdd-engine="2"], [class*="bdd-scheme--charcoal-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-thirds-glow: 42%; --bdd2-contours-glow: 40%; --bdd2-wash-opacity: .48; --bdd2-bubbles-light-opacity: .45; --bdd2-bubbles-deep-opacity: .8; } /* Hue-dark grounds need slightly stronger hue glows but calmer bubbles. */ [class*="bdd-scheme--dark-"]:not(.bdd-scheme--dark-neutral) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-stroke: color-mix(in srgb, var(--white) 18%, transparent); --bdd2-thirds-glow: 43%; --bdd2-venn-fill: 17%; --bdd2-contours-glow: 40%; --bdd2-bubbles-light-opacity: .44; --bdd2-bubbles-deep-opacity: .76; } /* Hue grounds are already strong; keep the signed-off motifs and calm only Bubbles. */ [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-wash-opacity: .22; --bdd2-bubbles-light-opacity: .4; --bdd2-bubbles-deep-opacity: .56; } [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="maslow"] .bdd-motif__tier { background: linear-gradient(to top, color-mix(in srgb, var(--bdd2-pyramid-hue) 48%, transparent), color-mix(in srgb, var(--bdd2-pyramid-hue-light) 36%, transparent)); } /* Light-neutral uses neutral ink; Wash uses the selected hue. Both need a stronger midpoint than the old ultra-light treatment. */ .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-thirds-glow: 34%; --bdd2-venn-fill: 19%; --bdd2-contours-glow: 34%; --bdd2-wash-opacity: .55; --bdd2-bubbles-light-opacity: .62; --bdd2-bubbles-deep-opacity: .68; --bdd2-tier-peak: .78; } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-stroke: color-mix(in srgb, var(--black) 18%, transparent); --bdd2-stroke-soft: color-mix(in srgb, var(--black) 12%, transparent); --bdd2-thirds-glow: 27%; --bdd2-venn-fill: 17%; --bdd2-contours-glow: 42%; --bdd2-contour-crest: var(--bdd2-hue); --bdd2-wash-opacity: .6; --bdd2-bubbles-light-opacity: .64; --bdd2-bubbles-deep-opacity: .74; --bdd2-tier-peak: .82; } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="thirds"] .bdd-motif__point { background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 20%, transparent) 0%, color-mix(in srgb, var(--bdd2-hue) 16%, transparent) 18%, color-mix(in srgb, var(--bdd2-hue) 10%, transparent) 36%, color-mix(in srgb, var(--bdd2-hue) 4%, transparent) 50%, color-mix(in srgb, var(--bdd2-hue) 1%, transparent) 58%, transparent 62%); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__contour { border-color: color-mix(in srgb, var(--black) 16%, transparent); opacity: .24; animation-name: bdd2-contour-breathe-wash; } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"] .bdd-motif__ripple { border-color: color-mix(in srgb, var(--bdd2-hue) 48%, transparent); } @keyframes bdd2-contour-breathe-wash { 0% { scale: 1; opacity: .24 } 22% { scale: 1.02; opacity: calc(var(--peak, .4) + .18); border-color: color-mix(in srgb, var(--bdd2-hue) 52%, transparent) } 48% { scale: .992; opacity: .28; border-color: color-mix(in srgb, var(--black) 16%, transparent) } 70%, 100% { scale: 1; opacity: .24 } } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc { background: radial-gradient(circle at 35% 35%, var(--neutral-light), var(--neutral-semi-light) 58%, transparent 76%); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"][data-bdd-fill="deep"] .bdd-motif__disc { background: radial-gradient(circle at 35% 35%, var(--neutral-semi-light), color-mix(in srgb, var(--base) 38%, var(--neutral-semi-light)) 58%, transparent 76%); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc { background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--bdd2-hue) 68%, var(--white)), color-mix(in srgb, var(--bdd2-hue) 46%, var(--bdd2-hue-light)) 58%, transparent 76%); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"][data-bdd-fill="deep"] .bdd-motif__disc { background: radial-gradient(circle at 35% 35%, var(--bdd2-hue), color-mix(in srgb, var(--bdd2-hue) 54%, var(--bdd2-hue-light)) 58%, transparent 76%); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__dots { opacity: .68; background-image: radial-gradient(circle, color-mix(in srgb, var(--neutral-semi-light) 72%, transparent) .9px, transparent 1.3px); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="ledger"] .bdd-motif__dots { opacity: .68; background-image: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 38%, transparent) .9px, transparent 1.3px); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(2) { background: var(--neutral-light); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob:nth-child(2) { background: color-mix(in srgb, var(--bdd2-hue) 42%, var(--bdd2-hue-light)); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral:not(.has-svg) { background: var(--bdd2-hue); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="golden"] .bdd-motif__spiral.has-svg path { stroke: var(--bdd2-hue); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__to { border-color: color-mix(in srgb, var(--bdd2-hue) 72%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 58%, transparent), transparent 70%); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__pulse { background: var(--bdd2-hue); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__from { border-color: color-mix(in srgb, var(--black) 18%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__path { background: linear-gradient(to right, color-mix(in srgb, var(--black) 18%, transparent), color-mix(in srgb, var(--bdd2-hue) 50%, transparent)); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__to { border-color: color-mix(in srgb, var(--bdd2-hue) 62%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--bdd2-hue) 28%, transparent), transparent 70%); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="transformation"] .bdd-motif__pulse { background: var(--bdd2-hue); box-shadow: 0 0 .8vmin color-mix(in srgb, var(--bdd2-hue) 24%, transparent); } /* 2026-08-26 visibility calibration: Wash gets a useful midpoint without changing geometry or motion. */ :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-blade { fill: color-mix(in srgb, var(--bdd2-hue) 27%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue) 38%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"] .bdd-motif__aperture-blade:nth-of-type(even) { fill: color-mix(in srgb, var(--bdd2-hue) 22%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-globe { fill: color-mix(in srgb, var(--bdd2-hue) 14%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue) 72%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-grid { stroke: color-mix(in srgb, var(--bdd2-hue) 42%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-network { stroke: color-mix(in srgb, var(--bdd2-hue) 58%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-orbit { stroke: color-mix(in srgb, var(--bdd2-hue) 72%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-link { stroke: color-mix(in srgb, var(--bdd2-hue) 58%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-frame { stroke: color-mix(in srgb, var(--bdd2-hue) 78%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-panel { fill: color-mix(in srgb, var(--bdd2-hue) 18%, transparent); stroke: color-mix(in srgb, var(--bdd2-hue) 64%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="satellites"] .bdd-motif__sat-core { fill: color-mix(in srgb, var(--bdd2-hue) 72%, transparent); stroke: var(--bdd2-hue); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-art { fill: color-mix(in srgb, var(--bdd2-hue) 78%, var(--black)); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-orbit { stroke: color-mix(in srgb, var(--bdd2-hue) min(100%, calc(58% * var(--bdd2-spaceman-orbits))), transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-glow-level { opacity: clamp(0, calc(.5 * var(--bdd2-spaceman-glow)), 1); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-art { fill: color-mix(in srgb, var(--bdd2-hue-dark) 86%, transparent); } [class*="bdd-scheme--charcoal-"] > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-glow-level { opacity: clamp(0, calc(.82 * var(--bdd2-spaceman-glow)), 1); } [class*="bdd-scheme--ground-"] > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"] .bdd-motif__spaceman-glow-level { opacity: clamp(0, calc(.65 * var(--bdd2-spaceman-glow)), 1); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-field { stroke: color-mix(in srgb, var(--bdd2-hue) 32%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-trail { stroke: color-mix(in srgb, var(--bdd2-hue) 88%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="rocket"] .bdd-motif__rocket-craft { stroke: color-mix(in srgb, var(--bdd2-hue) 92%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-corridor { stroke: color-mix(in srgb, var(--bdd2-hue) 22%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="roadways"] .bdd-motif__roadway-route { stroke: color-mix(in srgb, var(--bdd2-hue) 64%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-connection { stroke: color-mix(in srgb, var(--bdd2-hue) 64%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-ring { stroke: color-mix(in srgb, var(--bdd2-hue) 84%, transparent); } :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="hub-spoke"] .bdd-motif__hub-node-ring { stroke: color-mix(in srgb, var(--bdd2-hue) 76%, transparent); } body :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="marimekko"] { --bdd2-stroke: var(--black-trans-10, rgba(0, 0, 0, .1)); } /* Marimekko was already balanced on Wash. */ .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"], :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"] { --bdd2-arrow-ink: color-mix(in srgb, var(--black) 16%, transparent); } .bdd-scheme--light-neutral > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow, :is([class*="bdd-scheme--wash-"], .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) > .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow { background: var(--bdd2-arrow-ink); } @keyframes bdd2-hue-flash { 0%, 62%, 100% { background-color: var(--bdd2-arrow-ink, var(--bdd2-stroke)) } 74% { background-color: color-mix(in srgb, var(--bdd2-hue) 92%, transparent) } 86% { background-color: var(--bdd2-arrow-ink, var(--bdd2-stroke)) } } /* Contours can originate on either side without changing its geometry or timing. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"][data-bdd-contours-side="left"] .bdd-motif__contour, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"][data-bdd-contours-side="left"] .bdd-motif__ripple { left: 25%; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"][data-bdd-contours-side="left"] .bdd-motif__glow { left: 8%; right: auto; } /* Aperture placement mirrors the complete assembly without changing scale or timing. */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"][data-bdd-aperture-side="left"] .bdd-motif__aperture-iris, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="aperture"][data-bdd-aperture-side="left"] .bdd-motif__aperture-ring { left: 25%; } /* --- density / fill --- */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(n+8) { display: none; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="sparse"] .bdd-motif__arrow:nth-child(n+5), .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="sparse"] .bdd-motif__disc:nth-child(n+5), .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="sparse"] .bdd-motif__contour:nth-child(2n), .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="sparse"] .bdd-motif__ripple:nth-of-type(n+13), .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="sparse"] .bdd-motif__band-y, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="sparse"][data-bdd-motif="depth"] .bdd-motif__pyr:nth-child(2) { display: none; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-density="dense"] .bdd-motif__arrow:nth-child(n+8) { display: block; } /* --- grain against banding (soft-gradient motifs only) --- */ .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="thirds"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="contours"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="venn"]::after, .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="spaceman"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--bdd2-grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E"); background-size: 160px 160px; } /* --- play state LAST (the animation shorthands above reset it); reduced motion; mobile; print --- */ .bdd-motif-v2[data-bdd-engine="2"]:not(.is-visible), .bdd-motif-v2[data-bdd-engine="2"]:not(.is-visible) * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .bdd-motif-v2[data-bdd-engine="2"], .bdd-motif-v2[data-bdd-engine="2"] * { animation: none !important; } } @media (max-width: 768px) { .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="bubbles"] .bdd-motif__disc:nth-child(n+6), .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="arrows"] .bdd-motif__arrow:nth-child(n+5) { display: none; } .bdd-motif-v2[data-bdd-engine="2"][data-bdd-motif="wash"] .bdd-motif__blob { filter: blur(36px); } } @media print { .bdd-motif-v2[data-bdd-engine="2"] { display: none !important; } }