/*
 * Animated gradient background with noise, adapted for anastasiaramlall.com
 * (colours driven by gradient-bg.js; fixed behind the page instead of full-screen demo).
 * Based on "Interactive Gradient & Glassmorphism with noise" by TOMAZKI,
 * https://codepen.io/Podgro/pen/oNOKYqr
 *
 * The MIT License (MIT) - Copyright (c) 2026 TOMAZKI
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
 * associated documentation files (the "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
 * following conditions: The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
 * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
 * EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
 * USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
.gradient-bg{
  --color-bg1:rgb(10,17,20);       /* site ink */
  --color-bg2:rgb(13,26,32);
  --color1:201,71,95;              /* overwritten by gradient-bg.js as the page scrolls */
  --color2:120,60,160;
  --color3:30,120,130;
  --color4:200,150,60;
  --color5:90,40,90;
  --color-interactive:232,144,159; /* light raspberry, follows the pointer */
  --circle-size:80%;
  --blending:hard-light;
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(40deg,var(--color-bg1),var(--color-bg2));
}
.gradient-bg .svgBlur{display:none}
.gradient-bg .noiseBg{position:absolute;inset:0;width:100%;height:100%;z-index:1;mix-blend-mode:soft-light;opacity:.3}
.gradient-bg .gradients-container{width:100%;height:100%;filter:url(#goo) blur(40px);opacity:.78}
.gradient-bg .g1,.gradient-bg .g2,.gradient-bg .g3,.gradient-bg .g4,.gradient-bg .g5,.gradient-bg .interactive{
  position:absolute;mix-blend-mode:var(--blending)}
.gradient-bg .g1{background:radial-gradient(circle at center,rgba(var(--color1),.8) 0,rgba(var(--color1),0) 50%) no-repeat;
  width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size)/2);left:calc(50% - var(--circle-size)/2);
  transform-origin:center center;animation:gbg-vertical 30s ease infinite}
.gradient-bg .g2{background:radial-gradient(circle at center,rgba(var(--color2),.8) 0,rgba(var(--color2),0) 50%) no-repeat;
  width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size)/2);left:calc(50% - var(--circle-size)/2);
  transform-origin:calc(50% - 400px);animation:gbg-circle 20s reverse infinite}
.gradient-bg .g3{background:radial-gradient(circle at center,rgba(var(--color3),.8) 0,rgba(var(--color3),0) 50%) no-repeat;
  width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size)/2 + 200px);left:calc(50% - var(--circle-size)/2 - 500px);
  transform-origin:calc(50% + 400px);animation:gbg-circle 40s linear infinite}
.gradient-bg .g4{background:radial-gradient(circle at center,rgba(var(--color4),.8) 0,rgba(var(--color4),0) 50%) no-repeat;
  width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size)/2);left:calc(50% - var(--circle-size)/2);
  transform-origin:calc(50% - 200px);animation:gbg-horizontal 40s ease infinite;opacity:.7}
.gradient-bg .g5{background:radial-gradient(circle at center,rgba(var(--color5),.8) 0,rgba(var(--color5),0) 50%) no-repeat;
  width:calc(var(--circle-size)*2);height:calc(var(--circle-size)*2);top:calc(50% - var(--circle-size));left:calc(50% - var(--circle-size));
  transform-origin:calc(50% - 800px) calc(50% + 200px);animation:gbg-circle 20s ease infinite}
.gradient-bg .interactive{background:radial-gradient(circle at center,rgba(var(--color-interactive),.8) 0,rgba(var(--color-interactive),0) 50%) no-repeat;
  width:100%;height:100%;top:-50%;left:-50%;opacity:.55}
@keyframes gbg-circle{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes gbg-vertical{0%{transform:translateY(-50%)}50%{transform:translateY(50%)}100%{transform:translateY(-50%)}}
@keyframes gbg-horizontal{0%{transform:translateX(-50%) translateY(-10%)}50%{transform:translateX(50%) translateY(10%)}100%{transform:translateX(-50%) translateY(-10%)}}
/* phones and tablets: skip the costly "goo" filter, keep the blur */
@media (pointer:coarse),(max-width:760px){.gradient-bg .gradients-container{filter:blur(40px)}}
@media (prefers-reduced-motion:reduce){.gradient-bg .gradients-container > *{animation-play-state:paused}}