/* ============================================================ ANIMA — "Beyond the Veil" background system Loads AFTER anima-landing/landing.css and OVERRIDES its ambient ground. The veil is an aperture that dilates open from the centre as you scroll (driven by --open, set in veil.js), revealing the cosmos beyond. Material + beyond-mode are swappable via Tweaks. Typography / layout / sections are untouched — that all still comes from landing.css. ============================================================ */ /* ---- per-palette veil + void tones -------------------------------------- glow1/glow2/glow3/accent are inherited from landing.css. We only add the deep void base and the two membrane tints here. ------------------------- */ body[data-palette="terracotta"] { --void:#0a0503; --veil-a:#341c14; --veil-b:#4a291d; } body[data-palette="violet"] { --void:#080315; --veil-a:#1e0f37; --veil-b:#33164f; } body[data-palette="indigo"] { --void:#02070d; --veil-a:#0a2231; --veil-b:#103746; } body[data-palette="plum"] { --void:#0c040d; --veil-a:#2b1028; --veil-b:#431839; } /* The mandala veil IS the background — a fixed, full-bleed backdrop. Scroll + horizontal-clip owner is so the fixed stage paints above scrolled content; paints the void base beneath the membrane. The aperture only dilates when Tweaks -> aperture = "on scroll" (veil.js drives --open); by default --open stays 0 and the mandala stays whole and still. */ html { overflow-x: hidden; background: var(--void); } body { background: var(--void); overflow-x: visible; overflow-y: visible; } /* shared aperture radius — fully SEALED before scroll (no iris at --open:0), full-bleed by the footer. --feather scales with --open too, so at 0 the transparent-centre + feather both collapse and the veil is wholly opaque. */ :root { --hole: calc(170vmin * var(--open, 0)); --feather: calc(30vmin * var(--open, 0)); } /* ============================================================ STAGE ============================================================ */ #veil-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--void); } /* cinematic vignette — focuses the aperture, protects edge-set text */ #veil-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 50% 38%, transparent 54%, rgba(0,0,0,0.44)); mix-blend-mode: multiply; } /* ============================================================ THE BEYOND (revealed through the aperture) The void base, drifting nebula, starfield AND the heightened psychedelia swirl are all painted on #cosmos in veil.js — a single canvas paints far more reliably than stacked blend layers, and it reads body[data-beyond] to switch void ↔ psychedelia. ============================================================ */ #beyond { position: absolute; inset: 0; } #cosmos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ============================================================ THE VEIL (the dilating membrane) ============================================================ */ #veil { position: absolute; inset: -12%; z-index: 2; -webkit-mask: radial-gradient(circle at 50% 40%, #0000 0, #0000 var(--hole), #000 calc(var(--hole) + var(--feather))); mask: radial-gradient(circle at 50% 40%, #0000 0, #0000 var(--hole), #000 calc(var(--hole) + var(--feather))); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .veil-skin { position: absolute; inset: 0; background: linear-gradient(180deg, var(--veil-a), var(--veil-b)); } /* the generated SVG veil-art layer (string mandala / living membrane) — built palette- & size-aware in veil.js, centred on the aperture, screen-blended over the dark membrane skin as luminous threadwork. */ .veil-art { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; opacity: 0.9; } .veil-art svg { display: block; width: 100%; height: 100%; } body[data-veil="string"] .veil-art { opacity: 0.95; } body[data-veil="membrane"] .veil-art { opacity: 0.82; } /* riso grain across the membrane */ .veil-skin::after { content: ''; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,"); background-size: 280px 280px; } /* the glowing rim — light leaking through the parting (NOT masked) */ #veil-rim { position: absolute; inset: -12%; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: min(0.85, calc(var(--open, 0) * 4)); /* no rim glow until the iris starts to open */ background: radial-gradient(circle at 50% 40%, transparent calc(var(--hole) - 1.6vmin), color-mix(in oklab, var(--glow1) 78%, transparent) var(--hole), color-mix(in oklab, var(--glow2) 32%, transparent) calc(var(--hole) + 4vmin), transparent calc(var(--hole) + 17vmin)); } /* ---- MATERIALS ---------------------------------------------------------- Both materials (String Mandala, Living Membrane) are generated as SVG into .veil-art by veil.js — see the rules just above. The skin below stays the plain dark membrane base for both. ------------------------------------- */ /* ============================================================ TOP-LAYER GRAIN (riso finish over everything) ============================================================ */ .veil-grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.4; background-image: url("data:image/svg+xml;utf8,"); background-size: 280px 280px; animation: grain-shimmer 6s steps(4) infinite; /* keyframes from landing.css */ } /* ============================================================ MOTION CONTROLS (Tweaks → data-motion) The veil-art spin + the cosmos twinkle/drift are JS-driven (veil.js reads data-motion live and scales the shared clock), so only the CSS grain needs wiring here. ============================================================ */ body[data-motion="still"] .veil-grain { animation: none !important; } body[data-motion="calm"] .veil-grain { animation-duration: 11s; } @media (prefers-reduced-motion: reduce) { .veil-grain { animation: none !important; } }