/* Higher Self - build 1304. Fundal adanc + stele discrete (inlocuieste bokeh-ul din 1302).
   Culorile adanci (navy, verde de padure, mov cosmic) vin din FV_IMG.blend_* (js/07) si din gradientele body (css/09).
   Stelele sunt aceleasi ca in cerul din asteptarea Zodiacului (bxSky, css/24): trei placi de puncte albe mici,
   repetate fara cusatura. Pe pagina (fundalul lui .phone si fetrul hubului) stau pe loc, sub carduri, ca sa nu
   repicteze toata pagina. Pe poza de erou a uneltelor aluneca incet, ca la Zodiac, doar spre margini. */
:root{ --st1:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22150%22 height=%22150%22%3E%3Ccircle cx=%2295.0%22 cy=%22138.7%22 r=%220.39%22 fill=%22%23fff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%2212.5%22 cy=%2240.5%22 r=%220.49%22 fill=%22%23fff%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%2275.4%22 cy=%22134.9%22 r=%220.59%22 fill=%22%23fff%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%22143.8%22 cy=%2266.0%22 r=%220.38%22 fill=%22%23fff%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2298.4%22 cy=%226.0%22 r=%220.54%22 fill=%22%23fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%2248.0%22 cy=%22122.7%22 r=%220.60%22 fill=%22%23fff%22 fill-opacity=%220.43%22/%3E%3Ccircle cx=%2237.2%22 cy=%22116.4%22 r=%220.67%22 fill=%22%23fff%22 fill-opacity=%220.24%22/%3E%3Ccircle cx=%2225.4%22 cy=%2255.2%22 r=%220.59%22 fill=%22%23fff%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22142.6%22 cy=%22140.5%22 r=%220.52%22 fill=%22%23fff%22 fill-opacity=%220.30%22/%3E%3Ccircle cx=%22144.1%22 cy=%2260.2%22 r=%220.59%22 fill=%22%23fff%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%2288.2%22 cy=%2284.2%22 r=%220.54%22 fill=%22%23fff%22 fill-opacity=%220.27%22/%3E%3Ccircle cx=%2235.3%22 cy=%2234.0%22 r=%220.60%22 fill=%22%23fff%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22105.9%22 cy=%2259.5%22 r=%220.60%22 fill=%22%23fff%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%2228.1%22 cy=%2260.5%22 r=%220.55%22 fill=%22%23fff%22 fill-opacity=%220.19%22/%3E%3Ccircle cx=%2237.0%22 cy=%2258.1%22 r=%220.41%22 fill=%22%23fff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22136.0%22 cy=%22130.6%22 r=%220.62%22 fill=%22%23fff%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%2216.5%22 cy=%22113.7%22 r=%220.63%22 fill=%22%23fff%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%2235.0%22 cy=%22110.0%22 r=%220.40%22 fill=%22%23fff%22 fill-opacity=%220.37%22/%3E%3Ccircle cx=%2283.8%22 cy=%22111.9%22 r=%220.48%22 fill=%22%23fff%22 fill-opacity=%220.26%22/%3E%3Ccircle cx=%229.5%22 cy=%22131.5%22 r=%220.38%22 fill=%22%23fff%22 fill-opacity=%220.19%22/%3E%3Ccircle cx=%2259.8%22 cy=%22105.8%22 r=%220.47%22 fill=%22%23fff%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%2283.7%22 cy=%22104.0%22 r=%220.51%22 fill=%22%23fff%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%2298.5%22 cy=%22141.4%22 r=%220.38%22 fill=%22%23fff%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%2242.8%22 cy=%2246.2%22 r=%220.64%22 fill=%22%23fff%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%228.5%22 cy=%22124.2%22 r=%220.56%22 fill=%22%23fff%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%2287.5%22 cy=%220.5%22 r=%220.62%22 fill=%22%23fff%22 fill-opacity=%220.41%22/%3E%3C/svg%3E"); --st2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22230%22 height=%22230%22%3E%3Ccircle cx=%22179.0%22 cy=%22159.2%22 r=%220.64%22 fill=%22%23fff%22 fill-opacity=%220.50%22/%3E%3Ccircle cx=%22149.1%22 cy=%22150.6%22 r=%220.72%22 fill=%22%23fff%22 fill-opacity=%220.64%22/%3E%3Ccircle cx=%2241.2%22 cy=%22117.3%22 r=%220.79%22 fill=%22%23fff%22 fill-opacity=%220.64%22/%3E%3Ccircle cx=%22122.9%22 cy=%22117.4%22 r=%220.72%22 fill=%22%23fff%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%22212.5%22 cy=%2253.8%22 r=%220.86%22 fill=%22%23fff%22 fill-opacity=%220.62%22/%3E%3Ccircle cx=%2258.1%22 cy=%22156.7%22 r=%220.76%22 fill=%22%23fff%22 fill-opacity=%220.58%22/%3E%3Ccircle cx=%22129.8%22 cy=%2238.8%22 r=%220.77%22 fill=%22%23fff%22 fill-opacity=%220.62%22/%3E%3Ccircle cx=%2275.6%22 cy=%22173.1%22 r=%220.87%22 fill=%22%23fff%22 fill-opacity=%220.65%22/%3E%3Ccircle cx=%2225.6%22 cy=%22148.3%22 r=%220.86%22 fill=%22%23fff%22 fill-opacity=%220.67%22/%3E%3Ccircle cx=%22200.6%22 cy=%22118.4%22 r=%221.01%22 fill=%22%23fff%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22165.4%22 cy=%2259.8%22 r=%221.01%22 fill=%22%23fff%22 fill-opacity=%220.50%22/%3E%3Ccircle cx=%2280.5%22 cy=%2225.2%22 r=%220.67%22 fill=%22%23fff%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22127.6%22 cy=%22199.2%22 r=%220.73%22 fill=%22%23fff%22 fill-opacity=%220.58%22/%3E%3Ccircle cx=%2250.1%22 cy=%22199.4%22 r=%220.90%22 fill=%22%23fff%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%2278.0%22 cy=%2226.3%22 r=%221.02%22 fill=%22%23fff%22 fill-opacity=%220.65%22/%3E%3Ccircle cx=%2217.8%22 cy=%22163.6%22 r=%220.94%22 fill=%22%23fff%22 fill-opacity=%220.51%22/%3E%3C/svg%3E"); --st3:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22310%22 height=%22310%22%3E%3Ccircle cx=%22120.3%22 cy=%22128.8%22 r=%221.08%22 fill=%22%23fff%22 fill-opacity=%220.68%22/%3E%3Ccircle cx=%22218.9%22 cy=%22203.0%22 r=%221.41%22 fill=%22%23fff%22 fill-opacity=%220.83%22/%3E%3Ccircle cx=%22259.4%22 cy=%2231.9%22 r=%221.55%22 fill=%22%23fff%22 fill-opacity=%220.86%22/%3E%3Ccircle cx=%22151.4%22 cy=%226.6%22 r=%221.50%22 fill=%22%23fff%22 fill-opacity=%220.79%22/%3E%3Ccircle cx=%22294.9%22 cy=%22276.2%22 r=%221.51%22 fill=%22%23fff%22 fill-opacity=%220.89%22/%3E%3Ccircle cx=%22236.9%22 cy=%22288.1%22 r=%221.35%22 fill=%22%23fff%22 fill-opacity=%220.86%22/%3E%3Ccircle cx=%2211.0%22 cy=%22150.3%22 r=%221.56%22 fill=%22%23fff%22 fill-opacity=%220.78%22/%3E%3C/svg%3E") }
.phone,#hubBody:before{ background-image:var(--st1), var(--st2), var(--st3), var(--feltTex);
  background-size:150px 150px, 230px 230px, 310px 310px, auto; background-repeat:repeat }

/* Poza de erou: margini mai adanci in culoarea zonei (centrul neatins) si stelele care aluneca la margini. */
:root{ --vg:12,5,32 }
body[data-cat="mind"]{ --vg:3,8,28 }
body[data-cat="body"]{ --vg:3,14,8 }
body[data-cat="soul"]{ --vg:12,5,32 }
.thPic::before,#fvHero .fvPic::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--st1), var(--st2), var(--st3); background-size:150px 150px, 230px 230px, 310px 310px; background-repeat:repeat;
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 58%, transparent 45%, #000 100%);
  mask-image:radial-gradient(ellipse 72% 58% at 50% 58%, transparent 45%, #000 100%);
  animation:stDrift 60s linear infinite, stTwinkle 6s ease-in-out infinite }
@keyframes stDrift{ from{ background-position:0 0, 0 0, 0 0 } to{ background-position:-150px 150px, -230px 230px, -310px 310px } }
@keyframes stTwinkle{ 0%,100%{ opacity:1 } 50%{ opacity:.6 } }
.thPic::after,#fvHero .fvPic::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--vg),.34) 0, rgba(var(--vg),0) 30%),
    radial-gradient(ellipse 80% 64% at 50% 56%, rgba(var(--vg),0) 44%, rgba(var(--vg),.46) 100%) }
@media (prefers-reduced-motion:reduce){ .thPic::before,#fvHero .fvPic::before{ animation:none } }