/* ═══════════════════════════════════════════════════════════════
   PRELOADER — the app's splash, recreated.
   "coin" rises → "BRIDGE" rises → the rule draws itself with a dot
   riding its edge → the dot launches and lands as the dot of the ı.
   preloader.js drives it; every escape hatch lives here in CSS too.
═══════════════════════════════════════════════════════════════ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  /* CSS-only failsafe: if preloader.js never runs, self-dismiss at 5s.
     (theme.css's reduced-motion block collapses this to ~0s — also correct.) */
  animation: plAutoHide 0.4s var(--ease-cb) 5s forwards;
}
/* Repeat visits (sessionStorage flag set by an inline head script) and
   no-JS visitors never see the overlay at all. */
.cb-skip-splash #preloader,
html:not(.js) #preloader { display: none; }
@keyframes plAutoHide {
  to { opacity: 0; visibility: hidden; }
}

/* Geometry mirrors the shipped lockup (app_icon.png / coin_bridge_logo.dart)
   at a 56px base: dot 0.18em with a clear gap above the ı, rule 2.5em wide,
   BRIDGE 0.55em w300 tracked 0.16em. Keep in sync with .wm-stack (site.css). */
.pl-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.pl-coin {
  font-size: 56px;
  font-weight: 640;
  letter-spacing: -0.042em;
  color: var(--ink-900);
  opacity: 0;
}
.pl-iwrap { position: relative; display: inline-block; }
.pl-idot {
  position: absolute;
  top: calc(0.118em - 1px); /* glyph-ink-derived − 1px optical, in sync with .wm-idot */
  left: calc(50% + 0.021em);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cb-blue-600);
  opacity: 0;
}

/* The app's splash draws the rule EXACTLY as wide as the BRIDGE text
   (splash_screen.dart: lineX1 = cx − bridgeW/2, lineX2 = lineX1 + bridgeW)
   — unlike the static wordmark, whose rule is 2.5em. BRIDGE is the widest
   child of the lockup column, so stretching spans precisely its width. */
.pl-rule {
  width: auto;
  align-self: stretch;
  height: 2px; /* app: 1.8 at a 52px coin — 2px at our 56px scale */
  border-radius: 1px;
  background: var(--cb-blue-600);
  margin: 15px 0 19px;
  transform: scaleX(0);
  transform-origin: left center;
}

.pl-bridge {
  font-size: 31px;
  font-weight: 300;
  letter-spacing: 0.135em;
  padding-left: 0.135em; /* optically recentre the tracked text */
  color: var(--ink-900);
  opacity: 0;
}

.pl-flydot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cb-blue-600);
  opacity: 0;
  will-change: transform;
}