/* ========================================================================== E&A THANGKA ARTWORK — Atmosphere -------------------------------------------------------------------------- A fixed layer behind the whole site that flows as the page is scrolled. Everything here is driven by one custom property, --scroll (0 … 1), which atmosphere.js writes on . Nothing here ever reflows: only transform, opacity and background-position change. ========================================================================== */ .atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--c-ink); } .atmos { position: absolute; inset: -20%; will-change: transform; } /* --- Warm cloud of pigment, drifting upward and sideways ------------------ */ .atmos--haze { background: radial-gradient(46% 38% at 22% 18%, rgba(78, 48, 26, .42), transparent 68%), radial-gradient(52% 44% at 78% 42%, rgba(48, 30, 21, .48), transparent 70%), radial-gradient(40% 34% at 44% 82%, rgba(104, 71, 32, .22), transparent 72%), radial-gradient(60% 50% at 12% 62%, rgba(30, 24, 19, .6), transparent 74%); transform: translate3d(calc(var(--scroll) * -11vw), calc(var(--scroll) * -58vh), 0) scale(calc(1 + var(--scroll) * .38)) rotate(calc(var(--scroll) * 26deg)); } /* --- Thangka linework, sliding at its own rate ---------------------------- */ .atmos--line { background: url('../img/hero-texture-1600.webp?v=20260909203452') center top / 120% auto repeat-y; opacity: .075; filter: saturate(.55) brightness(.65); transform: translate3d(0, calc(var(--scroll) * -92vh), 0) scale(1.14); } /* --- Starfield: fixed to the backdrop, each point on its own rhythm -------- */ .starfield { position: absolute; inset: 0; /* Deliberately not tied to --scroll: the stars stay put whilst the haze and mandalas flow past them. */ } .star { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c-gold-lt); box-shadow: 0 0 var(--glow) rgba(240, 217, 160, .85); opacity: .2; animation: twinkle var(--dur) ease-in-out var(--delay) infinite; } @keyframes twinkle { 0%, 100% { opacity: .18; transform: scale(.7); } 50% { opacity: var(--peak); transform: scale(1.3); } } /* --- Mandala wheels, turning with the scroll ------------------------------- */ .atmos-wheel { position: absolute; color: var(--c-gold); opacity: .075; } .atmos-wheel--a { top: -14vh; right: -18vw; width: min(86vw, 780px); aspect-ratio: 1; transform: rotate(calc(var(--scroll) * 520deg)) scale(calc(1 + var(--scroll) * .5)) translateY(calc(var(--scroll) * 18vh)); } .atmos-wheel--b { bottom: -22vh; left: -20vw; width: min(78vw, 640px); aspect-ratio: 1; opacity: .055; transform: rotate(calc(var(--scroll) * -400deg)) translateY(calc(var(--scroll) * -30vh)); } .atmos-wheel--c { top: 34vh; left: 42vw; width: min(60vw, 460px); aspect-ratio: 1; opacity: .05; transform: rotate(calc(var(--scroll) * 340deg)) translate3d(calc(var(--scroll) * -26vw), calc(var(--scroll) * -46vh), 0); } /* --- Horizon glow that rises as you read ----------------------------------- */ .atmos--glow { inset: auto 0 0 0; height: 70vh; background: radial-gradient(70% 100% at 50% 100%, rgba(212, 168, 87, .22), transparent 72%); opacity: calc(.25 + var(--scroll) * .75); transform: translate3d(0, calc(var(--scroll) * -14vh), 0); } /* --- Grain on top of everything -------------------------------------------- */ .atmos--grain { inset: 0; background: url('../img/noise.svg?v=20260909203452') repeat; background-size: 170px; opacity: .13; mix-blend-mode: overlay; transform: none; } /* -------------------------------------------------------------------------- Content sits above the atmosphere, and section backgrounds are translucent so the flow stays visible the whole way down. -------------------------------------------------------------------------- */ /* Only the flow content needs lifting; the nav and drawer are already fixed and carry their own z-index in layout.css. Setting `position` on them here would knock the navigation out of its fixed placement. */ main, .site-footer { position: relative; z-index: var(--z-content); } .section { background: transparent; } .section--alt { background: rgba(16, 14, 12, .82); } .live { background: transparent; } .site-footer { background: rgba(20, 18, 16, .82); } @media (prefers-reduced-motion: reduce) { .atmos, .atmos-wheel { transform: none !important; animation: none !important; } .star { animation: none; opacity: calc(var(--peak) * .6); } .atmos--glow { opacity: .5; } } /* -------------------------------------------------------------------------- Phones: fewer moving parts. The backdrop still flows, with a fraction of the paint work. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .star:nth-child(n + 56) { display: none; } .atmos--line { display: none; } .atmos-wheel--c { display: none; } .atmos-wheel--a { width: min(96vw, 460px); } .atmos-wheel--b { width: min(88vw, 400px); } .atmos--grain { opacity: .09; } }