/* ─────────────────────────────────────────────────────────────────
 * FEMS first-paint loader · "1A · Wave (continuous)"
 *
 * Authored to match the canonical Wave loader from the design handoff
 * (FEMS Loader Animations v2). Each red path runs a staggered fade-in /
 * hold / fade-out cycle, so the cascade reads as a wave rolling top→
 * bottom forever. The gray F pulses softly so the mark stays "alive"
 * between waves. No all-fade-out reset frame — the loop is seamless.
 *
 * Loaded before Vue mounts (linked from /index.html) so the mark shows
 * the instant the page paints, even on the very first request.
 * ───────────────────────────────────────────────────────────────── */

body { margin: 0; }

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
  gap: 14px;
}

/* The mark itself — 50 × 64 viewport, matches design v2 stage-mark */
.fems-wave-mark {
  inline-size: 50px;
  block-size: 64px;
  display: block;
}

/* "FEMS" wordmark caption under the mark — soft mono, low emphasis */
.fems-wave-meta {
  color: #a09b91;
  font: 400 11px/1 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Cascading red strokes ──
 * 2.4 s cubic-bezier(.5,0,.2,1), staggered 0 / 0.15 / 0.30 / 0.45 s.
 * The transform-origin sits at the bottom-right of the cascade so the
 * subtle scale + translate looks like the strokes are "drawing in" from
 * the tip of the F's stem rather than just popping. */
.fems-wave-mark .red-1,
.fems-wave-mark .red-2,
.fems-wave-mark .red-3,
.fems-wave-mark .red-4 {
  animation: fems-wave 2.4s cubic-bezier(.5, 0, .2, 1) infinite both;
  transform-origin: 65% 50%;
}
.fems-wave-mark .red-1 { animation-delay: 0.00s; }
.fems-wave-mark .red-2 { animation-delay: 0.15s; }
.fems-wave-mark .red-3 { animation-delay: 0.30s; }
.fems-wave-mark .red-4 { animation-delay: 0.45s; }

@keyframes fems-wave {
  0%   { opacity: 0; transform: translate(-3px, -2px) scale(.96); }
  18%  { opacity: 1; transform: translate(0, 0)        scale(1);   }
  55%  { opacity: 1; transform: translate(0, 0)        scale(1);   }
  78%  { opacity: 0; transform: translate(2px, 1px)    scale(.99); }
  100% { opacity: 0; transform: translate(-3px, -2px)  scale(.96); }
}

/* ── Gray F · steady backbone with a gentle breath ── */
.fems-wave-mark .gray-f { animation: fems-wave-f 2.4s ease-in-out infinite; }
@keyframes fems-wave-f {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fems-wave-mark .red-1,
  .fems-wave-mark .red-2,
  .fems-wave-mark .red-3,
  .fems-wave-mark .red-4,
  .fems-wave-mark .gray-f {
    animation: none !important;
    opacity: 1;
  }
}