/*
 * loader.css - the loading screen shared by the map pages and the Lab Results Library.
 * Loaded after each page's own stylesheet. It restyles the page's existing #gate markup, so
 * the pages' own scripts are unchanged:
 *  - while the page loads (the "Go to the dashboard" link is hidden) only the beakers animation
 *    (assets/img/beakers.svg), the page name and a progress bar show; the title and explanatory
 *    line are not displayed;
 *  - when the gate has something to say (sign in first, or an error: the link is showing) it
 *    becomes a plain card with the title, the line and the link.
 * The Lab Results Library's own measured bar (#gate-progress) replaces the sweeping bar once it
 * starts counting files. helia-only.js draws the same screen while it checks access, so the two
 * hand over without a visible change.
 */
.gate{
  background:radial-gradient(1100px 560px at 50% 42%, #131b28 0%, #0b0f15 62%);
  opacity:1; transition:opacity .35s ease, display .35s allow-discrete;
}
.gate[hidden]{display:none; opacity:0}
.gate-card{
  width:min(340px, 78vw); max-width:none; padding:0; background:none; border:0; border-radius:0; box-shadow:none;
  display:flex; flex-direction:column; align-items:center; text-align:center; color:#e9edf2;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  animation:qmtr-gate-in .45s ease .12s both;
}
.gate-brand{
  margin:0 0 20px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#c9d1dc;
}
.gate-brand em{font-style:normal; color:#EE6C2D; margin:0 .2em}

/* Two beakers taking turns to pour into each other, above the page name. The animation is inside
   the SVG, which also holds still for reduced motion. */
.gate-card::before{
  content:''; display:block; width:96px; height:62px; margin:0 0 14px;
  background:url(/assets/img/beakers.svg) center/contain no-repeat;
}

/* Loading: no words beyond the page name. */
.gate:not(:has(#gate-link:not([hidden]))) .gate-title,
.gate:not(:has(#gate-link:not([hidden]))) .gate-body{display:none}

/* The sweeping bar. */
.gate-card::after{
  content:''; display:block; width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg, rgba(238,108,45,0) 0%, #EE6C2D 50%, rgba(238,108,45,0) 100%) no-repeat, rgba(255,255,255,.08);
  background-size:40% 100%, 100% 100%;
  animation:qmtr-sweep 1.5s cubic-bezier(.45,0,.25,1) infinite;
}
/* A measured bar (Lab Results Library) takes over once it is counting. */
.gate:has(#gate-progress:not([hidden])) .gate-card::after{display:none}
.gate-progress{width:100%; height:3px; margin:0; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.gate-progress i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, #EE6C2D, #F7A26A); transition:width .35s ease}

/* Something to say (sign in first, or an error): a plain card with the words and the link. */
.gate:has(#gate-link:not([hidden])) .gate-card{
  width:min(440px, 92vw); padding:24px 26px; text-align:left; align-items:flex-start;
  background:#10161f; border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.gate:has(#gate-link:not([hidden])) .gate-card::after,
.gate:has(#gate-link:not([hidden])) .gate-card::before{display:none}
.gate:has(#gate-link:not([hidden])) .gate-brand{margin-bottom:14px}
.gate-title{font-size:16px; font-weight:600; color:#fff; margin:0 0 6px}
.gate-body{color:#aab6c4; line-height:1.5; font-size:13.5px}

@keyframes qmtr-sweep{0%{background-position:-67% 0, 0 0} 100%{background-position:167% 0, 0 0}}
@keyframes qmtr-gate-in{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .gate-card{animation:none}
  .gate-card::after{animation:none; background:rgba(238,108,45,.55)}
}