/* ==========================================================================
   TEXTURE: what the page stands on (js/texture.js)
   Behind everything, fixed to the window:
   - light: four soft pools in the spectrum, drifting slowly. Their colours follow the section in
     view (--tx-a, --tx-b, --tx-c, set by js/texture.js and eased by the registered properties).
   - dots: a fine lattice that scrolls slower than the page, and a brighter copy lit around the pointer.
   Over everything: a film grain, so no surface is ever perfectly flat.
   Each section also gets a seam of light where it begins.
   ========================================================================== */
@property --tx-a { syntax: "<color>"; inherits: true; initial-value: #6b4cf0; }
@property --tx-b { syntax: "<color>"; inherits: true; initial-value: #14a8f5; }
@property --tx-c { syntax: "<color>"; inherits: true; initial-value: #e053b0; }
:root {
  --tx-a: #6b4cf0; --tx-b: #14a8f5; --tx-c: #e053b0;
  --tx-light: .24; --tx-dot: rgb(214 204 255 / .075); --tx-dot-lit: rgb(214 204 255 / .55);
  --tx-grain: .11; --tx-grain-blend: normal; --tx-seam: .55;
  --tx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  transition: --tx-a 1.6s ease, --tx-b 1.6s ease, --tx-c 1.6s ease;
}
:root[data-theme="light"] {
  --tx-light: .2; --tx-dot: rgb(40 24 90 / .09); --tx-dot-lit: rgb(91 33 182 / .42);
  --tx-grain: .09; --tx-grain-blend: normal; --tx-seam: .35;
  --tx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .2 0 0 0 2.4 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.tx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
/* the copy on the film's dark stage, under the Computer */
.tx.tx-film { position: absolute; z-index: 0; --tx-light: .3; --tx-dot: rgb(214 204 255 / .075); --tx-dot-lit: rgb(214 204 255 / .55); }
.film.still .tx-film { display: none; }

/* the light */
.tx-l { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: var(--tx-light); will-change: transform; }
.tx-l.l1 { left: -22vmax; top: -18vmax; background: radial-gradient(closest-side, var(--tx-a), transparent); animation: tx-drift-1 46s ease-in-out infinite alternate; }
.tx-l.l2 { right: -26vmax; top: 8vh; background: radial-gradient(closest-side, var(--tx-b), transparent); animation: tx-drift-2 58s ease-in-out infinite alternate; }
.tx-l.l3 { left: 18vw; bottom: -40vmax; background: radial-gradient(closest-side, var(--tx-c), transparent); animation: tx-drift-3 52s ease-in-out infinite alternate; }
.tx-l.l4 { width: 40vmax; height: 40vmax; left: 40vw; top: 30vh; opacity: calc(var(--tx-light) * .6); background: radial-gradient(closest-side, color-mix(in oklch, var(--tx-a) 50%, var(--tx-c)), transparent); animation: tx-drift-4 37s ease-in-out infinite alternate; }
@keyframes tx-drift-1 { to { transform: translate(14vw, 18vh) scale(1.15); } }
@keyframes tx-drift-2 { to { transform: translate(-16vw, 22vh) scale(.9); } }
@keyframes tx-drift-3 { to { transform: translate(-12vw, -16vh) scale(1.1); } }
@keyframes tx-drift-4 { to { transform: translate(-22vw, -14vh) scale(1.25); } }

/* the dots: taller than the window, so they can scroll a little against the page */
.tx-d {
  position: absolute; left: 0; right: 0; top: 0; height: 200%; will-change: transform;
  background-image: radial-gradient(circle at center, var(--tx-dot) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 70% at 50% 25%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 70% at 50% 25%, #000 30%, transparent 85%);
}
.tx-d.lit {
  --mx: -999px; --my: -999px;
  background-image: radial-gradient(circle at center, var(--tx-dot-lit) 1.1px, transparent 1.8px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000, transparent 75%);
  mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000, transparent 75%);
}

/* the grain, over everything (under the nav and menus) */
.tx-grain {
  position: fixed; inset: -50%; z-index: 45; pointer-events: none; opacity: var(--tx-grain); mix-blend-mode: var(--tx-grain-blend);
  background-image: var(--tx-noise);
  animation: tx-grain 1.2s steps(6) infinite;
}
@keyframes tx-grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0, 0); }
}

/* a seam of light where each section begins */
.tx-seam { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 0; }
.tx-seam::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; opacity: var(--tx-seam);
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--tx-a) 70%, #fff) 30%, color-mix(in oklch, var(--tx-c) 70%, #fff) 70%, transparent);
}
.tx-seam::after {
  content: ""; position: absolute; left: 20%; right: 20%; top: -60px; height: 120px; opacity: calc(var(--tx-seam) * .35);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklch, var(--tx-a) 60%, var(--tx-c)), transparent 70%);
}

@media (max-width: 760px) {
  .tx-d { background-size: 20px 20px; }
  .tx-d.lit { display: none; }
  .tx-l.l4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tx .tx-l, .tx-grain { animation: none; }
}

/* the goal demo keeps its dark stage, but lets the texture through in the dark theme */
:root:not([data-theme="light"]) .gl { background: rgb(6 5 9 / .4); }