/* ============================================================ VGP OpsFlow — Animated Background Themes Toggle by setting or data-bg="aurora">. Default (no attribute / anything else) = no animated bg. All layers are fixed + behind content (z-index negative) and pointer-events:none so they never interfere with the UI. ============================================================ */ /* background host layers (shared) — injected once in index.html */ /* All bg layers stay BEHIND content (negative z-index). Stacking order (back -> front): bgFx (-4) < bgAurora (-3) < bgNaruto (-2) < bgVeil (-1). */ #bgFx{position:fixed;inset:0;z-index:-4;pointer-events:none;overflow:hidden} #bgAurora{position:fixed;inset:0;z-index:-3;pointer-events:none;display:none} #bgNaruto{position:fixed;inset:0;z-index:-2;pointer-events:none;display:none} #bgVeil{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none} /* ---------- OPTION 1: PURPLE AURORA ---------- */ /* Animated MOVING gradient base: a large multi-color gradient that continuously pans/shifts across the viewport for a living "moving background color" effect. Sits on #bgFx (backmost layer) under the floating aurora blobs. */ body[data-bg="aurora"] #bgFx, body[data-bg="naruto-aurora"] #bgFx{ background: radial-gradient(1200px 600px at 75% -5%, rgba(99,102,241,.12), transparent 60%), radial-gradient(900px 500px at 10% 20%, rgba(139,92,246,.10), transparent 60%), linear-gradient(120deg, rgba(99,102,241,.22) 0%, rgba(139,92,246,.20) 22%, rgba(168,85,247,.18) 44%, rgba(59,130,246,.20) 66%, rgba(99,102,241,.22) 100%); background-size:auto, auto, 300% 300%; animation:bgColorMove 24s ease-in-out infinite} html[data-theme="light"] body[data-bg="aurora"] #bgFx, html[data-theme="light"] body[data-bg="naruto-aurora"] #bgFx{ background: radial-gradient(1200px 600px at 75% -5%, rgba(99,102,241,.10), transparent 60%), radial-gradient(900px 500px at 10% 20%, rgba(139,92,246,.08), transparent 60%), linear-gradient(120deg, rgba(129,140,248,.20) 0%, rgba(167,139,250,.18) 22%, rgba(192,132,252,.16) 44%, rgba(96,165,250,.18) 66%, rgba(129,140,248,.20) 100%); background-size:auto, auto, 300% 300%; animation:bgColorMove 24s ease-in-out infinite} @keyframes bgColorMove{ 0%{background-position:0% 0%, 0% 0%, 0% 50%} 50%{background-position:0% 0%, 0% 0%, 100% 50%} 100%{background-position:0% 0%, 0% 0%, 0% 50%}} body[data-bg="aurora"] #bgAurora, body[data-bg="naruto-aurora"] #bgAurora{display:block} .aurora-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.32;mix-blend-mode:screen} .aurora-blob.b1{width:520px;height:520px;background:radial-gradient(circle,#8b5cf6,transparent 65%); top:-120px;left:-80px;animation:auroraFloat1 18s ease-in-out infinite} .aurora-blob.b2{width:640px;height:640px;background:radial-gradient(circle,#6366f1,transparent 65%); bottom:-180px;right:-120px;animation:auroraFloat2 22s ease-in-out infinite} .aurora-blob.b3{width:460px;height:460px;background:radial-gradient(circle,#a855f7,transparent 65%); top:45%;left:22%;animation:auroraFloat3 26s ease-in-out infinite} /* combined mode: make blobs a touch stronger so purple reads behind/around Naruto */ body[data-bg="naruto-aurora"] .aurora-blob{opacity:.6} @keyframes auroraFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,90px) scale(1.15)}} @keyframes auroraFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-140px,-70px) scale(1.2)}} @keyframes auroraFloat3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-90px,60px) scale(.9)}66%{transform:translate(80px,-80px) scale(1.1)}} /* ---------- OPTION 3: NARUTO + RASENGAN (also drives combined mode) ---------- */ body[data-bg="naruto"] #bgFx{background: radial-gradient(1100px 600px at 80% 0%, rgba(99,102,241,.16), transparent 60%), radial-gradient(900px 520px at 15% 90%, rgba(139,92,246,.14), transparent 60%)} body[data-bg="naruto"] #bgNaruto, body[data-bg="naruto-aurora"] #bgNaruto{display:block} body[data-bg="naruto"] #bgVeil, body[data-bg="naruto-aurora"] #bgVeil{display:block; background:linear-gradient(90deg, rgba(10,12,20,.20) 0%, rgba(10,12,20,.30) 20%, rgba(10,12,20,.30) 80%, rgba(10,12,20,.15) 100%)} html[data-theme="light"] body[data-bg="naruto"] #bgVeil, html[data-theme="light"] body[data-bg="naruto-aurora"] #bgVeil{ background:linear-gradient(90deg, rgba(244,246,251,.4) 0%, rgba(244,246,251,.5) 20%, rgba(244,246,251,.5) 80%, rgba(244,246,251,.35) 100%)} .naruto-char{position:absolute;right:-90px;bottom:0;height:88vh;max-height:880px; opacity:1;filter:drop-shadow(0 10px 40px rgba(0,0,0,.5));animation:narutoBreathe 6s ease-in-out infinite} .naruto-char img{height:100%;display:block} /* wrapper is sized to the image so the Rasengan can be placed as a %% of it */ .naruto-char{width:auto} @keyframes narutoBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .rasengan{position:absolute; /* placed relative to the Naruto image; %% of image box so it tracks his palm on resize. left/top mark the CENTER of his open palm; translate(-50%,-50%) centers the orb there. */ left:8.5%;top:37%;width:19%;aspect-ratio:1;height:auto;border-radius:50%; animation:rasenganPulse 2.4s ease-in-out infinite} .rasengan .core{position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 50% 45%, #dbeafe 0%, #7dd3fc 30%, #38bdf8 55%, #2563eb 78%, rgba(37,99,235,0) 82%); box-shadow:0 0 40px 12px rgba(56,189,248,.6), 0 0 90px 30px rgba(37,99,235,.35); animation:rasenganSpin .7s linear infinite} .rasengan .swirl{position:absolute;inset:8%;border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, rgba(219,234,254,.85) 40deg, transparent 90deg, rgba(147,197,253,.8) 180deg, transparent 230deg, rgba(219,234,254,.85) 320deg, transparent 360deg); mix-blend-mode:screen;animation:rasenganSpin .5s linear infinite reverse;filter:blur(1px)} .rasengan .swirl2{position:absolute;inset:20%;border-radius:50%; background:conic-gradient(from 90deg, transparent, rgba(255,255,255,.9) 60deg, transparent 140deg, rgba(191,219,254,.7) 250deg, transparent 320deg); mix-blend-mode:screen;animation:rasenganSpin .35s linear infinite;filter:blur(.5px)} .rasengan .flare{position:absolute;inset:-30%;border-radius:50%; background:radial-gradient(circle, rgba(56,189,248,.28), transparent 60%);animation:flarePulse 2.4s ease-in-out infinite} @keyframes flarePulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.12);opacity:1}} /* ---------- SASUKE + CHIDORI (bottom-left, mirrors Naruto) ---------- */ /* start Sasuke just past the 240px sidebar so he's visible in the content area */ .sasuke-char{position:absolute;left:150px;bottom:-40px;height:80vh;max-height:800px;width:auto; opacity:1;filter:drop-shadow(0 10px 40px rgba(0,0,0,.5)) brightness(1.05);animation:sasukeBreathe 6.5s ease-in-out infinite} .sasuke-char img{height:100%;display:block} @keyframes sasukeBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} /* animated Chidori over his hands (%% of image so it tracks on resize) */ .chidori{position:absolute;left:32%;top:68%;width:26%;aspect-ratio:1;height:auto;border-radius:50%; animation:chidoriPulse 1.6s ease-in-out infinite} .chidori .c-core{position:absolute;inset:18%;border-radius:50%; background:radial-gradient(circle at 50% 50%, #ffffff 0%, #dbeafe 22%, #7dd3fc 45%, #38bdf8 66%, rgba(59,130,246,0) 78%); box-shadow:0 0 34px 10px rgba(125,211,252,.7), 0 0 80px 26px rgba(59,130,246,.4); animation:chidoriFlicker .12s steps(2) infinite} .chidori .c-flare{position:absolute;inset:-25%;border-radius:50%; background:radial-gradient(circle, rgba(125,211,252,.25), transparent 62%);animation:chidoriFlarePulse 1.6s ease-in-out infinite} /* crackling bolts */ .chidori .bolt{position:absolute;left:50%;top:50%;width:50%;height:3px;transform-origin:left center; background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(125,211,252,.7) 60%, transparent); filter:drop-shadow(0 0 4px rgba(147,197,253,.9));border-radius:2px} .chidori .bolt1{--a:20deg;animation:boltFlick .18s steps(1) infinite} .chidori .bolt2{--a:115deg;animation:boltFlick .14s steps(1) infinite .05s} .chidori .bolt3{--a:210deg;animation:boltFlick .2s steps(1) infinite .03s} .chidori .bolt4{--a:300deg;animation:boltFlick .16s steps(1) infinite .07s} @keyframes chidoriFlicker{0%{opacity:.85}100%{opacity:1}} @keyframes chidoriFlarePulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.15);opacity:1}} @keyframes chidoriPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}} @keyframes boltFlick{0%{opacity:0;transform:rotate(var(--a,0)) scaleX(.6)}50%{opacity:1}100%{opacity:.2;transform:rotate(var(--a,0)) scaleX(1)}} @keyframes rasenganSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes rasenganPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.95}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}} /* On small screens, shrink Naruto so he doesn't crowd the content */ @media(max-width:820px){ .naruto-char{height:55vh;opacity:.5;right:-40px} .sasuke-char{height:52vh;opacity:.5;left:-40px} .rasengan,.chidori{display:none} body[data-bg="naruto"] #bgVeil{ background:linear-gradient(90deg, rgba(10,12,20,.72) 0%, rgba(10,12,20,.5) 55%, rgba(10,12,20,.25) 100%)} } /* Respect reduced-motion preferences */ @media(prefers-reduced-motion:reduce){ #bgFx,.aurora-blob,.naruto-char,.rasengan,.rasengan *, .sasuke-char,.chidori,.chidori *{animation:none!important} }