/* v4-aurora-1.css - ambient aurora page background (SITE-9 pilot) Adds a fixed background field behind all content, keyed off the EXISTING html[data-mode] x html[data-accent] toggles. Touches no other tokens. Rollback: remove this file + the .v4field div + from _v4chrome.html / index.html. */ /* The base fill + accent atmosphere live on THIS fixed field, not on . A body background propagates to the viewport canvas, and Chrome/WebKit don't re-composite that propagated canvas on a light/dark attribute flip until a scroll/reload - that was the "background doesn't change until I scroll" bug. The field is a normal fixed element, so an ancestor attr/token change repaints it reliably. This recipe is the exact stack that used to sit on body.ivo-app (see styles.css), so the look is unchanged; --bg/--accent are inherited from html[data-mode][data-accent] and update on every toggle. The opaque var(--bg) base also fully covers any legacy body painter still in bundle.css. */ .v4field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; background: radial-gradient(820px 560px at 50% -8%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%), radial-gradient(1000px 680px at 6% -8%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 55%), radial-gradient(900px 640px at 98% 4%, color-mix(in srgb,var(--accent-2) 10%,transparent), transparent 52%), var(--bg,#111827); transition:background .28s ease} html[data-mode="dark"] .v4field{ background: radial-gradient(820px 560px at 50% -8%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 60%), radial-gradient(1000px 680px at 6% -8%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 55%), radial-gradient(900px 640px at 98% 4%, color-mix(in srgb,var(--accent-2) 14%,transparent), transparent 52%), var(--bg,#111827)} @media (prefers-reduced-motion:reduce){.v4field{transition:none}} .v4field i,.v4field b{position:absolute;border-radius:50%;transform:translateZ(0)} .v4field .fa{width:1300px;height:1300px;top:-520px;left:-380px} .v4field .fb{width:1100px;height:1100px;top:-340px;right:-420px} .v4field .fc{width:1200px;height:1200px;bottom:-620px;left:24%} .v4field .fg{ position:absolute;inset:0;border-radius:0;opacity:.5; background-image: linear-gradient(var(--v4grid,rgba(255,255,255,.05)) 1px,transparent 1px), linear-gradient(90deg,var(--v4grid,rgba(255,255,255,.05)) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%); } /* gentle drift - transform-only, pre-softened gradients (no filter: blur) */ @media (prefers-reduced-motion: no-preference){ .v4field .fa{animation:v4d1 40s ease-in-out infinite alternate} .v4field .fb{animation:v4d2 48s ease-in-out infinite alternate} .v4field .fc{animation:v4d3 56s ease-in-out infinite alternate} @keyframes v4d1{to{transform:translate(140px,80px) scale(1.1)}} @keyframes v4d2{to{transform:translate(-110px,120px) scale(.94)}} @keyframes v4d3{to{transform:translate(-150px,-80px) scale(1.06)}} } /* Mobile perf: hold the aurora still. The drift is transform-only and cheap in isolation, but the page layers ~130 backdrop-filter panels over it, and a moving backdrop forces every one of them to re-blur each frame - which saturates a mobile GPU and makes scrolling/menu interactions stutter. Frozen, the blurred panels composite once and cache; the static gradient looks the same (the drift is a 40-56s crawl nobody notices on a phone). Desktop keeps the motion. */ @media (max-width:760px){ .v4field .fa,.v4field .fb,.v4field .fc{animation:none!important} } /* ---- colour recipes per mode x accent (matches approved SITE-9 mockup) ---- */ html[data-mode="dark"]{--v4grid:rgba(255,255,255,.05)} html[data-mode="light"]{--v4grid:rgba(27,18,13,.05)} html[data-mode="dark"][data-accent="coral"] .v4field .fa{background:radial-gradient(circle,rgba(232,80,46,.30) 0%,transparent 58%)} html[data-mode="dark"][data-accent="coral"] .v4field .fb{background:radial-gradient(circle,rgba(255,184,77,.20) 0%,transparent 56%)} html[data-mode="dark"][data-accent="coral"] .v4field .fc{background:radial-gradient(circle,rgba(120,60,200,.14) 0%,transparent 58%)} html[data-mode="dark"][data-accent="blue"] .v4field .fa{background:radial-gradient(circle,rgba(60,110,240,.28) 0%,transparent 58%)} html[data-mode="dark"][data-accent="blue"] .v4field .fb{background:radial-gradient(circle,rgba(255,184,77,.16) 0%,transparent 56%)} html[data-mode="dark"][data-accent="blue"] .v4field .fc{background:radial-gradient(circle,rgba(232,80,46,.09) 0%,transparent 58%)} html[data-mode="light"][data-accent="coral"] .v4field .fa{background:radial-gradient(circle,rgba(242,102,74,.22) 0%,transparent 58%)} html[data-mode="light"][data-accent="coral"] .v4field .fb{background:radial-gradient(circle,rgba(255,184,77,.22) 0%,transparent 56%)} html[data-mode="light"][data-accent="coral"] .v4field .fc{background:radial-gradient(circle,rgba(150,120,255,.12) 0%,transparent 58%)} html[data-mode="light"][data-accent="blue"] .v4field .fa{background:radial-gradient(circle,rgba(60,110,240,.20) 0%,transparent 58%)} html[data-mode="light"][data-accent="blue"] .v4field .fb{background:radial-gradient(circle,rgba(255,184,77,.18) 0%,transparent 56%)} html[data-mode="light"][data-accent="blue"] .v4field .fc{background:radial-gradient(circle,rgba(242,102,74,.08) 0%,transparent 58%)}