/*
 * ══ The moving CallVend mark — the phone app's loading screens (owner, 2026-10-25) ══════════════
 *
 * Linked from index.html rather than bundled, because the app-open splash is drawn by index.html
 * BEFORE the JavaScript arrives (that is the point of it: something branded on screen the instant
 * the page does). The React loader (components/AnimatedLogo.tsx) uses the same classes, so there is
 * one animation, not two that drift.
 *
 * The owner's choreography (corrected 2026-10-25 — the first version only swung the halves 49°
 * and back, which is NOT what was drawn): the mark is two halves that meet on the left.
 *   1. both halves travel ONE FULL CIRCLE at the same time, in opposite directions — the top half
 *      down the right side and round (clockwise), the bottom half up the right side and round
 *      (anticlockwise) — opening a gap behind them as they go, crossing on the way;
 *   2. each comes to rest exactly where it started, so the plain C is back at the end of the loop;
 *   3. all the while the three bars move up and down.
 *
 * Geometry lives in the SVG: centre (16,16), radius 9, the opening ±48° either side of the right;
 * the halves overlap two degrees on the left at rest, so the join shows no anti-aliasing seam. A
 * full turn ends at 360° = 0°, so the loop restarts with no jump.
 */

.cv-logo-motion .cv-lm-arc {
  transform-box: view-box;
  transform-origin: 16px 16px;
  animation: cv-lm-top 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.cv-logo-motion .cv-lm-arc--bottom {
  animation-name: cv-lm-bottom;
}

@keyframes cv-lm-top {
  0%,
  8% {
    transform: rotate(0deg);
  }
  92%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cv-lm-bottom {
  0%,
  8% {
    transform: rotate(0deg);
  }
  92%,
  100% {
    transform: rotate(-360deg);
  }
}

.cv-logo-motion .cv-lm-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: cv-lm-eq 0.9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cv-logo-motion .cv-lm-bar:nth-child(2) {
  animation-delay: -0.3s;
}

.cv-logo-motion .cv-lm-bar:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes cv-lm-eq {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1);
  }
}

/* ── The app-open splash (index.html) ───────────────────────────────────────────────────── */

#cv-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  place-items: center;
  /* The Android launch screen's own ink (CallVendAndroid res/values/colors.xml `brand_ink`), so the
     hand-over from the system's still icon to this moving one is not a change of colour. */
  background: #01020b;
  transition: opacity 320ms ease;
}

html.cv-splash-on #cv-splash {
  display: grid;
}

#cv-splash.cv-splash--out {
  opacity: 0;
  pointer-events: none;
}

/* Sized so the ring matches the system launch icon it replaces (~158px across on a phone; measured on the emulator). */
#cv-splash .cv-logo-motion {
  width: 232px;
  height: 232px;
}