/* =========================================================================
   Gemora boot loader — a line-art diamond inside a progress ring.

   Runs before any bundle is parsed, so everything here is plain CSS with a
   system font stack; the app's own fonts are not loaded yet at first paint.
   The counter is driven by the inline script in index.html and completed by
   entry-client.ts once the app has mounted.
   ========================================================================= */

#main_loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101a2f;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.55s ease-out, visibility 0.55s ease-out;
}

/* soft pool of light behind the mark */
#main_loading::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(91, 131, 219, 0.18) 0%,
    rgba(91, 131, 219, 0.06) 42%,
    transparent 68%
  );
  pointer-events: none;
}

.loader-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

/* ---------------- ring + diamond ---------------- */

.loader-mark {
  position: relative;
  width: 264px;
  height: 264px;
}

.loader-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.loader-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1.5;
}

.loader-ring__progress {
  fill: none;
  stroke: url(#loaderRingGradient);
  stroke-width: 2;
  stroke-linecap: round;
  /* circumference of r=88 -> 2 * PI * 88 */
  stroke-dasharray: 552.92;
  stroke-dashoffset: 552.92;
  filter: drop-shadow(0 0 6px rgba(91, 131, 219, 0.55));
  transition: stroke-dashoffset 0.1s linear;
}

.loader-diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
  animation: loader-diamond-float 3.2s ease-in-out infinite;
}

.loader-diamond path,
.loader-diamond line {
  fill: none;
  stroke: #bcd0f2;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* facet lines sit a touch quieter than the silhouette */
.loader-diamond .facet {
  stroke: rgba(188, 208, 242, 0.6);
  stroke-width: 1;
}

/* The silhouette draws itself in on first paint. Resting state is the FULL
   stroke and the keyframe supplies the hidden start, so a stone is always
   visible even if the animation never runs (reduced motion, older engines). */
.loader-diamond .outline {
  stroke-dasharray: 260;
  stroke-dashoffset: 0;
  animation: loader-draw 1.6s ease-out;
}

/* a highlight sweeps across the stone */
.loader-diamond__glint {
  fill: rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: loader-glint 3.2s ease-in-out infinite;
}

@keyframes loader-draw {
  from { stroke-dashoffset: 260; }
}

@keyframes loader-diamond-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -52%) scale(1.03); }
}

@keyframes loader-glint {
  0%, 62%  { opacity: 0; }
  70%      { opacity: 0.85; }
  86%, 100% { opacity: 0; }
}

/* ---------------- percentage ---------------- */

.loader-percent {
  display: flex;
  align-items: baseline;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.loader-percent__value {
  color: #ffffff;
}

.loader-percent__sign {
  color: #7ba0e8;
  margin-left: 1px;
}

.loader-caption {
  margin-top: -18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

/* ---------------- completion + exit ---------------- */

#main_loading.is-complete .loader-diamond {
  animation: loader-diamond-settle 0.45s ease-out forwards;
}

#main_loading.is-complete .loader-ring__progress {
  filter: drop-shadow(0 0 14px rgba(91, 131, 219, 0.9));
}

@keyframes loader-diamond-settle {
  0%   { transform: translate(-50%, -50%) scale(1); }
  45%  { transform: translate(-50%, -50%) scale(1.14); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

#main_loading.hide {
  opacity: 0;
  visibility: hidden;
}

/* ---------------- small screens ---------------- */

@media (max-width: 480px) {
  .loader-mark { width: 210px; height: 210px; }
  .loader-diamond { width: 88px; height: 88px; }
  .loader-percent { font-size: 1.75rem; }
  #main_loading::before { width: 420px; height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-diamond,
  .loader-diamond__glint,
  .loader-diamond .outline {
    animation: none;
  }
}