/*
 * AUTOOL Brand Decor 1.3.0 — background accents for empty areas.
 * Up to two absolutely positioned layers per host, behind the host's content (host isolates, layer
 * z-index -1): no layout shift, never an LCP candidate, no pointer events, hidden from assistive tech.
 * Motifs follow research/decor/RESEARCH.md (Airbus halftone, Vercel graph paper, Stripe trace + glow);
 * strength and motion follow artifacts/audit-1.3.0.md: accents, not features.
 */
.abdc-host { isolation: isolate; }
.abdc {
	--brand: #FEB511;
	--cc: color-mix(in srgb, var(--brand) 45%, #A3A8B0);
	--k: .5;
	--sc: 1;
	--dev: 1;
	--tone: 1;
	--th: 1;
	--rv: 1;
	position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
	opacity: calc(var(--k) * var(--sc) * var(--dev) * var(--tone) * var(--th) * var(--rv));
	transition: opacity .9s ease-out;
}
.abdc--k-medium { --k: .5; }
.abdc--k-light { --k: .35; }
.abdc--c-brand { --cc: var(--brand); }
.abdc--c-neutral { --cc: #A3A8B0; }
.abdc--light { --cc: #0B0B0C; --tone: .7; }
.abdc--none { display: none; }
.abdc--bleed { inset: -140px 0; }
.abdc > span, .abdc > svg { position: absolute; inset: 0; display: block; }

/* Where a cloud sits: soft ellipses, so the motif fades out before it reaches the text. */
.abdc--p-right { --mask: radial-gradient(ellipse 30% 46% at 84% 42%, #000 0%, transparent 72%), radial-gradient(ellipse 14% 26% at 68% 30%, #000 0%, transparent 72%); }
.abdc--p-left { --mask: radial-gradient(ellipse 30% 46% at 16% 42%, #000 0%, transparent 72%), radial-gradient(ellipse 14% 26% at 32% 30%, #000 0%, transparent 72%); }
.abdc--p-top-right { --mask: radial-gradient(ellipse 34% 62% at 84% 24%, #000 0%, transparent 72%); }
.abdc--p-head-right { --mask: radial-gradient(ellipse 24% 24% at 82% 22%, #000 0%, transparent 72%); }
.abdc--p-bottom-right { --mask: radial-gradient(ellipse 26% 30% at 80% 78%, #000 0%, transparent 72%); }
/* Centre is a halo: clear in the middle, where an empty-state message sits. */
.abdc--p-center { --mask: radial-gradient(ellipse 44% 58% at 50% 50%, transparent 26%, #000 46%, transparent 74%); }
.abdc--p-bottom { --mask: radial-gradient(ellipse 60% 32% at 50% 92%, #000 0%, transparent 72%); }
/* Auto: front.js measures the block and sets the empty rectangle (--ax/--ay centre, --aw/--ah radii,
 * --rx/--ry/--rw/--rh for the trace); the cloud fades out before the rectangle edge. */
.abdc--p-auto { --mask: radial-gradient(ellipse var(--aw, 30%) var(--ah, 40%) at var(--ax, 80%) var(--ay, 40%), #000 0%, #000 20%, transparent 80%); }
/* Through: spans the block and passes behind the text, so it is halved and vignetted on all sides. */
.abdc--p-through { --th: .5; --mask: radial-gradient(ellipse 62% 70% at 58% 50%, #000 0%, #000 30%, transparent 85%); }
.abdc__dots, .abdc__grid, .abdc__spot { -webkit-mask-image: var(--mask); mask-image: var(--mask); }

/* Patterns sit on an inner <i> one tile larger than the layer, so drift can move it with transform. */
.abdc__dots > i, .abdc__grid > i, .abdc__spot > i { position: absolute; inset: -48px 0 0 -48px; }

/* S1 halftone dot cloud — same dot as the home Join us band (brand-home front.css .abh-join). */
.abdc__dots > i, .abdc__spot > i { background-image: radial-gradient(color-mix(in srgb, var(--cc) 70%, transparent) 1px, transparent 1.6px); background-size: 9px 9px; }

/* S2 graph paper: 48 px major over 12 px minor. */
.abdc__grid > i {
	background-image:
		linear-gradient(color-mix(in srgb, var(--cc) 22%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--cc) 22%, transparent) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--cc) 9%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--cc) 9%, transparent) 1px, transparent 1px);
	background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
}

/* S3 ruler ticks along the bottom edge: 8 px minor, 64 px major. */
.abdc__ruler {
	top: auto !important; left: 50% !important; height: 12px;
	background:
		repeating-linear-gradient(90deg, var(--cc) 0 1px, transparent 1px 64px) right bottom / 100% 12px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cc) 70%, transparent) 0 1px, transparent 1px 8px) right bottom / 100% 5px no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 100%);
}
.abdc--p-left .abdc__ruler { left: 0 !important; right: 50% !important; -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 100%); mask-image: linear-gradient(270deg, transparent 0%, #000 100%); }
.abdc--p-center .abdc__ruler, .abdc--p-bottom .abdc__ruler { left: 20% !important; right: 20% !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }

/* S4 oscilloscope trace (inline SVG). Fixed positions first; auto and through use measured variables. */
.abdc__wave { opacity: .8; color: var(--cc); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 88%, transparent 100%); }
.abdc--p-right .abdc__wave, .abdc--p-top-right .abdc__wave { left: 42% !important; }
.abdc--p-top-right .abdc__wave, .abdc--p-head-right .abdc__wave { top: 8% !important; bottom: 46% !important; }
.abdc--p-head-right .abdc__wave, .abdc--p-bottom-right .abdc__wave { left: 56% !important; }
.abdc--p-bottom-right .abdc__wave { top: 56% !important; bottom: 8% !important; }
.abdc--p-right .abdc__wave { top: 24% !important; bottom: 24% !important; }
.abdc--p-left .abdc__wave { right: 42% !important; top: 24% !important; bottom: 24% !important; }
.abdc--p-center .abdc__wave { left: 15% !important; right: 15% !important; top: 30% !important; bottom: 30% !important; }
.abdc--p-bottom .abdc__wave { top: 62% !important; bottom: 6% !important; }
:is(.abdc--p-auto, .abdc--p-through) .abdc__wave { left: var(--rx) !important; top: var(--ry) !important; width: var(--rw); height: var(--rh); right: auto !important; bottom: auto !important; }
.abdc--p-auto .abdc__wave { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 85%, transparent 100%); }
.abdc--p-through .abdc__wave { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); }
.abdc--nowave .abdc__wave { display: none; }
.abdc__scan { opacity: 0; }

/* S8 glow: plain radial gradient, no blur filter. */
.abdc__glow { background: radial-gradient(ellipse 42% 80% at 80% 30%, color-mix(in srgb, var(--cc) 16%, transparent), transparent 70%); }
.abdc--p-left .abdc__glow { background: radial-gradient(ellipse 42% 80% at 20% 40%, color-mix(in srgb, var(--cc) 16%, transparent), transparent 70%); }
.abdc--p-center .abdc__glow, .abdc--p-bottom .abdc__glow { background: radial-gradient(ellipse 50% 70% at 50% 60%, color-mix(in srgb, var(--cc) 14%, transparent), transparent 70%); }
:is(.abdc--p-auto, .abdc--p-through) .abdc__glow { background: radial-gradient(ellipse var(--aw, 40%) var(--ah, 60%) at var(--ax, 80%) var(--ay, 40%), color-mix(in srgb, var(--cc) 16%, transparent), transparent 75%); }

/* Pointer spotlight (motion "interactive"): brighter dots under the pointer, inside the same mask. */
.abdc__spot { opacity: 0; transition: opacity .4s; -webkit-mask-image: radial-gradient(circle 120px at var(--px, -999px) var(--py, -999px), #000 0%, transparent 100%); mask-image: radial-gradient(circle 120px at var(--px, -999px) var(--py, -999px), #000 0%, transparent 100%); }
.abdc__spot > i { background-image: radial-gradient(var(--cc) 1.1px, transparent 1.7px); }
.abdc.is-hover .abdc__spot { opacity: 1; }

/*
 * Motion (global setting "subtle" / "interactive", not for rules marked still). Only transform,
 * opacity and stroke-dashoffset animate; .is-in is set while the layer is on screen, so nothing runs
 * off screen; prefers-reduced-motion stops all of it below.
 */
.abdc--anim:not(.is-seen) { --rv: 0; }
.abdc--anim.is-in .abdc__dots > i { animation: abdc-drift-9 16s linear infinite; }
.abdc--anim.is-in .abdc__grid > i { animation: abdc-drift-48 40s linear infinite; }
.abdc--anim.is-in .abdc__glow { animation: abdc-breathe 9s ease-in-out infinite alternate; }
.abdc--anim.is-in .abdc__scan { opacity: 1; animation: abdc-scan 7s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes abdc-drift-9 { to { transform: translate3d(18px, 18px, 0); } }
@keyframes abdc-drift-48 { to { transform: translate3d(48px, 48px, 0); } }
@keyframes abdc-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes abdc-scan { 0% { stroke-dashoffset: 1000; } 70%, 100% { stroke-dashoffset: -80; } }

/* Devices: phone < 768, tablet 768–1023, desktop ≥ 1024 (the brand plugins' breakpoints). */
@media (max-width: 767px) {
	.abdc { --dev: .85; }
	.abdc--no-m { display: none; }
	.abdc--bleed { inset: -96px 0; }
	/* Fixed positions: phone blocks stack text full width, so the trace would run under it. Auto measures instead. */
	.abdc:is(.abdc--p-right, .abdc--p-left, .abdc--p-top-right, .abdc--p-head-right, .abdc--p-bottom-right, .abdc--p-center, .abdc--p-bottom) .abdc__wave { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.abdc--no-t { display: none; }
	/* Tablet headings run past 42 %: start the trace over the button column instead. */
	.abdc--p-top-right .abdc__wave, .abdc--p-right .abdc__wave { left: 56% !important; }
}
@media (min-width: 1024px) {
	.abdc--no-d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.abdc { transition: none; --rv: 1 !important; }
	.abdc *, .abdc > * > i { animation: none !important; }
	.abdc__scan, .abdc__spot { display: none; }
}
@media (forced-colors: active) {
	.abdc { display: none; }
}
@media print {
	.abdc { display: none; }
}

/* Placement check for editors (?abdc_outline=1). */
.abdc-outline { outline: 1px dashed #FEB511; outline-offset: -1px; }
.abdc-outline::after { content: attr(data-abdc); position: absolute; top: 0; right: 0; z-index: 5; padding: 2px 6px; background: #FEB511; color: #000; font: 600 11px/1.4 monospace; }