/* ---- richer backgrounds on every page ---- */
:root { --amb1: rgba(45,190,175,.34); --amb2: rgba(109,179,255,.28); --amb3: rgba(242,184,75,.24); --amb4: rgba(167,139,250,.24); --glyph: rgba(15,118,110,.16); --band: rgba(45,190,175,.09); --band2: rgba(109,179,255,.10); --grid: rgba(19,28,43,.055); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --amb1: rgba(45,190,175,.26); --amb2: rgba(109,179,255,.20); --amb3: rgba(242,184,75,.12); --amb4: rgba(167,139,250,.22); --glyph: rgba(95,211,199,.2); --band: rgba(45,190,175,.10); --band2: rgba(109,179,255,.08); --grid: rgba(232,237,243,.05); } }
:root[data-theme='dark'] { --amb1: rgba(45,190,175,.26); --amb2: rgba(109,179,255,.20); --amb3: rgba(242,184,75,.12); --amb4: rgba(167,139,250,.22); --glyph: rgba(95,211,199,.2); --band: rgba(45,190,175,.10); --band2: rgba(109,179,255,.08); --grid: rgba(232,237,243,.05); }

.ambient { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 85%); mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 85%); }
.ambient i { display: none; }
.ambient-color { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ambient-color i { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; animation: drift 24s ease-in-out infinite alternate; }
.ambient-color i:nth-child(1) { width: 640px; height: 640px; background: var(--amb1); top: -80px; left: -160px; }
.ambient-color i:nth-child(2) { width: 560px; height: 560px; background: var(--amb2); top: 38%; right: -160px; animation-delay: -7s; }
.ambient-color i:nth-child(3) { width: 520px; height: 520px; background: var(--amb3); bottom: -160px; left: 28%; animation-delay: -13s; }
.ambient-color i:nth-child(4) { width: 440px; height: 440px; background: var(--amb4); top: 12%; left: 52%; animation-delay: -4s; }

/* floating money symbols, drifting at different speeds as you scroll */
.glyphs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glyphs span { position: absolute; font: 500 var(--s, 3rem) var(--display); color: var(--glyph); will-change: transform; animation: bob 9s ease-in-out infinite; }

/* waterfall art at the top of inner pages */
.pageart { position: absolute; right: max(2vw, calc((100vw - 1180px) / 2 - 20px)); top: 1.2rem; width: min(380px, 38vw); height: 300px; pointer-events: none; z-index: 0; opacity: .95; }
.pageart rect { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: grow .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes grow { to { transform: scaleX(1); } }
.pageart .coinfall { animation: fall 5s linear infinite; }
@keyframes fall { 0% { transform: translate(0,-10px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(0,300px); opacity: 0; } }
main > section:first-child { position: relative; isolation: isolate; }
main > section:first-child .wrap, main > section:first-child .narrow { position: relative; z-index: 1; }
@media (max-width: 900px) { .pageart { opacity: .35; width: 60vw; right: -8vw; } }

/* every other section gets its own wash so the page changes as you scroll */
main > section.block:not(.alt):not(.tint):not(.mesh):nth-of-type(odd) { background-image: radial-gradient(900px 340px at 0% 0%, var(--band), transparent 70%), radial-gradient(800px 320px at 100% 100%, var(--band2), transparent 70%); }
main > section.block:not(.alt):not(.tint):not(.mesh):nth-of-type(even) { background-image: radial-gradient(900px 340px at 100% 0%, var(--band2), transparent 70%), radial-gradient(800px 320px at 0% 100%, var(--band), transparent 70%); }
section.alt { background-image: linear-gradient(135deg, var(--band), transparent 45%, var(--band2)); }
.card.hover:hover, .card.glow:hover { border-color: var(--brand); }
footer { background-image: radial-gradient(900px 260px at 50% 0, rgba(45,190,175,.18), transparent 70%); }
.article { position: relative; }
.article::before { content: ''; position: absolute; left: -26px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--brand), #6db3ff 50%, transparent); border-radius: 3px; opacity: .55; }
@media (max-width: 900px) { .article::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .ambient-color i, .glyphs span, .pageart .coinfall { animation: none; } .pageart rect { animation: none; transform: none; } }
@media (max-width: 1150px) { .pageart { opacity: .4; } }

.was { line-height: 1.5; margin-bottom: .35rem; }
.plan ul { align-content: start; }

/* phones: decorations never push the page sideways, and wide tables scroll inside themselves */
main > section:first-child { overflow-x: clip; }
html, body { overflow-x: clip; }
.article table, .narrow > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .pageart { opacity: .22; } }