/**
 * portal-preloader.css — full-screen login warm-up overlay for the player portal.
 *
 * Module: public/js/portal-preloader.js (window.PortalPreloader).
 * Shown while the portal preloads Karakterark/Dasham/Færd/Hold data into
 * PortalCache (IndexedDB). Blocking on cold cache; absent on warm cache.
 *
 * BEM: .hd-portal-preloader__* . Token-only — no hardcoded colors/sizes/motion.
 * Progress fill width is driven by the JS-set custom property
 * `--hd-preload-progress` (mirrors the `--hd-hp-fill` pattern in player-top-bar).
 *
 * @layer components
 */

@layer components {

  .hd-portal-preloader {
    position: fixed;
    inset: 0;
    z-index: var(--hd-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hd-space-4);
    background: var(--hd-surface-overlay);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
  }

  .hd-portal-preloader__card {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    width: 100%;
    max-width: 28rem;
    padding: var(--hd-space-5);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-modal);
    text-align: center;
  }

  .hd-portal-preloader__title {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h2);
    color: var(--hd-text-primary);
  }

  .hd-portal-preloader__label {
    margin: 0;
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
    min-height: 1.4em; /* avoid reflow as the step label changes */
  }

  .hd-portal-preloader__track {
    width: 100%;
    height: var(--hd-space-2);
    background: var(--hd-surface-base);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    overflow: hidden;
  }

  .hd-portal-preloader__bar {
    width: var(--hd-preload-progress, 0%);
    height: 100%;
    background: var(--hd-accent-primary);
    border-radius: inherit;
    transition: width var(--hd-motion-normal) var(--hd-ease-ui);
  }
}