/*
  Stage 2: Plymouth and the systemd log (assets/boot/splash.js).

  Two screens that never share a frame. Plymouth switches between the splash
  and the log with a hard cut — no fade — so neither does this: `.is-log` on
  the root swaps one for the other.

  The log is the Linux text console, not Breeze, so its colours are the VGA
  palette systemd's escape codes land on there (bright green OK, bright red
  FAILED, bright yellow WARN, the red cylon). They are local constants, like
  Limine's, because they belong to the firmware-and-tty world below the
  desktop; a Breeze theme switch must not repaint a boot console. What does
  come from tokens.css: the monospace family, and the CachyOS cyan that the
  os-release colour prints "Ridewolf OS" in.
*/

.splash {
  --vt-fg: #d4d4d4;
  --vt-bold: #ffffff;
  --vt-dim: #8a8a8a;
  --vt-green: #55ff55;
  --vt-red: #ff5555;
  --vt-red-dim: #aa0000;
  --vt-yellow: #ffff55;

  /* The two ends of the CachyOS boot animation's shards (spec, appendix A). */
  --ply-blue: #0070f0;
  --ply-cyan: #00b0f0;

  --mark: min(300px, 64vw, 40vh);

  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #000;
  color: #fff;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- splash -------------------------------------------------------------- */

.splash__screen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  justify-items: center;
}

.splash.is-log .splash__screen {
  visibility: hidden;
}

/*
  The mark sits a little above centre, the way Plymouth themes place a logo
  with a spinner under it: the optical centre of the pair, not of the logo.
*/
.splash__mark {
  grid-row: 2;
  position: relative;
  width: var(--mark);
  height: var(--mark);
  margin-top: -6vh;
}

/*
  One shard: the whole mark, clipped to a triangle (inline clip-path), so the
  pieces fit edge to edge when they land. The mask is the wolf, white parts
  only; a shard over empty space draws nothing. Each flies in from outside,
  spinning about its own centre.
*/
.splash__shard,
.splash__glint {
  position: absolute;
  inset: 0;
  -webkit-mask: url("splash-wolf.png") center / 100% 100% no-repeat;
  mask: url("splash-wolf.png") center / 100% 100% no-repeat;
}

.splash__shard {
  transform-origin: var(--ox) var(--oy);
  animation: splash-shard 760ms cubic-bezier(0.16, 0.84, 0.3, 1) var(--delay) both;
  will-change: transform, opacity;
}

@keyframes splash-shard {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.35);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
  Assembled, the blue facets go white — the last frames of the CachyOS
  animation, where the shards become the white "C". Stepped, because
  Plymouth plays frames, it does not tween.
*/
.splash__glint {
  background: #fff;
  opacity: 0;
  animation: splash-glint 260ms steps(6, end) 1080ms forwards;
}

@keyframes splash-glint {
  to {
    opacity: 1;
  }
}

/*
  The spinner: white, 65 px, 41 frames a turn. A conic tail cut into a ring,
  rotated in steps so it ticks like a frame-based throbber rather than
  gliding like a web loader.
*/
.splash__spinner {
  grid-row: 3;
  width: 65px;
  height: 65px;
  margin-top: clamp(28px, 7vh, 64px);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / 0.15) 90deg, #fff 330deg, rgb(255 255 255 / 0) 331deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  animation: splash-spin 1025ms steps(41, end) infinite;
}

@keyframes splash-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Inter 12 pt, as the theme sets its message label. */
.splash__status {
  grid-row: 4;
  margin: 22px 0 0;
  padding: 0 16px;
  max-width: 100%;
  font: 400 16px/1.4 "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
  color: rgb(255 255 255 / 0.86);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  The one piece of chrome a real Plymouth does not have. Esc is invisible on
  a phone, so the log needs something to tap; it is kept to the dimness of
  a hint and says the key for whoever has one.
*/
.splash__toggle {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--bz-radius, 5px);
  background: none;
  font: 400 13px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  color: rgb(255 255 255 / 0.38);
  cursor: pointer;
}

/*
  Real Plymouth has no hint, so this one does not stay: it fades out as the
  boot passes three seconds (a pointer user has had time to read it; the Esc
  key still works unseen). Hover and focus bring it back, and a phone, where it
  is the only way to the log, keeps it at its dimness.
*/
@keyframes splash-hint-fade {
  to {
    opacity: 0;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .splash__toggle {
    animation: splash-hint-fade 0.8s ease-in 2.2s both;
  }
  .splash__toggle:hover,
  .splash__toggle:focus-visible {
    animation: none;
  }
}
:root[data-anim="off"] .splash__toggle {
  animation: none;
}

.splash__toggle[hidden] {
  display: none;
}

.splash__toggle:hover {
  color: rgb(255 255 255 / 0.7);
}

.splash__toggle:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.6);
  outline-offset: 2px;
  color: rgb(255 255 255 / 0.85);
}

.splash__kbd {
  padding: 3px 6px 2px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 500 11px/1 var(--bz-font-mono, ui-monospace, monospace);
  opacity: 0.8;
}

@media (hover: none) {
  .splash__kbd {
    display: none;
  }
}

.splash.is-log .splash__toggle {
  background: #000;
}

/* ---- the console --------------------------------------------------------- */

.splash__log {
  position: absolute;
  inset: 0;
  padding: 20px 24px 76px;
  overflow: hidden;
  visibility: hidden;
  font: 400 14px/1.4 var(--bz-font-mono, ui-monospace, monospace);
  font-variant-ligatures: none;
  color: var(--vt-fg);
}

.splash.is-log .splash__log {
  visibility: visible;
}

/*
  A wrapped line hangs under its text, not under the tag, so the column of
  [  OK  ] stays a column at phone width too.
*/
.splash__line {
  margin: 0;
  padding-left: 9ch;
  text-indent: -9ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.splash__tag {
  white-space: pre;
}

.splash__unit {
  font-weight: 700;
  color: var(--vt-bold);
}

.is-ok .splash__state {
  color: var(--vt-green);
  font-weight: 700;
}

.is-failed .splash__state {
  color: var(--vt-red);
  font-weight: 700;
}

.is-warn .splash__state {
  color: var(--vt-yellow);
  font-weight: 700;
}

.splash__star {
  color: var(--vt-red-dim);
}

.splash__star.is-hot {
  color: var(--vt-red);
  font-weight: 700;
}

.splash__line.is-detail {
  padding-left: 9ch;
  text-indent: 0;
}

.splash__line.is-kernel {
  padding-left: 15ch;
  text-indent: -15ch;
  color: var(--vt-dim);
}

.splash__line.is-welcome {
  padding-left: 0;
  text-indent: 0;
  margin-top: 0.7em;
}

.splash__line.is-kernel + .splash__line.is-welcome {
  margin-top: 1.4em;
}

.splash__os {
  color: var(--cachy-cyan, #00ccff);
  font-weight: 700;
}

@media (max-width: 600px) {
  .splash__log {
    padding: 14px 16px 72px;
    font-size: 11px;
    line-height: 1.45;
  }
}

/* ---- motion -------------------------------------------------------------- */

/*
  No motion: the mark is simply there, white, and the spinner holds still.
  Settings → Animations → off says the same thing as the system setting.
*/
@media (prefers-reduced-motion: reduce) {
  .splash__shard,
  .splash__spinner {
    animation: none;
  }

  .splash__glint {
    animation: none;
    opacity: 1;
  }
}

:root[data-anim="off"] .splash__shard,
:root[data-anim="off"] .splash__spinner {
  animation: none;
}

:root[data-anim="off"] .splash__glint {
  animation: none;
  opacity: 1;
}