/* ============================================================================ Side decor — desktop-only ambient geometry Drift lattice (both side margins): a generative constellation of gold lines + teal diamond nodes that fades out over the full-bleed hero/gallery so it never collides with the art. Mounted by js/side-decor.js; tokens from style.css. ========================================================================== */ .side-lattice { position: fixed; top: 0; bottom: 0; z-index: 1; pointer-events: none; /* Margin beside the centred content column. Defaults to the home page's 1400px .container; pages with a narrower column (e.g. vitrine's 1240px .vit) set --lattice-content on so the band hugs the same gutter. */ width: calc((100vw - var(--lattice-content, 1400px)) / 2); opacity: 0; transition: opacity .6s ease; /* Two mask layers intersected: a vertical top/bottom fade AND a horizontal fade toward the container edge (set per side below) so diamonds dissolve as they drift in toward the content rather than hard-stopping at the edge. */ -webkit-mask-composite: source-in; mask-composite: intersect; } .side-lattice--left { left: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, #000 0%, #000 25%, transparent 100%); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, #000 0%, #000 25%, transparent 100%); } .side-lattice--right { right: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent 0%, #000 75%, #000 100%); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(90deg, transparent 0%, #000 75%, #000 100%); } .side-lattice.is-visible { opacity: 1; } .side-lattice canvas { display: block; width: 100%; height: 100%; } /* Desktop-only: the lattice needs real margin beside the 1400px container. */ @media (max-width: 1500px) { .side-lattice { display: none; } } @media (prefers-reduced-motion: reduce) { .side-lattice { display: none; } }