/*
 * e-PUD - ozadje prijavnih strani: vesolje (login.php, loginError.php, stran po prevec poskusih).
 * Vkljuci ga mkportal/include/prijava_stran.php, ko je vklopljena moznost 'vesolje'.
 * Rimska cesta in zvezde so narisani (prijava-vesolje.js), planeti so krogle z zemljevidi
 * (WebGL): Zemlja - NASA Blue Marble, Mars - USGS Viking MDIM 2.1, Saturn - iz Cassinijeve
 * fotografije PIA06193 (NASA/JPL/SSI). Vse slike so javna last. Slike: images/prijava/.
 */
/* ---------- ozadje: vesolje - Rimska cesta in zvezde (narisane), planeti (zemljevidi NASA/USGS, izris WebGL) ---------- */
.bg{background:
  radial-gradient(1100px 700px at 78% 18%,rgba(88,64,178,.26),transparent 60%),
  radial-gradient(900px 650px at 12% 85%,rgba(18,92,170,.28),transparent 62%),
  linear-gradient(160deg,#04061a 0%,#070b24 45%,#02030c 100%) !important}
.bg .blob,.bg .waves,.bg .chip,#net{display:none !important}
/* nebo se pocasi vrti (en krog v --vrtenje) in zelo pocasi oddaljuje: v --oddaljevanje se pomanjsa
   na 0.8 (platno je zato vecje od zaslona, glej NEBO_MIN v prijava-vesolje.js) */
.nebo-vrti{position:absolute;left:50%;top:50%;
  animation:vrti var(--vrtenje,1200s) linear infinite,nebo-oddaljuj var(--oddaljevanje,240s) cubic-bezier(.25,.35,.55,1) forwards;
  will-change:transform,scale}
.nebo-vrti canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes vrti{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes nebo-oddaljuj{from{scale:1}to{scale:.8}}
.nebo-vrti .miglja{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(210,225,255,.85);opacity:.2;animation:miglja var(--t,4s) ease-in-out var(--z,0s) infinite}
.nebo-vrti .miglja.vecja{width:3px;height:3px;box-shadow:0 0 10px 2px rgba(210,225,255,.9)}
@keyframes miglja{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
/* planeti: platna WebGL; vsak se vrti okoli svoje osi */
.planet-gl{position:absolute;pointer-events:none;display:block}
/* Zemlja v spodnjem levem kotu (desno spodaj so povezave v nogi). Vzhod in oddaljevanje vodi
   prijava-vesolje.js; animacija CSS spodaj je samo rezerva, ce skripta ne tece. Vrh krogle je po vzhodu pri 76 %
   visine, pod besedilom in gumbi (krogla ima polmer 0,47 platna, zato 3 % roba nad njo). */
.planet-gl.zemlja{width:min(34vw,480px);height:min(34vw,480px);left:-6vw;top:calc(76% - 0.03 * min(34vw,480px));
  filter:drop-shadow(0 0 40px rgba(90,160,255,.30));
  /* zacne pri 7. sekundi vzhoda, da je Zemlja vidna takoj ob nalaganju strani */
  animation:zemlja-vzhaja var(--vzhod,45s) cubic-bezier(.35,.35,.45,1) -7s forwards}
@keyframes zemlja-vzhaja{from{transform:translate(-7vw,11vw)}to{transform:translate(0,0)}}
.planet-gl.saturn{width:clamp(220px,22vw,340px);height:clamp(220px,22vw,340px);right:0;top:2vh;
  filter:drop-shadow(0 0 24px rgba(255,214,160,.12))}
.planet-gl.mars{width:84px;height:84px;left:3vw;top:4vh;filter:drop-shadow(0 0 16px rgba(255,120,80,.25))}
/* besedilo na temni podlagi */
.hero::before{background:radial-gradient(closest-side,rgba(4,6,26,.55),rgba(4,6,26,.25) 60%,transparent) !important}
.brand .wordmark{color:#fff !important}
.hero h1{color:#fff !important;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero p,.hero .lead{color:#c9d6f2 !important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.roles span{background:rgba(255,255,255,.12) !important;color:#e8efff !important;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset !important;backdrop-filter:blur(6px)}
/* utrinka: ob 2. in 5. sekundi se za delcek sekunde posvetita na nebu (prijava-vesolje.js) */
.utrinek{position:absolute;width:var(--rep,230px);height:2px;margin-top:-1px;pointer-events:none;transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(205,225,255,.55) 60%,#fff);border-radius:2px;
  filter:drop-shadow(0 0 6px rgba(200,225,255,.9));opacity:0;animation:utrinek var(--cas,.8s) ease-out forwards}
.utrinek::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 4px rgba(210,230,255,.95)}
@keyframes utrinek{0%{opacity:0;transform:rotate(var(--kot,155deg)) translateX(0) scaleX(.3)}
  15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:rotate(var(--kot,155deg)) translateX(var(--pot,300px)) scaleX(1)}}
@media (max-width:900px){.planet-gl.saturn,.planet-gl.mars{display:none}.planet-gl.zemlja{width:70vw;height:70vw;left:-22vw;top:auto;bottom:-20vw}}
@media (prefers-reduced-motion:reduce){.nebo-vrti,.nebo-vrti .miglja,.planet-gl{animation:none}}