/* ========================================================================== 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); } /* These layers are translated a long way as the page scrolls — the haze by 58vh, the linework by 92vh. At -20% they were barely larger than the viewport, so after the shift their own bottom edge came into view as a hard horizontal line across the page. Whether it showed depended on the window height, which is why it appeared on a large screen and not on a small one. They are now large enough that no edge can ever reach the viewport. */ .atmos { position: absolute; inset: -100%; will-change: transform; } /* --- Warm cloud of pigment, drifting upward and sideways ------------------ */ .atmos--haze { /* Sizes and centres in viewport units: the element is far larger than the viewport, so percentages here would not mean what they appear to. The 100vw/100vh offsets account for how far it extends beyond the top left. */ background: radial-gradient(46vw 38vh at 122vw 118vh, rgba(78, 48, 26, .42), transparent 68%), radial-gradient(52vw 44vh at 178vw 142vh, rgba(48, 30, 21, .48), transparent 70%), radial-gradient(40vw 34vh at 144vw 182vh, rgba(104, 71, 32, .22), transparent 72%), radial-gradient(60vw 50vh at 112vw 162vh, 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=20260909212727') 50% 0 / 120vw 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 -25vh 0; /* past the foot, so no edge shows */ height: 105vh; background: radial-gradient(70% 100% at 50% 100%, rgba(212, 168, 87, .22), transparent 72%); opacity: calc(.25 + var(--scroll) * .75); /* No translation: it is the horizon, and moving it only risked another edge. The rising opacity carries the effect. */ } /* --- Grain on top of everything -------------------------------------------- */ .atmos--grain { inset: 0; /* still, so it stays viewport-sized */ background: url('../img/noise.svg?v=20260909212727') 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; } /* Alternating sections are translucent so the backdrop keeps flowing behind them. Their edges are faded rather than cut, otherwise the join against a transparent section shows as a hard horizontal seam. */ .section--alt { /* base.css sets an opaque colour with the `background` shorthand. Overriding only background-image leaves that colour in place, and the panel still ends on a hard line — which is exactly what showed beneath the shop. */ background-color: transparent; background-image: linear-gradient( 180deg, rgba(16, 14, 12, 0) 0, rgba(16, 14, 12, .82) clamp(60px, 12%, 150px), rgba(16, 14, 12, .82) calc(100% - clamp(60px, 12%, 150px)), rgba(16, 14, 12, 0) 100%); } .live { background: transparent; } /* The footer fades up out of the page rather than starting on a line — the flowing backdrop carries through its top edge. */ .site-footer { background-color: transparent; background-image: linear-gradient( 180deg, rgba(20, 18, 16, 0) 0, rgba(20, 18, 16, .82) clamp(90px, 22%, 190px), rgba(20, 18, 16, .88) 100%); border-top: 0; } /* A full-bleed hairline marks the footer off deliberately. The gradient above still carries the tone across, so the line reads as a chosen division rather than the edge of a block of colour. */ .site-footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(212, 168, 87, .3); } @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; } }