/* GENERATED by kinesis-theme/gen.py from tokens.json. Do not edit: change tokens.json and run gen.py.
   kinesis-glass.css reading the --k- switch tokens from kinesis-theme.ns.css. The pointer light variables
   (--sx, --sy, --mx, --my) stay unprefixed because kinesis-glass-light.js writes them. */
@property --sx { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --sy { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
.k-glass {
  background-image:
    radial-gradient(260px circle at var(--sx) var(--sy), rgb(255 255 255 / var(--k-glass-sheen)), transparent 70%),
    radial-gradient(130% 110% at 100% 0%, var(--k-glass-tint), transparent 55%),
    radial-gradient(120% 110% at 0% 100%, var(--k-glass-tint-2), transparent 55%),
    linear-gradient(160deg, var(--k-glass-frost), transparent) !important;
  -webkit-backdrop-filter: var(--k-glass-filter);
  backdrop-filter: var(--k-glass-filter);
}
.k-glass[data-glass="still"] { --k-glass-sheen: 0; }
.k-lamps { display: var(--k-lamps-display); position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.k-lamps i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.k-lamps i:nth-child(1) { left: -14%; top: -18%; width: 64%; height: 70vh; background: radial-gradient(closest-side, rgb(241 59 255 / .42), transparent); animation: kvgA 17s ease-in-out infinite alternate; }
.k-lamps i:nth-child(2) { right: -16%; top: 4%; width: 58%; height: 80vh; background: radial-gradient(closest-side, rgb(62 123 255 / .36), transparent); animation: kvgB 23s ease-in-out infinite alternate; }
.k-lamps i:nth-child(3) { left: 22%; top: 55%; width: 56%; height: 70vh; background: radial-gradient(closest-side, rgb(255 79 163 / .26), transparent); animation: kvgC 29s ease-in-out infinite alternate; }
.k-lamps i:nth-child(4) { left: -10%; top: 70%; width: 40%; height: 55vh; background: radial-gradient(closest-side, rgb(182 255 59 / .13), transparent); animation: kvgB 31s ease-in-out infinite alternate-reverse; }
.k-lamps i:nth-child(5) { left: 16%; top: -20%; width: 72%; height: 140vh; border-radius: 0; filter: blur(18px);
  background: conic-gradient(from 200deg at 50% 50%, transparent 0 22%, rgb(138 92 255 / .32) 30%, transparent 39%, transparent 64%, rgb(241 59 255 / .26) 72%, transparent 81%);
  -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 72%); mask: radial-gradient(closest-side, #000 15%, transparent 72%);
  animation: kvgRibbon 41s linear infinite; }
.k-lamps::before { content: ""; position: fixed; inset: 0; background: radial-gradient(460px circle at var(--mx) var(--my), rgb(47 227 255 / .16), transparent 70%); transition: --mx 320ms cubic-bezier(.2, .7, .2, 1), --my 320ms cubic-bezier(.2, .7, .2, 1); }
.k-lamps::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background-image: radial-gradient(circle, rgb(241 59 255 / .5) 1.3px, transparent 1.7px); background-size: 10px 10px;
  -webkit-mask: linear-gradient(to top, #000 10%, transparent); mask: linear-gradient(to top, #000 10%, transparent); }
@keyframes kvgA { 0% { transform: translate(0, 0) rotate(0) scale(1); } 55% { transform: translate(7%, 5%) rotate(14deg) scale(1.12, .9); } 100% { transform: translate(12%, -6%) rotate(-8deg) scale(.94, 1.12); } }
@keyframes kvgB { 0% { transform: translate(0, 0) rotate(0) scale(1); } 50% { transform: translate(-8%, 7%) rotate(-12deg) scale(.92, 1.1); } 100% { transform: translate(-14%, -4%) rotate(9deg) scale(1.1, .95); } }
@keyframes kvgC { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(10%, -8%) scale(1.15, .9); } 100% { transform: translate(-6%, -14%) scale(.9, 1.08); } }
@keyframes kvgRibbon { 0% { transform: rotate(0); opacity: 1; } 61% { opacity: 1; } 61.4% { opacity: .5; } 61.8% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 1; } }
@media (max-width: 767px) { .k-lamps i:nth-child(5) { display: none; } }

/* Reduced motion (part of the contract, not in the web file because globals.css stops every animation globally):
   every lamp drift and the ribbon stop, the follow light stops easing. */
@media (prefers-reduced-motion: reduce) {
  .k-lamps i { animation: none !important; }
  .k-lamps::before { transition: none !important; }
}