/* ambient.css — shared moving-background system for clydedieto.com (v2, 2026-06-15)
   Pure CSS/SVG, no JavaScript, no external requests. One <div class="bgfx">
   per page sits behind all content (z-index:-1) and carries a page-themed
   motif. Fully frozen under prefers-reduced-motion. Brand colors hardcoded
   so this works regardless of each page's own token names. */

.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0a0b10}
.bgfx>*{position:absolute}

/* drifting grid (texture) */
.bgfx::before{content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(45,212,191,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.07) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 100% 85% at 50% 0%,#000 25%,transparent 85%);
  mask-image:radial-gradient(ellipse 100% 85% at 50% 0%,#000 25%,transparent 85%);
  opacity:.6;animation:fx-gridpan 26s linear infinite}

/* drifting brand orbs (ambient base on every page) */
.bgfx .orb{border-radius:50%;filter:blur(70px);will-change:transform,opacity}
.bgfx .o1{width:48vw;height:48vw;left:-10vw;top:-13vh;opacity:.42;background:radial-gradient(circle at 35% 35%,rgba(45,212,191,.95),transparent 70%);animation:fx-drift1 20s ease-in-out infinite alternate}
.bgfx .o2{width:42vw;height:42vw;right:-12vw;top:4vh;opacity:.36;background:radial-gradient(circle at 65% 35%,rgba(34,211,238,.9),transparent 70%);animation:fx-drift2 24s ease-in-out infinite alternate}
.bgfx .o3{width:54vw;height:54vw;left:14vw;bottom:-28vh;opacity:.34;background:radial-gradient(circle at 50% 50%,rgba(167,139,250,.88),transparent 70%);animation:fx-drift3 28s ease-in-out infinite alternate}
@keyframes fx-drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(13vw,11vh,0) scale(1.12)}}
@keyframes fx-drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-12vw,14vh,0) scale(1.15)}}
@keyframes fx-drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(11vw,-13vh,0) scale(1.1)}}
@keyframes fx-gridpan{from{background-position:0 0,0 0}to{background-position:58px 58px,58px 58px}}
@media(max-width:640px){.bgfx .orb{filter:blur(46px)}}

/* ---- motif: ER heartbeat / ECG (ai-for-er-nurses) ---- */
.bgfx .ecg{left:0;right:0;top:44%;width:100%;height:180px;opacity:.85}
.bgfx .ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bgfx .ecg-base{stroke:rgba(45,212,191,.2);stroke-width:1.8}
.bgfx .ecg-pulse{stroke:#6ff0de;stroke-width:3;stroke-dasharray:120 880;stroke-dashoffset:1000;filter:drop-shadow(0 0 9px rgba(45,212,191,1));animation:fx-ecg 2.4s linear infinite}
@keyframes fx-ecg{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}

/* ---- motif: document scan beam (resumes / nursing / checklist) ---- */
.bgfx .scan{inset:0}
.bgfx .scan::before{content:"";position:absolute;left:9%;right:9%;top:14%;bottom:14%;
  background:repeating-linear-gradient(to bottom,rgba(45,212,191,.06) 0 2px,transparent 2px 26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);opacity:.35}
.bgfx .scan::after{content:"";position:absolute;left:5%;right:5%;height:16%;top:-16%;
  background:linear-gradient(to bottom,transparent,rgba(45,212,191,.08),transparent);
  box-shadow:0 0 45px rgba(45,212,191,.12);animation:fx-scan 12s ease-in-out infinite}
@keyframes fx-scan{0%{top:-16%}50%{top:100%}100%{top:-16%}}

/* ---- motif: network nodes (ventures / consulting) ---- */
.bgfx .net{inset:0;width:100%;height:100%;opacity:.65;animation:fx-netdrift 30s ease-in-out infinite alternate}
.bgfx .net line{stroke:rgba(34,211,238,.28);stroke-width:1.2;stroke-dasharray:5 9;animation:fx-flow 2.6s linear infinite}
.bgfx .net circle{fill:#6ff0de;filter:drop-shadow(0 0 6px rgba(45,212,191,.95))}
.bgfx .net .n{animation:fx-twinkle 3.4s ease-in-out infinite}
.bgfx .net .n:nth-of-type(odd){animation-duration:4.6s}
.bgfx .net .n:nth-of-type(3n){animation-delay:-1.8s}
@keyframes fx-flow{to{stroke-dashoffset:-140}}
@keyframes fx-netdrift{from{transform:translate3d(-1.5vw,-1vh,0)}to{transform:translate3d(1.5vw,1vh,0)}}
@keyframes fx-twinkle{0%,100%{opacity:.3}50%{opacity:1}}

/* ---- motif: drifting pages (publishing) ---- */
.bgfx .pg{width:120px;height:160px;border:1px solid rgba(45,212,191,.24);border-radius:6px;background:linear-gradient(160deg,rgba(45,212,191,.09),transparent);box-shadow:0 0 34px rgba(45,212,191,.09);will-change:transform}
.bgfx .pg1{left:13%;top:18%;animation:fx-float1 13s ease-in-out infinite alternate}
.bgfx .pg2{right:14%;top:26%;animation:fx-float2 16s ease-in-out infinite alternate}
.bgfx .pg3{left:31%;bottom:12%;animation:fx-float3 19s ease-in-out infinite alternate}
@keyframes fx-float1{from{transform:translate3d(0,0,0) rotate(-8deg)}to{transform:translate3d(5vw,-6vh,0) rotate(7deg)}}
@keyframes fx-float2{from{transform:translate3d(0,0,0) rotate(7deg)}to{transform:translate3d(-5vw,7vh,0) rotate(-7deg)}}
@keyframes fx-float3{from{transform:translate3d(0,0,0) rotate(-5deg)}to{transform:translate3d(4vw,-5vh,0) rotate(8deg)}}

/* ---- motif: constellation (home / blog / utility pages) ---- */
.bgfx .stars,.bgfx .stars::before,.bgfx .stars::after{position:absolute;inset:0;width:100%;height:100%;content:"";background-repeat:no-repeat}
.bgfx .stars{
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 70% 22%,rgba(92,234,217,.75),transparent),radial-gradient(1.5px 1.5px at 40% 68%,rgba(167,139,250,.7),transparent),radial-gradient(2px 2px at 85% 58%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 55% 45%,rgba(34,211,238,.7),transparent),radial-gradient(2px 2px at 12% 80%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 90% 85%,rgba(167,139,250,.6),transparent),radial-gradient(2px 2px at 33% 12%,rgba(92,234,217,.6),transparent);
  animation:fx-twinkle 4.5s ease-in-out infinite,fx-stardrift 60s linear infinite}
.bgfx .stars::before{
  background-image:radial-gradient(1.5px 1.5px at 15% 50%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 60% 80%,rgba(92,234,217,.6),transparent),radial-gradient(1px 1px at 80% 35%,rgba(255,255,255,.45),transparent),radial-gradient(1.5px 1.5px at 45% 18%,rgba(34,211,238,.6),transparent),radial-gradient(1px 1px at 28% 62%,rgba(167,139,250,.55),transparent);
  opacity:.85;animation:fx-twinkle 6.5s ease-in-out infinite,fx-stardrift 95s linear infinite reverse}
.bgfx .stars::after{
  background-image:radial-gradient(1px 1px at 50% 25%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 25% 88%,rgba(92,234,217,.5),transparent),radial-gradient(1px 1px at 78% 70%,rgba(167,139,250,.45),transparent),radial-gradient(1px 1px at 8% 38%,rgba(34,211,238,.45),transparent);
  opacity:.75;animation:fx-twinkle 8s ease-in-out infinite}
@keyframes fx-stardrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3vw,2vh,0)}}

@media(prefers-reduced-motion:reduce){
  .bgfx::before,.bgfx .orb,.bgfx .ecg-pulse,.bgfx .scan::after,.bgfx .net,.bgfx .net line,.bgfx .net .n,.bgfx .pg,.bgfx .stars,.bgfx .stars::before,.bgfx .stars::after{animation:none}
  .bgfx .ecg-pulse{display:none}
}